保持原始div在location.reload()处打开

时间:2011-03-30 19:10:33

标签: jquery

有没有办法在使用location.reload();?

时保持原始div打开

这是我的情况: 在我的页面中,我有一个包含div的循环。当克服它时,div打开了:

while ($row = mysql_fetch_array($res))
{
    echo '<tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);" onclick="setHighlighted(this),showDetails('.$row['id'].');">
    <td></td>
    </tr>
    <tr>
    <td> <div id="details'.$row['id'].'"></div> </td>
    </tr>';
}

使用以下命令打开或关闭div

function showDetails(str)
{
if(document.getElementById("details"+str).innerHTML=="") //if empty proceed to show details
{

xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="includes/js/ajax_details_adres.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);

divnumber=str;

}
else
{
document.getElementById("details"+str).innerHTML=""; //if NOT empty, clear the details from div
}

}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("details"+divnumber).innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
return null;
}

div包含一个jQuery弹出窗口,当该弹出窗口关闭时,页面将重新加载:

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
        location.reload(); // reload page
    });
    return false;
});

问题是当页面重新加载div关闭时,如何重新打开此div再次打开页面或仅重新加载此div(div id =“details'。$ row ['id']。'” &GT;?)

3 个答案:

答案 0 :(得分:1)

您可以使用以下内容重新加载一个div:

$("#details" + id).load("/path/to/serverside/script/to/provide/div/contents");

这使用了jQuery的.load(),它很好地包装了加载内容的特定情况的.ajax方法。 ajax方法为您隐藏了很多浏览器差异。

这里的诀窍是从弹出窗口中找出你提供了哪一行导致弹出窗口出现。应该可以使用traversal或以某种方式保持id传递,如我所示。

您还可以使用cookie将div的状态保存为已打开或已关闭。有一个很好的jQuery plugin来帮助解决这个问题。您可以保存div的打开或关闭状态,如:

$.cookie('0_opened', 'true');

然后在加载时始终检查

for(var id = 0; id < numIDsOnPage; id++) {
   var opened = $.cookie(id + '_opened');
   if(opened) {
       // open div
   } else {
       // close div
   }
}

答案 1 :(得分:0)

您可以在Cookie中保存div(已打开或已关闭)的状态。如果cookie存在,则将div设置为该状态。

有关JavaScript Cookie的更多信息,请访问:http://www.quirksmode.org/js/cookies.html

另外,我建议您更改AJAX代码以使用jQuery(无论如何都要使用它)。

function showDetails(str)
    if($('#details'+str).html() == ''){
        $('#details'+str).load('includes/js/ajax_details_adres.php',
           'q='+str+'&sid='+Math.random(),
           function(){
             // HTML loaded
           }
        );
    }
    else{
         $('#details'+str).html('');
    }
}

答案 2 :(得分:0)

您的问题是,默认情况下,网站是无国籍的。所以你需要一种方法来重新加载一些东西。有几种选择:

  • 使用Cookie存储信息并使用JavaScript阅读
  • 使用哈希标记存储有关您要在URL中打开哪个div的信息。有关此外观的更多信息here