CODEWITHSUNDEEP
jquery
Muiter
Muiter

Reputation: 241

Keep original div open at location.reload()

Is there an way to keep the orginal div open when using location.reload();?

This is my situation: In my page I have an loop what is containig the div. When clciking on it the div is opened:

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>';
}

The div is opened or closed with:

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;
}

The div contains an jQuery popup, when that popup is closed the page is reloaded with:

//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;
});

The problem is when the page is reloaded the div is closed, how can I reload the page with this div opened again or reload only this div (div id="details'.$row['id'].'">)?

Upvotes: 0

Views: 1452

Answers (3)

gen_Eric
gen_Eric

Reputation: 227220

You could save the state of the div (opened or closed) in a cookie. If the cookie exists, then set the div to that state.

More on JavaScript cookies here: http://www.quirksmode.org/js/cookies.html

Also, I suggest you change your AJAX code to use jQuery (you're using it anyway).

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('');
    }
}

Upvotes: 0

justkt
justkt

Reputation: 14766

You can reload just one div with something like:

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

This uses jQuery's .load(), which nicely wraps the .ajax method for the specific case of loading content. The ajax method hides a lot of the browser differences for you.

The trick here is figuring out from the popup that you provide what row caused the popup to appear. Should be possible to use traversal or somehow keep the id to pass as I've shown.

You can also save the state of the div as opened or closed using a cookie. There is a nice jQuery plugin to help with that. You can save the opened or closed state of a div like:

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

And then on load always check

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

Upvotes: 1

nfechner
nfechner

Reputation: 17525

Your problem is, that websites are, by default, stateless. So you need a way to save something over a reload. There are several options:

  • Use a cookie to store the information and read it using JavaScript
  • Store the information about which div you want opened in the URL using a hash tag. For more infos on this look here.

Upvotes: 0

Related Questions