pre-select html select option after window.location redirect

问题

I have problem where after the page is redirected, I want the select to have the previously selected option as the selected choice after the page has been redirected.

here I have an onchange for my select which will redirect the user depending on their selection(refresh page basically), however after the page refresh the selected option gets reset and the first option in the list get selected.

    $("#reportTypes").change(function () {
    var reportTypeID = $(this).val();

    var deviceTypeID = $('#hDeviceTypeID').val();

    window.location.href = "http://127.0.0.1:6543/new_device/" + deviceTypeID + "/" + reportTypeID;

    $('#reportTypes').val(reportTypeID);//tried to select the previous option but this doesn't seem to work

});

How can I get my select to display the chosen option without getting reset after the page load?

回答1:

This is your second question regarding the same problem and I have a strong feeling you don't have a clear picture of what happens where and when. I wish I could give you a link to some "how the Web works" intro, but unfortunately I don't know any. No offense, just saying...

Very briefly, in the context of a Pyramid app, things happen in the following order:

Browser sends a request to the server, which is basically a blob of text
Pyramid application receives and parses the request, and finds a view function to invoke to handle the request.
The view function does some useful stuff, for example it queries data from database and returns a Python dictionary, which Pyramid then passes to the template engine (Jinja2 in your case)
Template engine uses a template (a text blob) and the data returned by your view function to generate another text blob, which represents your rendered HTML page. That blob is then sent to the browser, along with HTTP headers etc. Note that for Pyramid there's actually no HTML, DOM, JavaScript variables or anything like that. Like any web application, your Pyramid app is just a program to receive text blobs and generate other text blobs in response.
Browser receives the server response and interprets it - for example, it may decide that this is an HTML page with some inline <script /> tags. The browser then renders the HTML, loads images and stylesheets, executes scripts etc.
The moment you click on a link or change window.location (let's ignore various AJAX scenarios for the moment) - the moment you do that, the browser abandons your current page and sends another HTTP request (see #1 above). It then waits for the server response and render a completely new page which has absolutely no "memory of" the previous page. This is why HTTP is called "stateless protocol".

My point is: the moment you do

window.location.href = "http://127.0.0.1:6543/new_device/" + deviceTypeID + "/" + reportTypeID;

it makes absolutely no sense to do

$('#reportTypes').val(reportTypeID);//tried to select the previous option but this doesn't seem to work

because the current page is going to be abandoned, a new text blob will be sent from the server and rendered as a new web page.

Now, after this theoretical background, you can see that one of the options to solve your problem would be to send some parameter to the server which would tell it "please give me the same page only with this new reportTypeID pre-selected".

It looks like you already have access to deviceTypeID and reportTypeID in your view function. Now you need to pass them to the template and use them to render selected="selected" attribute on the option which should be pre-selected. In pseudocode it would look something like

%for report_type in all_report_types:
    %if report.id == report_type_id:
        <option value="${report_type.id}" selected="selected">${report_type.name}</option>
    %else:
        <option value="${report_type.id}">${report_type.name}</option>
    %endif
%endfor

回答2:

If you are sending the parameters to the same page as GET request parameters and causing a page reload, then you could use JavaScript to parse the url parameters and then set the dropdown to the specified value upon page load.

Taking the function specified by @BrunoLM here for url param parsing: How can I get query string values in JavaScript?

var urlParams = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=');
        if (p.length != 2) continue;
        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

Now we execute this function upon page load to grab the values:

//$(function {}); is a shorthand for $(document).ready(function() {});
$(function() {
    //execute this code to grab the url params
    var urlParams = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'));

    //now we check to see if the parameter was passed and if so, set the dropdown value
    if (urlParams['reportTypeId']) {
        $('#reportTypes').val(urlParams['reportTypeId']);
    }
});

This all assumes that you pass an HTTP GET parameter called reportTypeId like so: "reportTypeId=203"

来源：https://stackoverflow.com/questions/24126242/pre-select-html-select-option-after-window-location-redirect

标签

javascript

jquery

pyramid