tags:

views:

319

answers:

1

I have the following script which first shows only the first para of the page to a user. When the user clicks on 'Shw More', the rest of the content is displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
     <script language="javascript" type="text/javascript">
         $(function() {
             $("#someDiv p:not(:first)").hide();
             $("#someDiv p:first").after('<a id="show" href="#">Show more</a>');

             $("#show").click(function(evt) {
                 evt.preventDefault();
                 //window.location.reload(true);
                 $(this).hide();

                 $("#someDiv p").show();
             });

         });
</script>
</head>
<body>
<div id="someDiv">
<p>LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
</p>
<p>LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
</p>
<p>LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
</p>

</div>
</body>
</html>

This code above as given by the famous DaveWard works absolutely fine. However I now want to make this code work with this line uncommented

window.location.reload(true);

Can anyone tell me how to achieve the same results when the line above is uncommented. I want a refresh to occur when the user clicks on 'ShowMore'.

Also please note that this jQuery code will be kept in a seperate file and used for multuple pages. The page url is in the format http://www.xyz.com/displaynews?newsid=x

A: 

To achieve what you want, you will have to make a slight change in tactics as when you reload a page your JavaScript will start from scratch (the web is stateless, so reloading a page means losing your state).

$("#show").click(function(evt) {
    evt.preventDefault();
    window.location = window.location + "#showmore";
}

Use this click event to load the same page, but with a flag or query-string that tells you more should be displayed...

if (window.location.indexOf("#showmore") == -1) {
    $("#someDiv p:not(:first)").hide();
    $("#someDiv p:first").after('<a id="show" href="#">Show more</a>');
}

And wrap the hide-code in a check to see if you should hide the text or not.

Sohnee
The code will be in a central js file. How can I handle the flag for multiple pages? Manipulating the QueryString will not be a good idea to do.
lols
You'll have to pass the information as the web is stateless (i.e. one page knows nothing about the next). Alternative options may be to write a cookie to the client, but that's going to get unpredictable. If you just pop a querystring or bookmark on there, you can guarantee it will work.
Sohnee