livequery is not working after WordPress 5.6 + update

65 Views Asked by At

I am using livequery 1.3.6. When I updated WordPress 5.6+ version, it doesn't work. Can you help me to fix the issue. I am using in my javascript function like below code

$('#my-popup').livequery(function() {

    myFunc.load();

    $('#my-popup').closest('#TB_window').addClass('my-shortcodes-popup');

    $('.wp-color-picker-field').wpColorPicker({
        change: function(event, ui) {
            setTimeout(function() {
                myFunc.loadVals();
                myFunc.cLoadVals();
            }, 1);
        }
    });
});

I am using it for visual shortcodes generator

When we click on link from dropdown, it options popup with shortcode options

  1. https://paste.pics/C7VBO
  2. https://paste.pics/C7VCK

It was working perfect with WordPress 5.5 but after update with 5.6 + it doesn't detect livequery and click events inside livequery functions

https://paste.pics/edit/C7VE4

I am using this livequery in below code

jQuery(document).ready(function($) {

  var myFunc = {
    loadVals: function() {
      var shortcode = $('#_my_shortcode').text(),
        uShortcode = shortcode;

      // fill in the gaps eg {{param}}
      $('.my-input').each(function() {
        var input = $(this),
          id = input.attr('id'),
          id = id.replace('my_', ''), // gets rid of the my_ prefix
          re = new RegExp("{{" + id + "}}", "g");
        var value = input.val();
        if (value == null) {
          value = '';
        }

        uShortcode = uShortcode.replace(re, input.val());
      });

      // adds the filled-in shortcode as hidden input
      $('#_my_ushortcode').remove();
      $('#my-sc-form-table').prepend('<div id="_my_ushortcode" class="hidden">' + uShortcode + '</div>');

    },
    cLoadVals: function() {
      var shortcode = $('#_my_cshortcode').text(),
        pShortcode = '';
      shortcodes = '';

      // fill in the gaps eg {{param}}
      $('.child-clone-row').each(function() {
        var row = $(this),
          rShortcode = shortcode;

        $('.my-cinput', this).each(function() {
          var input = $(this),
            id = input.attr('id'),
            id = id.replace('my_', '') // gets rid of the my_ prefix
          re = new RegExp("{{" + id + "}}", "g");
          var value = input.val();
          if (value == null) {
            value = '';
          }

          rShortcode = rShortcode.replace(re, input.val());
        });

        shortcodes = shortcodes + rShortcode + "\n";
      });

      // adds the filled-in shortcode as hidden input
      $('#_my_cshortcodes').remove();
      $('.child-clone-rows').prepend('<div id="_my_cshortcodes" class="hidden">' + shortcodes + '</div>');

      // add to parent shortcode
      this.loadVals();
      pShortcode = $('#_my_ushortcode').text().replace('{{child_shortcode}}', shortcodes);

      // add updated parent shortcode
      $('#_my_ushortcode').remove();
      $('#my-sc-form-table').prepend('<div id="_my_ushortcode" class="hidden">' + pShortcode + '</div>');

    },
    children: function() {
      // assign the cloning plugin
      $('.child-clone-rows').appendo({
        subSelect: '> div.child-clone-row:last-child',
        allowDelete: false,
        focusFirst: false,
        onAdd: function(row) {

          // Get Upload ID
          var prev_upload_id = jQuery(row).prev().find('.my-upload-button').data('upid');
          var new_upload_id = prev_upload_id + 1;
          jQuery(row).find('.my-upload-button').attr('data-upid', new_upload_id);

          // activate color picker
          jQuery('.wp-color-picker-field').wpColorPicker({
            change: function(event, ui) {
              myFunc.loadVals();
              myFunc.cLoadVals();
            }
          });
        }
      });

      //remove button
      $('body').on('click', '.child-clone-row-remove', function() {
        var btn = $(this),
          row = btn.parent();

        if ($('.child-clone-row').size() > 1) {
          row.remove();
        } else {
          alert('You need a minimum of one row');
        }

        return false;
      });


      // assign jUI sortable
      $(".child-clone-rows").sortable({
        placeholder: "sortable-placeholder",
        items: '.child-clone-row',
        cancel: 'div.fonticon, input, select, textarea, a'
      });
    },

    resizeTB: function() {
      var ajaxCont = $('#TB_ajaxContent'),
        tbWindow = $('#TB_window'),
        myPopup = $('#my-popup');

      tbWindow.css({
        height: window.my_thickBoxHeight,
        width: myPopup.outerWidth(),
        marginLeft: -(myPopup.outerWidth() / 2)
      });

      ajaxCont.css({
        paddingTop: 0,
        paddingLeft: 0,
        paddingRight: 0,
        height: window.my_thickBoxHeight,
        overflow: 'auto', // IMPORTANT
        width: myPopup.outerWidth()
      });

      tbWindow.show();
      $('#my-popup').addClass('no_preview');
      $('#my-sc-form-wrap #my-sc-form').height(window.my_shortcodesFormHeight);

    },
    load: function() {
      var myFunc = this,
        popup = $('#my-popup'),
        form = $('#my-sc-form', popup),
        shortcode = $('#_my_shortcode', form).text(),
        popupType = $('#_my_popup', form).text(),
        uShortcode = '';

      // resize TB
      myFunc.resizeTB();
      $(window).resize(function() {
        myFunc.resizeTB()
      });

      // initialise
      myFunc.loadVals();
      myFunc.children();
      myFunc.cLoadVals();

      $('.my-input', form).change(function() {
        myFunc.loadVals();
      }); // update on value change

      // update upload button ID
      jQuery('.my-upload-button:not(:first)').each(function() {
        var prev_upload_id = jQuery(this).data('upid');
        var new_upload_id = prev_upload_id + 1;
        jQuery(this).attr('data-upid', new_upload_id);
      });
    }

  }

  // run
  $('#my-popup').livequery(function() {

    myFunc.load();
    $('#my-popup').closest('#TB_window').addClass('my-shortcodes-popup');

    // activate color picker
    $('.wp-color-picker-field').wpColorPicker({
      change: function(event, ui) {
        setTimeout(function() {
            myFunc.loadVals();
            myFunc.cLoadVals();
          },
          1);
      }
    });
  });

  $('body').on('click', '.my-insert', function() {
    if (window.tinyMCE) {
      window.tinyMCE.activeEditor.execCommand('mceInsertContent', false, $('#_my_ushortcode').html());
      tb_remove();
    }
  });

});
0

There are 0 best solutions below