jQuery-UI scripts stop working after .load() in wordpress

Question

I am currently working on a dynamic survey form that would ask a customer what kind of product he wants and then display relevant products from our e-shop. Kind of like searching by parameters, but more personal.

Now I tried doing it by loading each page of form from individual .php files that are meant to replace certain div on my page to avoid having to reload whole page.

I am using, or rather I am TRYING to use jQuery UI widgets, but they stop working when I load the next page using .load('url') function. Console outputs error, at widget initialisation stating $(...).slider is not a function(…)

My individual pages look something like this

<style>
    #some styling relevant for the widgets
</style>
<script>


jQuery( function() {
    $('#back-button').click(function(){
          $('#formular-content').load('/eshop/formular/1.php') //this is how I load the pages
    });
    $('#next-button').click(function(){
          $('#formular-content').load('/eshop/formular/3.php') 
    });
//also these buttons work, so the whole <script> area seems... usable ?

//code copypasted from http://jqueryui.com/slider/#range
    $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 500,
          values: [ 75, 300 ],
          slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
          }
    });

    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
          " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
</script>
    <p>
      <label for="amount">Price range:</label>
      <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    </p>

    <div id="slider-range"></div>
    <a id="back-button" class="ui-button ui-widget ui-corner-all" href="#">back</a>
    <a id="next-button" class="ui-button ui-widget ui-corner-all" href="#">back</a>

The whole thing is inside <div> in page which I load stuff into.

As I said in title, I am doing this in wordpress, so I have jquery and jquery-ui properly enqueued, it actually works on the first page which is identical for testing purposes. Also it is regular wordpress page created in admin panel and I had button and slider functions in functions.js file which is also properly enqueued in theme functions file.

So my question is, how do I make the scripts work after the .load(). I've read something about $.getScript() and thought to load jQuery UI files but I am not entirely sure how to make it work with WP and also if it's not being redundant, loading the same file over and over again. I am fairly new to these internet programming languages... especially to integrating them with WP.

Also if anyone has other ideas how I might do the whole form in different, better/easier way, I am open to any ideas.

Thank you for answers

Answer 1

Thought this was Wordpress related, turns out it's not.

The solution

TL;DR

Add jQuery UI widgets initialization in <script> part of loaded .php document like this

<script>
jQuery(document).ready(function($) {   
   $('.accordion').accordion({
      heightStyle: "content",
      active: false,
      collapsible: true
   });

})
</script>

I didn't use jQuery(document).ready event and there was the problem.

Thanks Guruprasad Rao for your time on TeamViewer :)

Answer 2

$(...).slider is not a function(…) error specifically states that you have written this code before loading reference to the jquery-ui.js file. So whatever script loading you have, put it before writing your plugin initialisation.

For the events to not work on dynamically loaded page through .load below would be the possible cause:

• Your dynamically loaded page's element might not have events attached to it, as in .slider, since it is loaded after the plugin has been initialised.

So, you need to have a callback function after your .load so that you can re-initialise on the newly loaded elements.

Callback function

$('#back-button').click(function(){
     $('#formular-content').load('/eshop/formular/1.php',function(){
          $( "#slider-range" ).slider({
               range: true,
               min: 0,
               max: 500,
               values: [ 75, 300 ],
              slide: function( event, ui ) {
                 $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
              }
          });
          //initialise anything here as in .slider() to the `element` which is loaded through ajax.
     });
});