Debug School

rakesh kumar
rakesh kumar

Posted on • Updated on

How to get message in table or in html element form after save data(server side processing) in laravel using jquery

Three Way

$("#message").text("Data saved successfully.");

 $('#privatekey').html(' please check your email to get private key to decrypt data in future purpose');

 $('#confirmModal').modal('show');

html = '<div class="alert alert-success">' + data.message +
         '</div>';
  $('#form_result').html(html);
Enter fullscreen mode Exit fullscreen mode

1.To display a message after saving data in Laravel Blade file using jQuery, you can follow these steps:

$("#message").text("Data saved successfully.");
Enter fullscreen mode Exit fullscreen mode

Create a

element in your Blade file where you want to display the message:
<div id="message"></div>

2.In your jQuery code, make an AJAX request to the server to save the data:

$.ajax({
    type: "POST",
    url: "{{ route('save-data') }}",
    data: {
        // data to be saved
    },
    success: function(response) {
        // handle success response
        $("#message").text("Data saved successfully.");
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // handle error response
        $("#message").text("Error saving data.");
    }
});

3.In your Laravel controller, handle the request to save the data and return a response:

public function saveData(Request $request)
{
    // save data
    return response()->json(['success' => true]);
}

Note: In this example, we're returning a JSON response from the controller. You can modify this to return a plain text response or HTML response depending on your use case.

4.Finally, in your Laravel routes file, define a route for saving the data:

Route::post('/save-data', [YourController::class, 'saveData'])->name('save-data');
  <form method="POST" action="{{ route('generate-keys') }}">
    @csrf 
    <span id="privatekey" style="font-weight: bold;"></span>
                                            <div class="row">
                                                          <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="control-label">Token</label>
                                                        <input type="text" name="email_address"  id="email_address" class="form-control" autocomplete="off" required />
                                                    </div>
                                                </div>
                                                </div>

Image description

u can apply condition after ajax success return data after controller

Image description

Image description

Image description

ANOTHER METHOD

<div id="confirmModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header bg-light">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <br>
                                    <span class="modal-title_delete">Confirmation</span>
                                </div>
                                <div class="modal-body">
                                    <h4 class="text-center" style="margin:0; color:red;">Are you sure you want to remove this Assets?</h4>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">OK</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>

Image description

inside script

 $(document).on('click', '.delete', function() {
            id = $(this).attr('id');
            $('#confirmModal').modal('show');
        });

Image description

=======================================================

Image description

in Html

Image description

================================

Image description

=================================

LARAVEL

Image description

IN JQUERY

 success: function(data) {
                console.log("parsed hoga");   
                console.log(data);  
                const parsed = JSON.parse(JSON.stringify({data}));               
                        console.log(parsed);                       
                       // const myValue = parsed.data[token];
                       // console.log(myValue);
                       $.each(data, function(i, link) {  

                            console.log("mera task aata hain");                         

       $('#WebTokenTable tbody').append('<tr><td>' + link.token + '</td><td>' + link.keydate + '</td><td>' + link.keyid + '</td></tr>');

                });




            }

Image description

===========================================================

LARAVEL

Image description

IN JQUERY

 success: function(data) {
                console.log("parsed hoga");   
                console.log(data);  
                const parsed = JSON.parse(JSON.stringify({data})); 
 console.log(parsed.length);
                       console.log("here data");
                        $('#myformModal').modal('hide');  
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            html += "<tr>" +
                                "<td>" + data[i].token + "</td>" +
                                "<td>" + data[i].keydate + "</td>" +
                                "<td>" + data[i].keyid + "</td>" +                               
                                  "</tr>" +
                                "<hr />";
                        }
      $('#WebTokenTable tbody').html(html);    
      $('#WebTokenTable').css('border', '1px solid black');
            $('#WebTokenTable th, #myTable tr').css('border', '1px solid black'); 

Top comments (0)