[英]Jquery loads on first page load, but not when reloaded in ajax div
The first time my page loads, all content loads correctly. 我的页面第一次加载时,所有内容都正确加载。 When loading a the same section of the page again using Ajax (to refresh content), the Jquery does not fully load.
使用Ajax再次加载页面的相同部分(刷新内容)时,Jquery无法完全加载。
Is this because the first time Jquery is activated by 'on page load' or something, so when opened in ajax window - the page hasn't actually reloaded, so Jquery isnt activated? 这是因为Jquery第一次被'on page load'激活,所以当在ajax窗口中打开时 - 页面实际上没有重新加载,所以Jquery没有被激活?
Here's the code I think causes the issue .. does it just need to activating when opened in an ajax div? 这是我认为导致问题的代码..它是否只需要在ajax div中打开时激活?
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
(function ($){
var handler = $('#tiles li');
handler.wookmark({
// Prepare layout options.
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 5, // Optional, the distance between grid items
outerOffset: 0, // Optional, the distance to the containers border
itemWidth: 178 // Optional, the width of a grid item
});
// Update the layout.
handler.wookmark();
});
})(jQuery);
</script>
I should mention that the Jquery is being used for styling reasons (it cleverly styles the page content). 我应该提一下,Jquery是出于造型的原因(它巧妙地设置了页面内容的样式)。 I would guess that happens when
handler.wookmark();
我猜想当
handler.wookmark();
is activated. 被激活了。 How can I activate this in the ajax window?
如何在ajax窗口中激活它?
I've been asked to provide my ajax code, so here it is: 我被要求提供我的ajax代码,所以这里是:
<!-- ajax script -->
<script>
window.onload = function () {
var everyone = document.getElementById('everyone'),
favorites = document.getElementById('favorites');
everyone.onclick = function() {
loadXMLDoc('indexEveryone');
var otherClasses = favorites.className;
if (otherClasses.contains("Active")) {
everyone.className = 'filterOptionActive';
favorites.className = 'filterOption';
}
}
favorites.onclick = function() {
loadXMLDoc('indexFav');
var otherClasses = everyone.className;
if (otherClasses.contains("Active")) {
favorites.className = 'filterOptionActive';
everyone.className = 'filterOption';
}
}
function loadXMLDoc(pageName)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("leftCont").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../home/" + pageName + ".php",true);
xmlhttp.send();
}
}
</script>
<!-- ends ajax script -->
I am a freaking genius, I solved my own problem! 我是一个天才,我解决了自己的问题! (This has never happened before :D)
(这从未发生过:D)
I had to add the javascript into my ajax coding so it would be re-read once the ajax refreshed. 我必须将javascript添加到我的ajax编码中,以便在ajax刷新后重新读取。
ANSWER: 回答:
<!-- ajax script -->
<script>
window.onload = function () {
var everyone = document.getElementById('everyone'),
favorites = document.getElementById('favorites');
everyone.onclick = function() {
loadXMLDoc('indexEveryone');
var otherClasses = favorites.className;
if (otherClasses.contains("Active")) {
everyone.className = 'filterOptionActive';
favorites.className = 'filterOption';
}
}
favorites.onclick = function() {
loadXMLDoc('indexFav');
var otherClasses = everyone.className;
if (otherClasses.contains("Active")) {
favorites.className = 'filterOptionActive';
everyone.className = 'filterOption';
}
}
function loadXMLDoc(pageName)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("leftCont").innerHTML=xmlhttp.responseText;
// this is the content that needed adding!
(function ($){
var handler = $('#tiles li');
handler.wookmark({
// Prepare layout options.
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 5, // Optional, the distance between grid items
outerOffset: 0, // Optional, the distance to the containers border
itemWidth: 178 // Optional, the width of a grid item
});
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
})(jQuery);
}
}
xmlhttp.open("GET","../home/" + pageName + ".php",true);
xmlhttp.send();
}
}
</script>
<!-- ends ajax script -->
If i understood it right, you need to perform your code also in the: 如果我理解正确,您还需要在以下位置执行代码:
...
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("leftCont").innerHTML=xmlhttp.responseText;
//Here
handler.wookmark()
}
...
If there is error with handler in the upper code, then make variable global: in your code 如果上层代码中有处理程序错误,那么在代码中创建变量global :.
(function ($){
var handler = $('#tiles li');
window.handler = handler
and edit first code in my answer: 并编辑我的答案中的第一个代码:
//Here
window.handler.wookmark()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.