html – Back Page is not loading with jQuery elements-ThrowExceptions

Exception or error:

I have a html form page(page 1) from where I go to page 2 html page. In page 1 I have fields such as Resolution, on selecting particular resolution populates fields such as frame-width and height(with value) which is loaded using Jquery and is disabled (just to show) Similarly I have cascaded drop-downs. On submission of this form I get the results on the same page. Also I have given option to display the output on new page. But when I get back to the previous page from new page. Jquery Elements are not loaded. Only static elements in form are loaded. Resolution stays but frame width and frame-height is not loaded. Also output on same page is also gone. How can I get to previous page as per my submission made. I am using Django in Back-end.

Index.html

<p><label>Resolution:</label>
        <select id="resol" name="resol" class="ip" autocomplete="off">
            <option disabled selected value> -- select an option -- </option>
            <option value="2K">2K</option>
            <option value="4KDCI">4KDCI</option>
            <option value="4KUHD">4KUHD</option>
            <option value="480p">480p</option>
            <option value="576p">576p</option>
            <option value="720p">720p</option>
            <option value="1080p">1080p</option>
            <option value="CIF">CIF</option>
            <option value="FWVGA">FWVGA</option>
            <option value="HVGA">HVGA</option>
            <option value="QCIF">QCIF</option>
            <option value="QVGA">QVGA</option>
            <option value="VGA">VGA</option>
            <option value="WVGA">WVGA</option>
            <option value="other">other</option>
            <option value="all">All</option>
        </select>
        </p>

Jquery to display

 $('#resol').change(function () {
            var value = $(this).val();
            //history.pushState(null,null,"#resolution");
            if(value=='2K'){
                $('#fw').css('visibility','visible').attr("disabled", "disabled").val(2048);
                $('#fh').css('visibility','visible').attr("disabled", "disabled").val(1080);
            }
            else if(value=='4KDCI'){
                $('#fw').css('visibility','visible').attr("disabled", "disabled").val(4096);
                $('#fh').css('visibility','visible').attr("disabled", "disabled").val(2160);
            }
            else if(value=='4KUHD'){
                $('#fw').css('visibility','visible').attr("disabled", "disabled").val(3840);
                $('#fh').css('visibility','visible').attr("disabled", "disabled").val(2160);
            }

and so on..

new_page.html
//Displays the videos with these resolution in new page..

returning from new-page to Index.html loads the resolution selected but textBox displaying frame-width and frame-height is gone. How to store/dislay those values..

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *