Question 69552 in Ajax Question posted in
You can find the official documentation here.

Printing a string with spaces with Ajax/JQuery – Jquery ajax

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 class="btn btn-warning" onclick="edit()">Edit</button></td>
                                        <td><button class="btn btn-info" onclick="save()">Save</button></td>
                                        <td><a href="/admin/services/"'+ service.id +'><button class="btn btn-success" name="action"value="Update">Update</button></a></td>
                                    </form>
                                    </tr>'
                            );
                        });
                    },
                    error: function(error) {
                        alert('No Bookings Found')
                    }
                });
            }
        });
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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 class="btn btn-warning" onclick="edit()">Edit</button></td>
    <td><button class="btn btn-info" onclick="save()">Save</button></td>
    <td><a href="/admin/services/' + service.id + '"><button class="btn btn-success" 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 class="btn btn-warning" onclick="edit()">Edit</button></td>
    <td><button class="btn btn-info" onclick="save()">Save</button></td>
    <td><a href="/admin/services/${service.id}"><button class="btn btn-success" 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search