Uncaught TypeError: Cannot read property 'split' of undefined(…)

Question

I get Uncaught TypeError: Cannot read property 'split' of undefined(…)

here is my jquery code:

( function( $ ) {
    "use strict";

    $('.tk-input').on('change', function(e){
    var $umargin = $(this).parent();
    var temp = '';
    $umargin.find('.tk-input').each(function(input_index, input){
        var margin_property = $(input).attr('data-property');
        var input_value = $(input).val();
        if(input_value != '')
        {
            if(input_value.match(/^[0-9]+$/))
                input_value += 'px';
            temp += 'margin-'+margin_property+':'+input_value+';';

        }
    });
    $umargin.find('.tk-margin-value').val(temp);
});
$('.tk-margin-values').each(function(index, element){
    var $umargin = $(this);
    var tk_margin_value = $umargin.find('.tk-margin-value').val();
    console.log( $umargin.find('.tk-margin-value').val() );
    if(tk_margin_value != '')
    {

        var vals = tk_margin_value.split(';');

        $.each(vals, function(i,vl){
            if(vl != '')
            {
                var splitval = vl.split(':');
                var margin_value = splitval[1];
                var param = splitval[0].split('-');
                var margin_property = param[1];
                $umargin.find('.tk-input').each(function(input_index, input){
                    var input_margin_property = $(input).attr('data-property');
                    if(margin_property == input_margin_property)
                        $(input).val(margin_value);
                });
            }
        })
    }
});

} )( jQuery );

Here is my HTML code

<div class="tk-margin-values">
                    <input name="tk_margin_top" data-property="top" class="value-margin-top tk-input '. esc_attr( $settings['param_name'] ) .' '. esc_attr( $settings['type'] ) .'_field" type="text" value="' . esc_attr( $top_val ) . '">
                <input name="tk_margin_right" data-property="right" class="tk-value-margin-right tk-input '. esc_attr( $settings['param_name'] ) .' '. esc_attr( $settings['type'] ) .'_field" type="text" value="' . esc_attr( $right_val ). '">

                <input name="tk_margin_bottom" data-property="bottom" class="tk-value-margin-bottom tk-input '. esc_attr( $settings['param_name'] ) .' '. esc_attr( $settings['type'] ).'_field" type="text" value="'. esc_attr( $bottom_val ).'">

                <input name="tk_margin_left" data-property="left" class="tk-value-margin-left tk-input '. esc_attr( $settings['param_name'] ) .' '. esc_attr( $settings['type'] ).'_field" type="text" value="' . esc_attr( $left_val ). '">';

    //$pieces = array( $margin_property, $top_val, $right_val, $bottom_val, $left_val );
    //$values   = implode( '||', $pieces );
    <input type="text" name="'. esc_attr( $settings['param_name'] ) .'" class="tk-margin-value wpb_vc_param_value wpb-input '. esc_attr( $settings['param_name'] ).' '. esc_attr( $settings['type'] ) .'_field" value="'. esc_attr( $value ) .'" '. $dependency .' />';     

    </div>

$value is saved value in database, currently 'margin-top:10px;margin-right:10px;' saved in $value variable.

I can't understand why $umargin.find('.tk-margin-value').val() is why undefined in console log and why get this error "Uncaught TypeError: Cannot read property 'split' of undefined(…)"

It's possible that the value of $(this) is misleading you. Have you checked the value of $(this) in your event handler? It may not be the element you think it is because of event bubbling. Does it return the value you're expecting? — Hendeca, Dec 03 '16 at 01:18
@Hendeca console.log($(this)) // result > [div.tk-margin-values context: div.tk-margin-values selector: ""] [div.tk-margin-values context: div.tk-margin-values selector: ""] — Nand Lal, Dec 03 '16 at 09:01
@Hendeca yes, you are right I found 2 blocks. I have one more class .tk-margin-value, just renamed. — Nand Lal, Dec 03 '16 at 09:27

Vel · Answer 1 · 2016-12-03T09:18:31.510

updated

Its working now

or you can check if ($('.tk-margin-values').length)) length like below

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

            $('.tk-input').on('change', function(e){
            var $umargin = $(this).parent();
            var temp = '';
            $umargin.find('.tk-input').each(function(input_index, input){
                var margin_property = $(input).attr('data-property');
                var input_value = $(input).val();
                if(input_value != '')
                {
                    if(input_value.match(/^[0-9]+$/))
                        input_value += 'px';
                    temp += 'margin-'+margin_property+':'+input_value+';';

                }
            });
            $umargin.find('.tk-margin-value').val(temp);
        });

        if ($('.tk-margin-values').length) {
            $('.tk-margin-values').each(function(index, element){
                var $umargin = $(this);
                var tk_margin_value = $umargin.find('.tk-margin-value').val();
                console.log( $umargin.find('.tk-margin-value').val() );
                if(tk_margin_value != '')
                {

                    var vals = tk_margin_value.split(';');

                    $.each(vals, function(i,vl){
                        if(vl != '')
                        {
                            var splitval = vl.split(':');
                            var margin_value = splitval[1];
                            var param = splitval[0].split('-');
                            var margin_property = param[1];
                            $umargin.find('.tk-input').each(function(input_index, input){
                                var input_margin_property = $(input).attr('data-property');
                                if(margin_property == input_margin_property)
                                    $(input).val(margin_value);
                            });
                        }
                    })
                }
            });
        }
        } );

working fiddle fiddle link

By mistake $html not removed, all html block is printed. $html is not issue. I got same error using this if ($('.tk-margin-values').length) — Nand Lal, Dec 03 '16 at 08:49
check this fiddle. Its working now https://jsfiddle.net/gnanavelr/70vwp8Lp/ — Vel, Dec 03 '16 at 09:11
After debugging event handler `$this` I found `$this` fetch another `.tk-margin-class` in html file. I renamed class name, now its working. — Nand Lal, Dec 03 '16 at 09:25

Uncaught TypeError: Cannot read property 'split' of undefined(…)

1 Answers1