Radio buttons not retaining selection when user controls are posted back - javascript

I am facing some problems when page is posted back partially. I have some radio buttons based on which I am making tr display="" and display="none" by javascript. After that I am adding rows gridview. The gridview contains empltyTemplate and footer to add new rows. But when I add row in grid view, the user control is posted back and hence all the tr becomes displa="none" which is default when page is loaded. I tried to keep gridview in update panel but it not working. Hierarchy of my controls is as below.
Level-1-Master page--->Level-2-master page--->Level 3-.aspx page--->Level 4-user control--->Level-5 -multiple accordians-->Level-6: 1 user control in each accordian..
code is too long to past here.. I tried to keep update panel inside user control(Level 6) but it was not working. After some googling I found that update pane not works if it is inside accrdian. So I tried to keep all accrdian inside update panel but in that case .aspx page is not posted back but all user controls placed inside accrodian are posted back so the selection is set as they are on default load.
I want all selection to retain when the last level user control is posted back.
The situation is quite complex to understand but this is what the things are..How to solve my problem?

Changes made to the DOM from JavaScript are not retained cross-PostBack; the server has no idea what you've done, and therefore has no way to track it.
To solve this, you either need to have your JS code update state on the server side with a Callback or Ajax call -- or perhaps have it update a hidden input field in the form that reflects the state of your tags, and have the server look there and update the rendered HTML accordingly.

Related

Retain Expanded Gridview on postback

I have a master gridview where each row can be expanded to show a child gridview.
The master grid loads with all children collapsed.
I do the expanding/contracting of the child grids in javascript so its nice an quick when loaded.
The problem I have is that when the page does a post back (e.g. when the user clicks to sort one of the columns) all the child grids get set back to a collapsed state. I want the expanded/collapsed state to be remembered.
The examples I've found so far all seem to do the expanding/collapsing on the server side.
But this seems really clunky and slow.
I'm thinking of trying to pass the expanaded/collapsed state of each row back to the server using a hidden field in each row of the master grid.
This hidden field would be set/cleared by the same JS routine which does the expanding/collapsing.
This seems like a good way to do it to me, but since I can't find any examples online I'm concerned I'm missing something???
Any reason not to do it using a hidden field?
Yes, track state in a hidden field. AJAX control toolkit does this for it's controls. Hidden field is a common approach. I'd highly recommend it, and that is the reason why you are experiencing this, because client mechanisms have no ability to "remember" preferences on postbacks, but hidden fields bridge that gap nicely.

Coming back on a page with the same quicktab and fields expanded (items do not remain expanded)

I have a website with Drupal 7. On one page, we have two quicktabs (using quicktabs module), under each quicktab we have expendable fields. Those fields are expandables thanks to this code:
jQuery(".ideas-content").hide();
jQuery(".ideas-title").click(function () {
jQuery(this).toggleClass('ideas-closed').toggleClass('ideas-open').next(".ideas-content").toggle();
});
The user can click links inside these expandable fields to go to another inside page. When the user goes to the previous page (the page with these expandable fields), quicktabs are back to default and the fields the user previously expanded are not expanded anymore.
How can I do to have the user coming back on the page with the right quicktab and fields expanded? I was thinking to create anchor links but I do not know more.
I googled the issue with no success.
Thank you for any input and help.
If you are able to access the exact HTML of your page, through template.php function overrides, .tpl.php overrides, or by writing the HTML yourself within the page.tpl, you can add IDs and classes around the elements you want, and then since you are using javascript, you can try using a library such as https://github.com/browserstate/history.js in order to get functionality to take the user back to the state they were in -- with open sections -- after going to another page.

Strange Update Panel Issue with Devexpress Controls

I have some strange issue with Update Panel.
I am using Devexpress Controls, JQUERY AJAX in one of my applications. I have used Server side coding + Client side coding aproach i.e. using Jquery, JS and AJAX + Update Panel on some pages where aspxgridview is there.
I am creating a scenario via example situation according to the problem I have faced:
1) There are some ASPxcomboBoxes for e.g.County, State and City.
2) On client Selected index change of Country, I have fetched the data via AJAX and bind the states in State ASPxComboBox using JSON and same for the city combo on client index change of State.
3) On the city combo's index change, I have bound a ASPxGridView with some related data and ASPxGridView and City combo is wrapped in Update Panel as we cannot bind the ASPxGridView via AJAX so to avoid postbacks I have used update panel and its working fine.
4) If user doesn't selects any record from the Grid on submit click then its prompts the user that select any one record and I have kept the validation on server side button's click event.
Now, The problem is after submiting and validation occurs. The State's combos items are repeating for e.g. initial items were : --select--, USA and after validation occurs on submit its showing --select--, USA, --select--, USA.
I have not bind the control on page load event as its binded via client side. The property of EnableSynchronisation is True to synchronise client and server items of aspxComboBox.
When I saw using debugger when I click on submit. I have quick watched State combo on page load event and its items count is 4 as 2 are repeatative items.
The problem is on even first line of page Load event when I Add Watch to it I get the items count as 4 that means items are posted wrongly to the server.
When I remove Update panel, everything works fine.
I don't know why wrong items/ repeatative items are posted on server. Please help.
Solved the Issue.
Wrapped the Update Panel to State Combo.
Actually It was not needed as State Combo need not be refreshed via Server Operations as I have used AJAX to bind it on client.
But Wrapping the Update Panel to it did solved the issue.

Adding dynamic content to Jquery slider

I want to add dynamic contents to the slides of my jquery slider. the dynamic contents are selected by user through select boxes. The problem is when I add dynamic content it is shown in the div of slider but as soon as I click on Next or Prev that content is lost:(
Please tell me how to store that information on the slider page, so that it won't get lost.
Thanks..
I do this sort of thing all the time. Put the slider on a separate page with all its logic (ie reading the the slides etc from a table). Make it entirely self contained. You can either pass some variables from your user selection or set a session variable that controls the dynamic retrieval.
In your main page call this page with JQuery, something like
$(document).ready(function() {
$('#mysliderdiv').load("whateverthepagewiththeslideriscalled");
});
You can put logic on the boxes to change the session variables. If you are using php for example in the onclick you could use AJAX to pass the selection to a php template which will change the session variable. It will of course be invisible to the user.
As the slider page is loaded by AJAX every time a page is loaded it will be correct.
Sounds a bit long winded but I have done this many times and it works fine.

JavaScript iterating through dynamic checkboxes on an aspx page

I have an aspx page that has dynamically created checkboxes. I'm trying to find a way to keep the state of this page (checkboxes that are checked to remain checked) when I hit the navigation button to go to the previous page. The problem is when I go from the previous page back to the page with the checkboxes I lose all of the values. I understand why I lose them but I can't figure out how to retain them. I was thinking about saving the ids of the boxes that are checked in a table but there just have to be a better way. Any help would be appreciated.
If you want to keep the data for a long time, then storing in a table is absolutely the right approach.
If you only need to store them temporarily, then storing the data in a session variable would be a good option.
You could also store the values directly in a cookie, which would give you the option to use either server side code or javascript to set the checkboxes.

Categories

Resources