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). I would guess that happens when handler.wookmark();
is activated. How can I activate this in the ajax window?
我应该提一下,Jquery用于造型的原因(它巧妙地设置了页面内容的样式)。我猜想当handler.wookmark();被激活了。如何在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 -->
2 个解决方案
#1
2
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 -->
#2
0
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()
#1
2
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 -->
#2
0
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()