Printing a string with spaces with Ajax/JQuery-CodePudding

I'm trying to fetch data from the database using ajax. It is working fine. However, I'm not able to print full string with spaces. Only the first word gets printed.

Here's how a sample JSON Response looks like

0:
description: "photographs of the couple before marriage as well as coverage of the wedding and reception"
id: 8
price: 6000
title: "Wedding Shoot"

here's how the ajax looks like

    $(document).ready(function(){
            fetchtask();
            function fetchtask() {
                $.ajax({
                    type: "GET",
                    url: "/admin/home/services",
                    dataType: 'json',
                    success: function(response) {
                        console.log(response.service)
                        $.each(response.service, function(key, service) {
                            $('tbody').append('<tr>\
                                <form action="/admin/services/ ' service.id  ' method="POST">\
                                        @csrf\
                                        <td><label for="service"></label><input readOnly name = "service" id="service" type="text" value= ' service.title  ' readonly></td>\
                                        <td><label for="price"></label><input   readOnly name="price" id="price" type="number" value='  service.price  ' readonly></td>\
                                        <td><label for="description"></label><input  readOnly type="text"  name="description" id="" value='  service.description '></td>\
                                        <td><button  onclick="edit()">Edit</button></td>\
                                        <td><button  onclick="save()">Save</button></td>\
                                        <td><a href="/admin/services/"'  service.id  '><button  name="action"value="Update">Update</button></a></td>\
                                    </form>\
                                    </tr>'
                            );
                        });
                    },
                    error: function(error) {
                        alert('No Bookings Found')
                    }
                });
            }
        });

CodePudding user response：

This is not a good way to do it. You should create a table by nodes, not by strings and then apply the values. Or even prerender it somewhere hidden and show it after the ajax request.

But if you want it that way, you are missing quotes, for example this:

<td><label for="description"></label><input  readOnly type="text"  name="description" id="" value='  service.description '></td>

should be:

<td><label for="description"></label><input  readOnly type="text"  name="description" id="" value="'  service.description '"></td>

etc...

Be aware that you will get syntax error if your response will contain quotes.

CodePudding user response：

The issue is because you need to wrap the attribute values in quotes, so that the spaces are included in the value, and do not delimit each attribute:

$('tbody').append('<tr>\
  <form action="/admin/services/ '   service.id   ' method="POST">\
    @csrf\
    <td><label for="service"></label><input readOnly name="service" id="service" type="text" value="'   service.title   '" readonly></td>\
    <td><label for="price"></label><input readOnly name="price" id="price" type="number" value="'   service.price   '" readonly></td>\
    <td><label for="description"></label><input  readOnly type="text"  name="description" id="" value="'   service.description   '"></td>\
    <td><button  onclick="edit()">Edit</button></td>\
    <td><button  onclick="save()">Save</button></td>\
    <td><a href="/admin/services/'   service.id   '"><button  name="action"value="Update">Update</button></a></td>\
  </form>\
</tr>');

Alternatively you can use a template literal instead of a string to format the HTML you append. This was you can avoid the need to put \ before each line break and remove the concatenation operators:

$('tbody').append(`<tr>
  <form action="/admin/services/${service.id}" method="POST">
    @csrf
    <td><label for="service"></label><input readOnly name="service" id="service" type="text" value="${service.title}" readonly></td>
    <td><label for="price"></label><input readOnly name="price" id="price" type="number" value="${service.price}" readonly></td>
    <td><label for="description"></label><input  readOnly type="text"  name="description" id="" value="${service.description}"></td>
    <td><button  onclick="edit()">Edit</button></td>
    <td><button  onclick="save()">Save</button></td>
    <td><a href="/admin/services/${service.id}"><button  name="action"value="Update">Update</button></a></td>
  </form>
</tr>`);

Finally, note that the HTML you create here is invalid - you cannot place a form element a the child of a tr. In addition the onclick attributes should be removed, use delegated event handlers on dynamic content instead.