Solved

Change URL value when a dropdown index in AJAX update panel selected index changes

Posted on 2009-04-08
4
1,300 Views
Last Modified: 2012-05-06
I want to change the URL in the address bar of the browser when a dropdown index in AJAX update panel selected index changes

I have a page which by default is http://www.example.com/default.aspx

A drop down in an update panel has a series of values.

You can also open it by entering  http://www.example.com/default.aspx?value=2 in the address bar. It will select the value '2' in the dropdown and display the right results in the update panel.

When a user selects a value from the dropdown (let's say they pick value 2), I would like the url to become http://www.example.com/default.aspx?value=2
0
Comment
Question by:Matt_Du
  • 2
  • 2
4 Comments
 
LVL 8

Expert Comment

by:the_crazed
ID: 24105835
the trouble with altering the address bar (using can do this in JavaScript with document.location.href=...) is that is will trigger a page refresh

A solution I came up is to use the hash instsead - altering this does not trigger a page refresh

so your url would be
 http://www.example.com/default.aspx#value=2

you can get this info on the client using document.location.hash (result: value=2) then parse it to get your value, then get the data for this record using AJAX


when you want to change it, simply set document.location.hash again
0
 

Author Comment

by:Matt_Du
ID: 24109455
Using clientside hashes sounds good but I'm a little confused on how to:

"you can get this info on the client using document.location.hash (result: value=2) then parse it to get your value, then get the data for this record using AJAX"


How can I interject my own JS during an ASP UpdatePanel update?
I have a gridview with data tied to a dropdown. Both are in an update panel. Should I map my own JS to get the value of the hash when the selectedindex of the drop down changes, and then more importantly, how do I make sure the server knows what it is and that I can reference it in my codebehind file to pull up the right data?

Thanks!
0
 
LVL 8

Accepted Solution

by:
the_crazed earned 500 total points
ID: 24136338
this is the trouble with .net! too much of the mechanics are hidden, so its not simple to do anything a bit customised.

do you know the id of your dropdown? or is it generated?

if you know the id, then you can do something like:
Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
     //attach your own js to run after the update, and set the hash
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AfterAjaxRequest);
 
     //and add your own js to get the hash when the page first loads
     //say your dd id is "myDropDown"
     var dd = document.getElementById("myDropDown");
     dd.value=requestFromHash("value");
}
 
//called after AJAX request
function AfterAjaxRequest(sender, args)
{
     var dd = document.getElementById("myDropDown");
     document.location.hash = "value=" + dd.value;
}
 
//fn to get value from hash
function requestFromHash(strKey){
    var hash = document.location.hash;
    if(hash){
        //remove the # at the start
        hash = hash.substring(1)
        var arr = hash.split("&");
        for(var i=0; i< arr.length;i++){
            if(arr[i].split("=")[0].toLowerCase()==strKey.toLowerCase())
                return arr[i].split("=")[1];
            
        }
    }
}

Open in new window

0
 

Author Closing Comment

by:Matt_Du
ID: 31568222
Awesome explanation, thank you so much!
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP server side get value 15 46
ajax jquery 3 29
Html value of radio 14 43
converting document.write() to innerHTML 7 43
I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question