Browser converting spaces to html attributes of json string

Question

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

The problem starts way sooner. You cannot enclose the value of an attribute in " when the value also uses " (like it is the case in JSON) — Andreas
– Andreas, Commented Sep 23, 2021 at 7:33
"The last td of table rows in html just work fine" - because you use a single qoute ' for the value of the attribute — Andreas
– Andreas, Commented Sep 23, 2021 at 7:34
Don't create the elements by concatenating strings. Use DOM methods like document.createElement and then setAttribute() — Barmar
– Barmar, Commented Sep 23, 2021 at 7:35
@mohsinali actually you are missing to close a tags > bracket . onclick='show_detail_modal(JSON.stringify(<?php echo json_encode($data);?>))'> .. </a> — navnath
– navnath, Commented Sep 23, 2021 at 8:04
that is just by mistake during copy and paste into this site :) — mohsin ali
– mohsin ali, Commented Sep 23, 2021 at 8:08

Barmar · Accepted Answer · 2021-09-23 08:26:03Z

1

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.

edited Sep 23, 2021 at 8:26

answered Sep 23, 2021 at 7:40

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

mohsin ali Over a year ago

Is it bad question or something :(

mohsin ali Over a year ago

ok never mind, any way thank you mate for your help

mohsin ali Over a year ago

sorry barmar I have a problem if you are there

mohsin ali Over a year ago

when it's land at "show_detail_modal()" on click, it shows as json object not a string, how can I have it there as just a normal string

Barmar Over a year ago

Try using show_detail_modal(JSON.stringify(${str_data}))

|

Collectives™ on Stack Overflow

Browser converting spaces to html attributes of json string

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related