jquery .load() same content after refresh

2
votes

I have simple content loader, where I load content of html file into element. That is working fine. But when I load content, then JS in content is not loaded because it is defined in main (index.html) document ready function.

Question:

How to load content where after page refresh it will remain in div?

Note: Prefer JS solution.

HTML:

index.html

<ul id="debug_menu">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li>
</ul>

<div id="zone"></div>

JS:

/* Content loader */
jQuery(document).ready(function() {

    jQuery("#debug_menu li").click(function() {

        $content = jQuery(this).text();
        jQuery('#zone').load('content/' + $content + '.html');

    });

});

//Edit:

jQuery(".dial").knob();

content1.html:

<input value="90" class="dial">

Note: using http://anthonyterrien.com/knob/ plugin

4
javascriptjqueryhtmlcss
After page refresh I think you can't store your content to put in your div anymore. If you use session or cookies, try put your data in Session and when page refresh div can take it out - Vinh
What do you mean by "JS in content is not loaded"? Can you share the content code? - u.k
if JS is present in index than why you have to load????? - rajesh kakawat
@UziKilon I added content1.html to show you what is there. As you see I load .knob() function in it, and it is not loaded when I load() content into div. - Ing. Michal Hudak
@rajeshkakawat see edit. JS .knob() in content1.html is not loaded when I load content into div. - Ing. Michal Hudak

4 Answers

1
votes

try something like this

        jQuery(document).ready(function() {
            jQuery("#debug_menu li").click(function() {
                $content = jQuery(this).text();
                jQuery('#zone').load('content/' + $content + '.html', function() {
                    jQuery(".dial").knob();//initialize new one
                });

            });

        });
        jQuery(".dial").knob();

EDITED CODE

            jQuery(document).ready(function() {
                jQuery("#debug_menu li").click(function() {
                    $content = jQuery(this).text();
                    jQuery('#zone').load('content/' + $content + '.html', function() {
                        initial_loader();//initialize new one
                    });

                });
                initial_loader();
            });
            function initial_loader(){
                jQuery(".dial").knob();
            }
0
votes

When you load content, you should also manipulate the current page URL in a way that does not cause a reload. This basically means changing the hash part (#something). On page load, you only have to check the current hash and load the right content.

You can also use the history API with the same logic, it gives you more options to manipulate any part of the URL without a reload. Browser support is not the best yet though, but you can use history.js as a wrapper.

Advantages: both methods will make your content linkable and make the browser history usable (back, forward buttons will work) other than fixing your reload problem.

0
votes

Not possible. You have to store which div is loaded etc. Solutions where you can store something:

  1. Cookie
  2. Localstorage
  3. Hashtag
0
votes

I use this plugin: https://github.com/AlexChittock/JQuery-Session-Plugin

to store content variable into session.

/* Content loader */
jQuery(document).ready(function() {

    jQuery("#debug_menu li").click(function() {

        $content = jQuery(this).text();
        jQuery.session.set('content', $content);
        jQuery('#zone').load('content/' + $content + '.html',
                function() {
                    initial_loader();
                }
        );

    });

    $s = jQuery.session.get('content');
    jQuery('#zone').load('content/' + $s + '.html',
            function() {
                initial_loader();
            }
    );

});

function initial_loader() {

    jQuery(".dial").knob();

}