SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can drop-down box revert selection on back button?

    I have a drop-down box with an onchange that GETs a new page. The back button works fine from the new page back to the old page, but the drop-down box then retains its new value which doesn't correspond to the old page. Can I keep them in sync?

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    not knowing the exact situation...because there's no code...try:
    document.formName.selectName.selectedIndex = 0;

    code really helps...so does the Bordeaux I'm drinking (though not necessarily for you)
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    As I understand it, the OP wants to alter the value of the select when the user presses the back button.
    AFAIK, this is not possible (although would be happy to be proved wrong).

    Quote Originally Posted by Vincent Puglia View Post
    code really helps...so does the Bordeaux I'm drinking (though not necessarily for you)

    It's 7:30 where I am and thus a little early to start drinking (tempting as it might be)

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, let's say I open page1.html and the <select> element displays option1 as being selected. Changing the <select> element to option2 causes page2.html to open. Now if I press the back button and page1.html is opened again, option2 is displayed as being selected in the <select> element which doesn't correlate to page1.html.

    Is there any way to keep the current page and the selected option in the <select> element in sync in this situation?

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    I just had a go at implementing this, but everything I tried resulted in my back button loading the page previous to the page I was working on (and ignoring any AJAX loaded content).

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Browser history</title>
      </head>
      
      <body>
        <select>
          <option>Select a page to load</option>
          <option value="page_1.html">Page 1</option>
          <option value="page_2.html">Page 2</option>
          <option value="page_3.html">Page 3</option>
        </select>
    
        <div id="result"></div>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
          $("select").on("change", function(){
            var page = $(this).val();
            if(page != "Select a page to load"){
              $.get( page, function( data ) {
                $( "#result" ).html( data );
              });
            }
          });
        </script>
      </body>
    </html>
    Therefore, can you post a minimal code sample (similar to above) with which I can reproduce your issue, or link to a page where I can see this problem occurring.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, here are test1.html and test2.html:

    Code:
    <!doctype html>
    <html>
    <head>
            <meta charset="utf-8" />
            <title>Test1</title>
    </head>
    <body>
    <h1>Test1</h1>
    <form name="form">
            <select name="select" onchange="location.href=form.select.options[selectedIndex].value">
                    <option value="/test1.html" selected="selected">Test1</option>
                    <option value="/test2.html">Test2</option>
            </select>
    </form>
    </body>
    </html>
    Code:
    <!doctype html>
    <html>
    <head>
            <meta charset="utf-8" />
            <title>Test2</title>
    </head>
    <body>
    <h1>Test2</h1>
    <form name="form">
            <select name="select" onchange="location.href=form.select.options[selectedIndex].value">
                    <option value="/test1.html">Test1</option>
                    <option value="/test2.html" selected="selected">Test2</option>
            </select>
    </form>
    </body>
    </html>
    You can use the select element to navigate from test1.html to test2.html, but if you then click the back button you are on test1.html and the select element displays "Test2". I'm wondering if they can be kept in sync in this situation.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Oh ok, now I get you

    You confused me with this:

    Quote Originally Posted by tonearm
    I have a drop-down box with an onchange that GETs a new page
    as this has nothing to do with AJAX.

    Anyway, to solve your problem, just set the selected index with JS.
    Also, please get rid of the inline event handlers.
    Like so:

    Code:
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Test1</title>
      </head>
      <body>
        <h1>Test1</h1>
        <form name="form">
          <select name="select" id="mySelect">
            <option value="test1.html">Test1</option>
            <option value="test2.html">Test2</option>
          </select>
        </form>
    
        <script>
          var s = document.getElementById("mySelect");
          s.onchange = function(){
            location.href = this.options[this.selectedIndex].value
          }
          s.selectedIndex = 0;
        </script>
      </body>
    </html>
    Code:
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Test1</title>
      </head>
      <body>
        <h1>Test2</h1>
        <form name="form">
          <select name="select" id="mySelect">
            <option value="test1.html">Test1</option>
            <option value="test2.html">Test2</option>
          </select>
        </form>
    
        <script>
          var s = document.getElementById("mySelect");
          s.onchange = function(){
            location.href = this.options[this.selectedIndex].value
          }
          s.selectedIndex = 1;
        </script>
      </body>
    </html>
    HTH


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •