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

Guruprasad J Rao · Accepted Answer · 2016-11-30 12:03:37Z

0

$(...).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.
     });
});

answered Nov 30, 2016 at 12:03

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Budbreaker Over a year ago

Thank you for your answer. I am not using any plugin, I am using enqueued functions.js to initialize those widgets, which work on the first page, then I load next page and they don't work anymore. I tried your code, but it's still the same. When the second page loads, console outputs $(...).slider is not a function(…)

Guruprasad J Rao Over a year ago

Can you show the order of scripts your are loading or anyway where you can show full code?

Budbreaker Over a year ago

in theme's function.php I enqueue functions.js, jquery, jquery-ui-core, and all jquery-ui-___ widgets, then in functions.js I call $( "#slider-range" ).slider() and $('#back-button').click() on (jQuery(document).ready(

Guruprasad J Rao Over a year ago

The order of the js files matter. What order you are having?

Budbreaker Over a year ago

But as I was saying, on the landing page the slider works no problem. I tried accordion too. And on the second page it's just text all over the page, no accordion + $(...).accordion is not a function(…)

|

Community · Accepted Answer · 2017-05-23 11:52:58Z

0

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 :)

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Dec 1, 2016 at 7:37

Budbreaker

356 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related