1

I have created an image slider. This slider appears on every page of my website. There's a click event associated with every image in image slider. On clicking any image there are variables which stores data associated with that image(say artist name, etc. and these fields are hidden).

On clicking any image the page is redirected to another page, say artists page. In artists page the stored data are displayed. The image slider is also present in artists page.

Now, the problem is when I come to artists page the variables are not displayed, because the js file in reloaded once again and all data are lost. Javascript file for both the pages are same. Infact, all pages in my website shall use the same js file. But, being in artists page if I click any image then the data are displayed. I want that the data must be retained and displayed even if it gets redirected to artists page.

I have tried ready() event, but no help. How to do it?

P.S. The website is created using Drupal 7

1
  • Try passing the data as parameters to the new page and then assigning it to your javascript variables on page load Commented Mar 17, 2012 at 9:24

3 Answers 3

1

i assume your data is not processed in the server side. JavaScript variable data does NOT persist for every page visit. it's always a fresh start for each page.

you should use cookies for this one. jQuery also has cookies plugin, but i haven't tried that yet (try asking Google). Another method is to use HTML 5 Web storage but note that it is HTML5, pretty new feature.

basically what you want done is:

  1. click item
  2. store data in cookie
  3. go to next page
  4. read the data in cookie
  5. display
1
  • As a guess, I believe the data is being processed on the server side as the author mentioned Drupal 7. The use of hidden form fields also hints to me a Drupal-esque way of passing data..but I guess some clarification from the OP would help
    – badunk
    Commented Mar 17, 2012 at 9:33
0

You can't directly. The Javascript state is is cleared on every page load.

Choices are:

  1. Instead of doing a full page reload, see if you can do something AJAX-y to replace the content
  2. Use session cookies to keep the state
  3. Use HTML 5 Local Storage if the browser supports it
0

There are many ways to achieve this, however, one of the easier ways in your situation may be to simply re-retrieve the data. How is the first page able to retrieve the variables? Are you using Drupal's templating engine to pass them to client? Does it fetch the original javascript data through AJAX?

If the former is true, you may need to modify the template render hooks in Drupal to fetch the data the same way as the first page and pass them into your new page.

If the latter is true, just rerequest the data using jQuery's onReady as you mentioned. You may still need to use a Drupal module to expose the data as a webservice for your jQuery to fetch, or you could just write your own php page/drupal module to grab the data from the database manually with drupal's database abstraction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.