js 함수 로드
17706 단어 jquery-pjax
묘사
저는 pjax를 사용합니다. 모든 것이 정상이지만 단 한 가지입니다.내용과 js를 로드할 때 js on load가 작동하지만 기능은 다음과 같습니다.
var map = {
init : function() {
alert('test');
}
}
map.init
이 함수는 호출되지 않았고 일반 함수function test() { ... }
도 작용하지 않았다. 왜?토론 #1
헤이,나는 이것이 맞춤법 오류인지 모르겠지만, init는 맵이라고 불러야 한다.init();정확했어그리고 "}"뒤에 점수 번호를 추가합니다.
JSFIDLE에서 작동합니다.http://jsfiddle.net/2cSxW/
var map = {
init: function() {
alert('test');
}
};
map.init();
감사합니다!네, 고맙습니다.토론 #2
Np!토론 #셋
이런 새로운 문제에 부딪혔다.나는 #main containter div를 사용하는데 그 중 모든div와 스크립트에 javascrpt 코드가 있고 pjax를 사용하여 다음과 같은 기능을 수행한다.
$('a[data-pjax]').pjax({
container: '#main_container',
fragment: '#main_container'
});
현재 링크를 눌렀을 때 #main container div가 새 것으로 바뀌었지만, 페이지를 검사할 때,div만 보였습니다. 토론 #4
표시가 전혀 없습니다. 그래서javascript는 불러오지 않았습니다. 왜fragment를 사용할 때 이런 상황이 발생했습니까? 이 경우는 없습니다. 페이지에main container div만 남았습니다. 클릭할 때 불러와야 합니까?<script>
상응하는 토론 #5
표시를 발표할 수 있습니까?또는, 만약 당신이 그것을 JSFiddle에 넣을 수 있다면 더욱 좋을 것입니다. 이렇게 하면 전체 화면을 더욱 쉽게 볼 수 있습니다.네가 말한 바와 같이HTML
라벨은 전혀 보이지 않는다. 나는 전체 그림을 보면 도움이 될 것이라고 추측한다!감사합니다!
사갈
<script>
여기는 링크: 토론 #6
메인 내용에 두 개의 링크가 있는지 확인하고http://fbstatusi.com/desavanja/kalendar/mesecna_lista
클릭하여 어떤 Heppens 페이지가 불러왔는지 확인하지만 스크립트가 불러오지 않았습니다. 원본 코드를 검사하고 확인하십시오.고맙습니다.내가 알아봤는데, 네가 맞았어. 내가 그것을 눌렀을 때 스크립트가 불러오지 않을 거야.하지만 페이지를 다시 불러오면 작업을 할 수 있습니다. 검사해 보셨습니까?확실하지는 않지만, 문제는 Zurka 123
스크립트 표시가 있을 수 있습니다. pjax 요청을 실행할 때 이 표시를 업데이트할 것입니다.리셋토론 #7
일 수 있습니다.다음 사항이 유효할 수 있다고 생각합니다.- 사용자 정의 JS 스크립트를 위한 별도의 JS 파일 만들기(현재 스크립트 태그에 인라인 연결)
- 스크립트 태그를
#main_content
태그 중 또는 div
태그 바로 아래에 놓습니다.다시 불러올 때 작업 (가져오기
head
와 body
을 하고 있습니다. 이것은 스크립트 탭을 정확하게 배치하면 문제를 해결할 수 있다고 생각합니다.또한 이 링크를 확인하십시오.http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup
alert
map
에 script
탭을 놓는 것에 대한 정보를 알고 있습니다. 하지만 저는 이렇게 해야 합니다. 만약에 제 모든 스크립트가 한 파일에 있다면 그것은 큰 파일이 될 것입니다. 왜냐하면 저는 모든 페이지에 스크립트를 사용하기 때문입니다.네, 작업을 다시 불러올 때, pjax가 작업을 하지 않기를 요청할 뿐입니다.
제가 이 문제를 해결할 수 있습니까?
대답 고마워요.
html
Np!모든 스크립트가 아니라, 당신이 만든 스크립트입니다. (당신이 가지고 있는 pjax 코드)스크립트 태그를
토론 #8
외부에 두시겠습니까?다른 파일에서 스크립트를 사용하지 않으려고 해도 가능할 것입니다.또한 모듈화를 유지하려면 페이지마다 JS 파일을 설정할 수 있습니다. (작성한 JS에만 한정됩니다.)이렇게 하면 사용자 정의 스크립트를 저장할 큰 파일이 없을 것입니다.
나는 여전히
토론 #9
에#main_container div
표시가 있기 때문에 script
응답에 작용하지 않지만 다시 불러올 때 작용한다고 생각한다.그것들을 #main_container!
라벨 이외에 두면 유용할 수 있다.예를 들면 다음과 같습니다.<div id="main_content" class="shadow">
<ul class="mesecna_lista_ul">
<li class="datum_linija"><span class="datum_linija_text">11.09. - Utorak</span></li>
<li class="desavanje_linija"><span class="vreme_linija">01:20h</span> - <a href="http://fbstatusi.com/desavanja/kalendar/desavanje/zurka-123" data-pjax="yes">Zurka 123</a></li>
<li class="desavanje_linija"><span class="vreme_linija">07:10h</span> - <a href="http://fbstatusi.com/desavanja/kalendar/desavanje/sss" data-pjax="yes">sss</a></li>
</ul>
</div>
<footer id="page_footer">
<a href="#" class="big_button">Pošđćčtovanje</a>
<a href="#" class="button">Pošđćčtovanje</a>
<a href="#" class="button">asdasdsa</a>
<a href="#" class="button">asdasdsa</a>
<a href="#" class="button">asdasdsa</a>
<a href="#">asdasdsa</a>
</footer>
</div> <!-- For #wrapper -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<script src="/desavanja/public/js/jquery.placeholder.min.js"></script>
<script src="/desavanja/public/js/jquery.pjax.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13b/main.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('a[data-pjax]').pjax({
container: '#main_content',
fragment: '#main_content'
});
});
</script>
</body>
이 가능하다, ~할 수 있다,...고맙습니다.
pjax
그러나 새 페이지를 불러올 때 자바스크립트 코드가 있습니다. 저는 그것을 #main 용기에 넣었습니다. 왜냐하면 pjax는 이div를 세션으로 사용하고 모든 내용을 가져옵니다. 왜냐하면div#main 내용에서 스크립트를 사용하기 때문입니다.페이지마다 자바스크립트 코드가 있습니다. 이것이 바로 제가 헤드 표시가 아닌 바디에서 사용하는 이유입니다.
div
당신은 이 문제를 해결할 수 있습니까?알겠습니다.
토론 #10
라벨 앞에 놓으면토론 #11
라벨 밖에는 괜찮을 것입니다.</body>
네, 이런 식으로 작업을 할 수 있지만 다음 페이지에 스크립트 탭을 불러올 수 없습니다. 모든 스크립트를 한 파일에 넣거나 모든 js 코드를 넣기 전에.#main_container
오, 네.알겠습니다.내가 한번 해 보고 너와 함께 돌아갈게!고맙습니다.
Sagar
div
헤이@mirzadelic, 나는wierd이지만, 나는 나의 로컬 서버에서 당신의 색인 페이지를 시도했습니다. 이것은 정상적으로 작동하는 것 같습니다!확실하지는 않아요.토론 #12
fragment를 사용하십니까?fragment를 사용하면 localhost에서 작동하지 않습니다.토론 #13
네, fragment를 사용했습니다. 사실상 로그인 페이지에서 사용한 태그와 스크립트가 똑같습니다.유일한 문제는 닻이 표시된 HREF가 서버에 있는 서버 스크립트를 가리키고 있다는 것이다. 왜냐하면 나는 이 스크립트를 설정하지 않았기 때문이다. 왜냐하면 나는 WAMP 창고에서 나의 로컬 호스트를 실행하기 때문이다.토론 #14
JSFIDLE에 올려놓고 확인해 주시겠어요?토론 #15
그것은 너와 매우 비슷하다.이것이 바로 Working on JSFiddle토론 #16
JSFIDLE에서 페이지를 새로 고치고 맨 위에 텍스트 로고를 표시한 다음 링크를 클릭하면 텍스트가 새 페이지를 불러오기 때문에 표시가 취소됩니다.토론 #17
네, 알겠습니다.이것은 정상적인 부탁이다.네가 시도할 수 있는 또 다른 일은 네가 클릭
토론 #18
해서 html로 돌아갈 때 네가 필요로 하는 내용+제목만 되돌려줄 수 있다는 것이다.만약 pjax의 프레젠테이션 페이지를 보았다면http://pjax.heroku.com, 서버 응답은 확실히토론 #19
등을 포함합니다. 이것은토론 #20
로 시작합니다.zurka 123
네, 알겠습니다.실제로 응답은 <html>
부터 시작해야 합니다.서버를 다음과 같이 반환합니다.
<title>Zurka 123</title>
<div id="main_content" class="shadow">
<section>
<h1 class="name">Zurka 123<span class="shadow">11.09.2012.</span></h1>
<div id="description">
<div id="map">
</div>
<div id="description_text">Opis<br />
asd<br />
qwe<br />
a<br />
<br />
asd asdas sss<br />
<br />
<br />
asda<br />
wqeq<br />
weq</div>
<div id="comments">
<h2 class="info">Komentari: <span class="comments_num">2</span></h2>
<article class="comment" id="c_3">
<h1 class="c_autor"><a href="/desavanja/user/prikazi/1">Admin istrator</a> <span class="c_datum">(04.09.2012. 22:43:41)</span></h1>
<p>asdasds</p>
</article>
<article class="comment" id="c_4">
<h1 class="c_autor"><a href="/desavanja/user/prikazi/1">Admin istrator</a> <span class="c_datum">(05.09.2012. 00:37:39)</span></h1>
<p>sdfds</p>
</article>
<article class="comment">
<p class="warning">Morate biti registrovan clan da bi mogli da komentarišete dešavanje.</p>
</article>
</div>
<script id="komentar_template" type="text/x-handlebars-template">
<article class="comment" id="c_{{id}}">
<h1 class="c_autor"><a href="/desavanja/user/prikazi/{{user_id}}">{{user_naziv}}</a> <span class="c_datum">({{dodato_datuma}})</span></h1>
<span class="c_delete"></span>
<p>{{{komentar}}}</p>
</article>
</script>
</div>
<div id="info">
<div class="sidebox">
<h2 class="info">Informacije</h2>
<ul class="info_ul">
<li><span class="label">Mesto:</span><span class="field">eliterasdas</span></li>
<li><span class="label">Drzava:</span><span class="field"><a href="/desavanja/kalendar/drzava/5">Srbija</a></span></li>
<li><span class="label">Grad:</span><span class="field"><a href="/desavanja/kalendar/grad/0"></a></span></li>
<li><span class="label">Adresa:</span><span class="field">Pristinška 15a</span></li>
<li><span class="label">Vreme pocetka:</span><span class="field">01:20</span></li>
<li><span class="label">Cena:</span><span class="field">100a</span></li>
<li><span class="label">Organizator:</span><span class="field">mirza</span></li>
<li><span class="label">Kapacitet:</span><span class="field">200a</span></li>
<li>
<span class="label">Vrsta dešavanja:</span><span class="field"><a href="/desavanja/kalendar/kategorija/1" class="button">Žurke</a><a href="/desavanja/kalendar/kategorija/2" class="button">Koncerti</a></span>
</li>
</ul>
</div>
<div class="sidebox">
<h2 class="info">Kontakt</h2>
<ul class="info_ul">
<li><span class="label">Korisnik:</span><span class="field"><a href="/desavanja/user/prikazi/1">Admin istrator</a></span></li>
<li><span class="label">Telefon:</span><span class="field">063</span></li>
<li><span class="label">E-Mail:</span><span class="field"><a href="mailto:[email protected]" class="button">Pošalji e-mail</a></span></li>
<li><span class="label">Web adresa:</span><span class="field"><a href="http://www.dsgnet.net" class="button" target="_blank">Link</a></span></li>
</ul>
</div>
<div class="sidebox">
<div class="ad"></div>
</div>
</div>
</section>
<script type="text/javascript">
$(document).ready(function() {
alert("asdas");
var map,
map_container = document.getElementById("map"),
markersArray = [];
var marker = {
init : function() {
var latlng = new google.maps.LatLng(44.022201, 20.908137099999976);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_container, myOptions);
marker.placeMarker(latlng);
},
placeMarker : function(location) {
var map_marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(map_marker);
}
}
marker.init();
$("body").on("click", ".c_delete", function() {
if (!confirm("Jeste li sigurni da želite da izbrišete ovaj komentar ?")) return;
var $this = $(this).parent();
var c_id = $this.attr("id");
c_id = c_id.replace("c_","");
$.ajax({
type: "POST",
url: "/desavanja/kalendar/izbrisi_komentar",
data: { desavanje_id : 34, komentar_id : c_id },
dataType: "json",
success: function(data) {
if (data.status) {
$this.slideUp(200, function() { $this.remove(); });
var comments_num = $(".comments_num");
comments_num.html(parseInt(comments_num.html())-1);
} else alert("Greška.");
},
error: function(e) {
alert("Greška, pokušajte ponovo: "+e.message);
comment.val("");
}
});
});
$("body").on("click", "#dc_btn", function() {
var comment = $("#comment_text");
if (comment.val() == "") return;
$.ajax({
type: "POST",
url: "/desavanja/kalendar/dodaj_komentar",
data: { desavanje_id : 34, komentar : comment.val() },
dataType: "json",
success: function(data) {
if (data.status) {
comment.val("");
data.dodato_datuma = new Date(data.dodato_datuma*1000);
data.dodato_datuma = formatDate(data.dodato_datuma);
var template = Handlebars.compile( $("#komentar_template").html() );
$("#comments article:last").before( template(data) );
var comments_num = $(".comments_num");
comments_num.html(parseInt(comments_num.html())+1);
} else alert("Greška, niste registrovani.")
},
error: function(e) {
comment.val("");
alert("Greška, pokušajte ponovo: "+e.message);
}
});
});
function leadingZero(number) {
return number < 10 ? "0" + number : number;
}
function formatDate(date) {
return date.getDate() + "." +
leadingZero(date.getMonth()) + "."+
leadingZero(date.getFullYear()) + ". " +
leadingZero(date.getHours()) + ":" +
leadingZero(date.getMinutes()) + ":" +
leadingZero(date.getSeconds());
}
});
</script>
</div>
자바스크립트를 다음과 같이 변경합니다.
$(document).ready(function() {
$('a[data-pjax]').pjax('#main_content');
});
JSFIDLE에서 이것을 보여줄 수 없습니다. 서버 응답이 바뀌고 있기 때문입니다.아, 로그인 페이지에
<title>
과 같은 텍스트를 입력하여 홈 페이지를 표시합니다. (내비게이션 단추의 텍스트 중 하나로 사용합니다.)이것은 반드시 작용할 것이다.토론 #21
고맙습니다. 사용할 수 있지만 새 div에 #main content를 포장하고<title>
해야 합니다. 왜냐하면 두 개의 #main content div가 있기 때문입니다.이제 제목 메뉴를 활성화하는 방법을 찾아야 합니다.
고맙습니다, 점원.
On Home
네...가능할 거예요.기꺼이 돕겠습니다!토론 #22
하하, 아직도 모르겠어요.모든 것이 정상적이지만, js는 불러오지 않고 내용과 제목만 응답합니다.그나저나 사갈사는 이 문제가 무엇인지 설명해 주시겠어요?이게 필요해.Reference
이 문제에 관하여(js 함수 로드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://github.com/defunkt/jquery-pjax/issues/181텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)