What is the quickest way to display data immediately after submitting a form using ajax?

Is there a way to display data instantly after submitting a form via AJAX and saving it through a controller function? I want to be able to view the saved data on the same page without having to refresh it:

<span class=" store_comment_like " data-comment-id="{{ $comment->id }}"  >  </span>
  $(document).ready(function() {
    $('.post-comment').click(function(e){
      e.preventDefault();
      var commentId = $(this).attr('data-comment-id');
      var data= {
        commentId:commentId,
        method:'POST',
      }
      $.ajax({
        url:'/schooldukan/post/comment/'+commentId,
        type: 'POST',
        dataType: "JSON",
        data: data,
        success: function(data) {
          printSuccessMsg(data.success);
          $('#commentonpost2')[0].reset();
        } else {
          printErrorMsg(data.error);
        }
     } 
  
  });

javascriptajaxlaravellaravel-5

Answer №1

It's a simple process. All you have to do is attach your data to an action. Simply use the append() function with your DOM wrapper element.

For instance, if you wish to display saved data after a successful operation, follow this example;

success: function(data) {
 $("#wrapperHtmlTag").append("<span>" + YOUR_DATA + "</span>");
}

Remember, you need a wrapper to attach your data such as;

<html>
<head>
<title>Page title</title>
</head>
<body>
...
...
<div id="wrapperHtmlTag"></div>
...
...
</body>
</html>

By doing this, the div#wrapperHtmlTag will display your data.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on presenting an image retrieved from a database with ajax

I am currently developing a straightforward mobile application that utilizes a database to store various types of content, including images. I have implemented ajax requests to retrieve this information and display it within the app. However, I am encounte ...

javascriptphphtmljsonajax

Utilizing react-query and next.js to pre-fetch initial data and automatically re-fetch when a filter is modified

In my NextJs project, I am attempting to prefetch data using react-query. The initial data should only be updated if the filter is modified. To manage the filter states, I have implemented State Hooks. function JobSearch(props) { const [pageNumber, setPa ...

javascriptreactjsreact-hooksnext.jsreact-query

What is the best way to overlook content-encoding?

I am in need of downloading a file from a device. Sometimes, the file might have an incorrect content-encoding, specifically being encoded as "gzip" when it is not actually compressed in any way. When the file is properly gzipped, retrieving the content u ...

javascriptajaxcontent-encoding

In order to ensure proper alignment, adjust the width of the select element to match the width of the

Is there a way for the select element to adjust its width based on the length of the selected option? I want the default option value's width to be shorter, but once another option is selected, I'd like the select element to resize itself so that ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3html-select

Using jQuery to retrieve the HTML code for links

I am looking for a way to extract HTML links from a specific div without relying on regular expressions. Here is an example scenario: <div>Please review the links provided in the content. For instance, <a href="http://en.wikipedia.org/wiki/Apple ...

javascriptjqueryhyperlink

Ajax is failing to function properly, but I went ahead and uploaded the corrected

HTML: <form action="registerusers.php" method="POST"> <input id= "uname" name="uname" placeholder="username" required> <input id="upassword" name="upassword" type="password" placeholder="password" required> <button id="r ...

phpajaxpdo

Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

While working on my React course project, I encountered an issue with my faux shopping website. The error message that keeps popping up is: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...& ...

javascriptreactjstwitter-bootstrapjsxreactstrap

Enhance Your Three.js Experience: Implementing Dots on Vertices

I am working with a wireframe sphere and looking to add dots to the vertices. Something similar to this image: https://i.sstatic.net/pzNO8.jpg. Below is all of my JavaScript code: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( ...

javascriptthree.js

Creating a personalized grid display

https://i.sstatic.net/tLd7X.png I've been trying to achieve the following output with my code, but so far nothing has worked. Can someone help me identify what I may be doing wrong? I'm new to this, so any guidance would be greatly appreciated. ( ...

javascripthtmlgridview

The connection was denied! Has the Selenium server been launched for Nightwatch on Edge?

I have created a project using vue.js. The project includes a small set of unit tests (jest) and an end-to-end test (night watch). Unfortunately, when attempting to run the end-to-end test using npm I encountered the following error: Error retrieving a ne ...

javascriptseleniumselenium-webdrivernightwatch.jsselenium-server

Tips for utilizing canReuse and routerOnReuse in Angular 2

I've reviewed the information provided in this link, but I'm still unsure about how to effectively utilize it. My requirement is straightforward—I need to update a parameter in the URL without constantly sending API requests, which are current ...

javascriptangular

Are you struggling to get basic HTML and JS code to function properly?

I'm currently working on developing a racing game, and my initial step was to create the car and implement movement functionality. However, I've encountered an issue where nothing is displaying on the canvas - neither the rectangle nor the car it ...

javascriptjqueryhtmlcanvas

Using jQuery, it is possible to automatically generate a new HTML input element and access it within

My issue is: I am facing a problem with a dynamically generated table on my page using ajax-jquery My table consists of 3 <td> elements: 1 for name and 2-3 for checkboxes representing parameters I have set up an event for all input checkboxes to d ...

javascriptjqueryhtmlajaxcheckbox

navigating between html pages using sliding next and previous buttons

I am in the process of developing a multi-page form spread across 4 different pages. I would like to incorporate next and previous buttons to allow users to easily navigate through the form. Although I have tried looking online for solutions, most results ...

javascriptjqueryhtmlcss

JavaScript tool for implementing sorting features on an HTML table

I am facing an issue with my AJAX-loaded table where I need sorting functionality implemented. Despite searching for various JavaScript plugins, none seem to work efficiently due to slow performance or errors. The structure of my HTML table is unique with ...

javascriptjqueryhtmlsorting

Error message received when using HttpPost in asp.net

Every time I try to make an HttpPost request using ASP.NET Web API, I keep getting an error from the AJAX call. This is my controller: public class ContactController : ApiController { [HttpPost] [EnableCors(origins: "http://localhost:52884", he ...

c#asp.netajaxasp.net-web-api

Managing arrayBuffer in hapi.js: A Comprehensive Guide

I am struggling to upload an arrayBuffer to my server and save it to a file. On the client side, I am using axios, and on the server side, I have implemented Hapi js. However, I am facing difficulties in extracting data from the request in the Hapi handler ...

javascriptnode.jshapi.js

Ensure that the submit button triggers the display of results with each click

My project involves two navigation bars, each with its own table displayed upon page load. Additionally, there is a search bar used to display search results in another table. The issue I'm encountering is that when I click the submit button once, th ...

javascriptjqueryhtml

Limit selection choices in select element

Similar Question: Prevent select dropdown from opening in FireFox and Opera In my HTML file, I have a select tag that I want to use to open my own table when clicked. However, the window of the Select tag also opens, which is not desirable. Is there a ...

javascripthtmlselect

Step-by-step guide to showing the contents of every file in a directory on the console using node.js or express

Having trouble retrieving file contents from a folder using Node.js I can successfully retrieve the contents of one file using the read function, but unable to retrieve contents of all files at once. ...

javascriptnode.jsexpress