0

I'm extended the Walker_Nav_Menu_Edit class and added some new custom fields based on some jQuery plugins like (wpColorPicker, fonIconPicker, and Select2). I'm called these functions from different js file like below

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

$('.fonticons-iconwpcolorpicker').wpColorPicker();

$(".hpemenu-fonticons-size").TouchSpin({
    min: 12,
    max: 100,
    stepinterval: 50,
    maxboostedstep: 1000,
    postfix: 'px'
});

$(".hpemenu-itemesnum").TouchSpin({
        min: 1,
        max: 100,
        stepinterval: 50,
        maxboostedstep: 1000,
        postfix: 'Items or posts'
});

$(".bsnselect").select2({
    placeholder: "Select ...",
    width: '100%',
    minimumResultsForSearch: Infinity,
    theme: "classic"
});

var hpemenuFontIcons = $('.hpemenu-fonticons').fontIconPicker({
    theme: 'fip-bootstrap'
});
$.ajax( {
    url: hpemenu_ajax_object.fontIconsJsonUrl,
    type: 'GET',
    dataType: 'json'
} )
.done( function( response ) {
    hpemenuFontIcons.setIcons( response );
} );

$('a.item-edit').click(function() {
    var itemId = $(this).closest('li').attr('id');
    var menuItemType = $('#' + itemId + ' .field-menuitem-type input');
    var defaultMenu = $('#' + itemId + ' .bsnavbar-default');
    var advanceMenu = $('#' + itemId + ' .bsnavbar-advance');
    var urlInput = $('#' + itemId + ' .bsn-menuitem-url');
    var bsnAdditionalSection = $('#' + itemId + ' .bsn-menuitem-additional');

    var showHideMenuItem = function() {
        var menuItemValue = $('#' + itemId + ' .field-menuitem-type input:checked').val();
        if (menuItemValue === 'defaultmenu') {
            defaultMenu.add(urlInput).add(bsnAdditionalSection).show();
            advanceMenu.hide();
        } else if (menuItemValue === 'advancemenu') {
            advanceMenu.add(defaultMenu).show();
            urlInput.add(bsnAdditionalSection).hide();
        } else {
            defaultMenu.add(advanceMenu).hide();
        }
    };
    showHideMenuItem();
    menuItemType.on('change', showHideMenuItem);


    var menuItemLayoutCheckboxes = $('#' + itemId + ' .field-menuitemlayouts input');
    var menuItemName = $('#' + itemId + ' .bsn-menuitem-name');
    var fontIconsSection = $('#' + itemId + ' .menuitem-fonticons');

    var menuItemLayoutsFunc = function() {
        var menuItemLayoutChecked = $('#' + itemId + ' .field-menuitemlayouts input:checked').val();
        if ( menuItemLayoutChecked === 'itemwithouticon' ) {
            fontIconsSection.hide();
            menuItemName.show();
        } else if ( menuItemLayoutChecked === 'itemicon' ) {
            menuItemName.hide();
            fontIconsSection.show();
        } else {
            fontIconsSection.add(menuItemName).show();
        }
    };
    menuItemLayoutsFunc();
    menuItemLayoutCheckboxes.on( 'change', menuItemLayoutsFunc);

    var contentType = $('#' + itemId + ' .field-content-type input');
    var uniformBox = $('#' + itemId + ' p.uniform-title, #' + itemId + ' p.field-uniform');
    var uniformSelect = $('#' + itemId + ' p.field-uniform select');
    var customCat = $('#' + itemId + ' p.field-custom-cat');
    var customTag = $('#' + itemId + ' p.field-custom-tag');
    var customCatsTab = $('#' + itemId + ' p.field-custom-cats-tab');
    var customTagsTab = $('#' + itemId + ' p.field-custom-tags-tab');
    var customTagsOfCat = $('#' + itemId + ' p.field-custom-tags-of-cat-tab');
    var gridLayout = $('#' + itemId + ' p.field-items-grid');
    var itemsNumber = $('#' + itemId + ' p.field-items-num');

    var showHideCatTagTab = function() {
        uniformSelect.find('option:selected').each(function() {
            if ($(this).attr('value') === 'custom-cat') {
                customCat.show();
                customTag.add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            } else if ($(this).attr('value') === 'custom-tag') {
                customTag.show();
                customCat.add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            } else if ($(this).attr('value') === 'custom-cats-tab') {
                customCatsTab.show();
                customCat.add(customTag).add(customTagsTab).add(customTagsOfCat).hide();
            } else if ($(this).attr('value') === 'custom-tags-tab') {
                customTagsTab.show();
                customCat.add(customTag).add(customCatsTab).hide();
            } else if ($(this).attr('value') === 'custom-tags-of-cat-tab') {
                customTagsOfCat.show();
                customTag.add(customCat).add(customCatsTab).add(customTagsTab).hide();
            } else {
                customCat.add(customTag).add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            }
            if ($(this).attr('value') === 'contact' || $(this).attr('value') === 'search') {
                itemsNumber.add(gridLayout).hide();
            } else {
                itemsNumber.add(gridLayout).show();
            }
        });
    };
    showHideCatTagTab();
    uniformSelect.on('change', showHideCatTagTab);

    var multipleBox = $('#' + itemId + ' p.multiple-title, #' + itemId + ' p.field-multiple');
    var multipleSelect = $('#' + itemId + ' p.field-multiple select');
    var customCategory = $('#' + itemId + ' p.field-custom-category');
    var customTags = $('#' + itemId + ' p.field-custom-tags');
    var categoryFlag = false;
    var tagFlag = false;
    var itemsFalg = false;

    var showHideCatTag = function() {
        multipleSelect.find('option:selected').each(function() {
            if ($(this).attr('value') === 'custom-category') {
               categoryFlag = true;
            }
            if ($(this).attr('value') === 'custom-tags') {
               tagFlag = true;
            }
        });
        if(categoryFlag && tagFlag) {
            customCategory.add(customTags).show();
            categoryFlag = false;
            tagFlag = false;
        } else if(categoryFlag && !tagFlag) {
            customCategory.show();
            customTags.hide();
            categoryFlag = false;
            tagFlag = false;
        } else if(!categoryFlag && tagFlag) {
            customCategory.hide();
            customTags.show();
            categoryFlag = false;
            tagFlag = false;
        } else {
            customCategory.add(customTags).hide();
            categoryFlag = false;
            tagFlag = false;
        }
    };
    showHideCatTag();
    multipleSelect.on('change', showHideCatTag);

    var showHideUniMul = function() {
        var contentTypeValue = $('#' + itemId + ' .field-content-type input:checked').val();
        if (contentTypeValue === 'uniform') {
            uniformBox.show();
            showHideCatTagTab();
            multipleBox.hide(function() {
                customCategory.add(customTags).hide();
            });
        } else if (contentTypeValue === 'multiple') {
            multipleBox.show();
            showHideCatTag();
            uniformBox.hide(function() {
                customCat.add(customTag).add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            });
        } else {
            uniformBox.add(multipleBox).hide();
        }
    };
    showHideUniMul();
    contentType.on('change', showHideUniMul);

});

});

Then I enqueued this js file over my Wordpress admin area by using admin_enqueue_scripts action.

When I add new menu item from Custom Link panel, these functions not work until I Click on Save Menu button to save menu item, After saving menu item and reload the nav-menus.php all functions work without the problem.

INFO: When I use jQuery functions inside the Walker_Nav_Menu_EditClass (Means not in separate js file) inside <script></script> tag all functions work before saving menu item.

How can I call js file inside the Walker_Nav_Menu_Edit? Or how can I trigger js file codes during adding custom link items before saving menu items?

8
  • @Shibi Sorry I put the itemId and menuItemType outside the click event now I've updated the code. I have more functions and events related to the select2 jquery plugin within my js file, but in my question only I put some codes until my question clear to you. Now only I want my code work during adding items and after saving items. – Shwan Namiq Jun 19 '18 at 20:33
  • @Shibi I used the updated code also the code inside the $('body').on('click', 'a.item-edit', function() {}); only work after the saving menu items and not work during adding menu item – Shwan Namiq Jun 19 '18 at 21:16
  • @ShibiI updated my code and I put all codes in my js file related to my menu items. All codes work perfectly after saving menu items. Only I want the codes to work and functions trigger during adding menu items before saving the items. I know you very tired with my question. Thanks for helping – Shwan Namiq Jun 19 '18 at 21:28
  • I have updated my code and tested its now working the jQuery.on didn't worked well so I changed it to a function thats run when you click. Its working well in all conditions. – Shibi Jun 19 '18 at 21:37
  • This JavaScript. No connection with WordPress. – Max Yudin Jun 19 '18 at 21:37
1

Because this menu items are appended with ajax response you need to run this JS functions again for each item that you add to the menu with the document#menu-item-added event.

Add something like this in your JS file.

$(document).on('menu-item-added', function(event, markup) {
    // debug that the hook work
    console.log(markup);
    $.each(markup, function(index, menuItem) {
        if(menuItem.id) {
            // check menu item html markup
            console.log(menuItem);
            $('#' + menuItem.id).find('.hpemenu-fonticons').fontIconPicker();
            $('#' + menuItem.id).find('.fonticons-iconwpcolorpicker').wpColorPicker();
            $('#' + menuItem.id).find('.bsnselect').select2();
        }
    });
});

Add click event with function to run where you click in the document ready and in after menu item added.

So Your code should look like this:

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

    $('.hpemenu-fonticons').fontIconPicker();
    $('.fonticons-iconwpcolorpicker').wpColorPicker();
    $(".bsnselect").select2();

    // Add click event
    $('a.item-edit').click(some_function);

    $(document).on('menu-item-added', function(event, markup) {
        // debug that the hook work
        console.log(markup);
        $.each(markup, function(index, menuItem) {
            if(menuItem.id) {
                // check menu item html markup
                console.log(menuItem);
                $('#' + menuItem.id).find('.hpemenu-fonticons').fontIconPicker();
                $('#' + menuItem.id).find('.fonticons-iconwpcolorpicker').wpColorPicker();
                $('#' + menuItem.id).find('.bsnselect').select2();

                // Add click event
                $('#' + menuItem.id).find('a.item-edit').click(some_function);
            }
        });
    });

    function some_function() {
        var itemId = $(this).closest('li').attr('id'),
            menuItemType = $('#' + itemId + ' .field-menuitem-type input');

        var showHideMenuItem = function() {
            //Some codes here
        };
        showHideMenuItem();
        menuItemType.on('change', showHideMenuItem);
    }
});
10
  • I used your code but still, the functions not working during add menu items also must Save Menu until working. But I noticed that From Inspect->Network When to add new custom link menu item only admin-ajax.php load. But when click on Save Menu to save items I see the select2.js, fonticonpicker.js, and other plugins load. I think must find the way to load these plugins during adding menu items before click on Save Menu button. – Shwan Namiq Jun 14 '18 at 10:15
  • Why when i use the jQuery codes insode the Walker_Nav_Menu_Edit class all plugin functions work during add items? but when i use them inside the separate the js file not work? – Shwan Namiq Jun 14 '18 at 10:16
  • @ShwanNamiq First you need to load the select2.js and fonticonpicker.js and your custom js file in the admin_enqueue_scripts hook. About the why its because the js is loaded inline and will run when its append to the document. – Shibi Jun 14 '18 at 10:19
  • I've enqueued the plugins by using admin_enqueue_scripts hook action I don't have the problem with this. I think I enqueued all of them correctly because after Save Menu all functions working. – Shwan Namiq Jun 14 '18 at 10:23
  • Thanks so much now every thing it is Ok. I have this problem for more that 8 monthes i asked more than 10 times in more forums i don't get the correct answer after all these attemts i get the correct answer thanks a lot you helped me – Shwan Namiq Jun 14 '18 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.