Solved

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

Posted on 2009-04-08
4
1,276 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Awesome explanation, thank you so much!
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

There is basically two types of AJAX request in mootools. Request  and Request.HTML Request: Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTM…
I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now