Geek Answers Handbook

How to make jQuery click persist event even after sending page back

I have a click handler that expands and collapses the tree view, I need some mechanism in which after post after that the same node that were expanded / collapsed should remain as they are. HTML:

<ul> <li>Africa <ul> <li>Egypt</li> </ul> <ul> <li>SA</li> </ul> </li> <li>Asia <ul> <li>India</li> <li>China</li> <li>Japan</li> </ul> </li> <li>Europe <ul> <li>UK</li> <li>France</li> <li>Germany</li> </ul> </li> <li>America <ul> <li>US</li> <li>Mexico</li> <li>Argentina</li> </ul> </li> </ul>

JQuery

 $(function () { $('li:has(ul)') .click(function () { var that = this; $('li:has(ul)').children().filter(':visible').parent().each(function (x) { if (this != that) toggle(this); }); toggle(this); }) .children().hide(); $('li:not(:has(ul))').css({ cursor: 'default', 'list-style-image': 'none' }); });

Any help is appreciated !!

+4
source share
1 answer

You can try to encode the url after your url just adds # and the fields should be displayed as

 http://stackoverflow.com/questions/5727626#field1;field

or

  http://example.com/your_action#field1;field

after that parse url

 var fields = window.location.href.slice(window.location.href.indexOf('#') + 1).split(';');

and you will have the fields displayed.

Extending and collapsing will have to open the C # url at the end;

EDIT

here's how to do it: Demo

 <ul> <li id='1'>Africa <ul> <li>Egypt</li> </ul> <ul> <li>SA</li> </ul> </li> <li id='2'>Asia <ul> <li>India</li> <li>China</li> <li>Japan</li> </ul> </li> <li id='3'>Europe <ul> <li>UK</li> <li>France</li> <li>Germany</li> </ul> </li> <li id='4'>America <ul> <li>US</li> <li>Mexico</li> <li>Argentina</li> </ul> </li> </ul>

Javascript

 $(function () { $('li:has(ul)') .click(function () { var that = this; $('li:has(ul)').children().filter(':visible').parent().each(function (x) { if (this != that) toggle(this); }); $(this).children().toggle(); if (window.location.href.indexOf('#')>0){ var href = window.location.href.slice(0,window.location.href.indexOf('#')); }else{ var href = window.location.href } var ids ='' $('li:has(ul:visible)').each( function(){ ids=ids+$(this).attr('id')+';' } ); window.location = href +'#'+ids; }) .children().hide(); $('li:not(:has(ul))').css({ cursor: 'default', 'list-style-image': 'none' }); var fields = window.location.href.slice(window.location.href.indexOf('#') + 1).split(';'); for (var i in fields){ $('li#'+i).children().toggle(); } });
+1
source

More articles:


All Articles