WordPress Back-end Javascript Error

4 Views

I’ve created a Custom Admin page on wordpress back-end, and have this basic html structure, 

<ul data-status="available">
    <li class="available">AVAILABLE</li>
    <li class="onleave">ONLEAVE</li>
</ul>

When I use js code below, it works fine

Read More
$('ul').each( function() {
    var status = 'available';
    $(this).find('li.' + status ).addClass('active');
});

While this code below also works (it adds class on element), However it, produces an error 

$('ul').each( function() {
    var status = $(this).data('status');
    $(this).find('li.' + status ).addClass('active');
});

Error on Console

Syntax error, unrecognized expression: li. load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=4.4.1:2

(9 Errors) Cannot read property 'hasClass' of undefined load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,svg-painter,heartbeat,wp-auth-check,thickb…:246

Any clear explanation would be highly appreciated

FULL JS CODE 

( function($) {
    'use strict';
    $(document).ready( function() {

        $('ul').each( function() {
            var status = $(this).attr('name');
            //$(this).find('li.' + status ).addClass('active');
        });      
        $('form').on('click', 'li', function() {
            var currentStatus = $(this).parent().attr('name');
            var id = $(this).parent().attr('id');
            var status = $(this).attr('name');
            var input = '<input id="model-'+id+'" type="hidden" name="'+id+'" value="'+status+'" />'
            if( currentStatus !== status || !currentStatus ) {
                $('form').prepend( input );
            } else {
                $('form').find('#model-'+id).remove();
            } 
            $(this).parent().find('li').removeClass('active');
            $(this).addClass('active');
        });
        $('form').submit( function(e) { 
            e.preventDefault();
            console.log( $( this ).serialize() );
        });
    });
})(jQuery);
Post Views: 4

Related posts

2 comments

  1. A quick (although not very nice solution) would be to check the value/type of status and jump out of the .each() loop if it is not defined:

    $('ul').each( function() {
    var status = $(this).attr('name');
    if (typeof status === "undefined" || !status) {
        return false;
    };
    $(this).find('li.' + status ).addClass('active');
});

    As I mentioned it is generally a bad idea to loop through ALL elements of a type on a page. It would be better to loop through a set of elements with a given class.

  2. Try with this:

    $('ul').each( function() {
    var status = $(this).attr('data-status'); //note: data-status, not status
    $(this).find('li.' + status ).addClass('active');
});

    .data() method is for setting/getting object level data not represented visually in the Dom. You, however, are using attributes, which has a different accessor in jQuery (.attr()).

    See here:
    https://api.jquery.com/data/
    and here
    http://api.jquery.com/attr/

Comments are closed.