I am creating dynamic table rows and tds in it. In the last td I need to have anchor tags with onclick event passing some data as json string. It is working fine unless I give space to any value of json string, it converts all remaining data to html attributes after space. I am using JSON.stringify(data) but feels like it didn't convert it to real string. I don't know!

The last td of table rows in html just work fine even if there are spaces in values as keys and values are form data. I am using echo json_encode in onclick function

<a href="#" data-toggle="modal" data-target="a{{$i}}" 
onclick='show_detail_modal(JSON.stringify(<?php echo json_encode($data);?>))' 
<i class="far fa-eye fa-sm"></i>
</a>

var str_data = JSON.stringify(data);
var submit_type_text = $(form).find('button[type=submit]').text();
var tbl_id = main_form_id.replace('tabform', '') 'table';
var last_tr = $('#' tbl_id).children('tbody').children('tr:last');
var last_tr_no_plus_one = parseInt($(last_tr).children('td:first').text()) 1;
var actions = '<a href="#" data-toggle="modal" data-target="a' last_tr_no_plus_one
 '"onclick=show_detail_modal(' str_data ') style="color: inherit;"><i class="far fa-eye fa-sm"></i></a>&nbsp;';
var last_td_of_last_tr = actions;     
var inputs = $(form).find('.input');

var tr_and_tds = '<tr>';
    tr_and_tds  = '<td>' last_tr_no_plus_one '</td>';

    $.each(inputs, function(a, b){
        tr_and_tds  = '<td>' $(b).val() '</td>';                
    });
    
    tr_and_tds  = '<td>';
    tr_and_tds  = last_td_of_last_tr;
    tr_and_tds  = '</td>';
    tr_and_tds  = '</tr>';
    $('#' tbl_id).append(tr_and_tds); 

Notice after the space in New York it converts rest of the data to attributes

CodePudding user response：

Put single quotes around the onclick attribute, since the JSON uses double quotes. Just like you do in the PHP code.

Use template literals to make it easier to substitute variables into strings.

var actions = `<a href="#" data-toggle="modal" data-target="a${last_tr_no_plus_one}" onclick='show_detail_modal(JSON.stringify(${str_data}))' style="color: inherit;"><i class="far fa-eye fa-sm"></i></a>&nbsp;`;

Note that this will not work if str_data contains single quotes.