Solved

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

Posted on 2009-04-08
4
1,309 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Is it possible to preview ajax call before submitting to the database? 18 71
Two decimal 5 39
isNaN issue on the Table input text 2 37
Ajax success not firing alert 6 34
I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:   The Exchange of informatio…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

742 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