Tips on integrating alert functionality with ajax form submission

My method of submitting a form involves using ajax, with the following code to confirm the submission and display a message on the same page within HTML:

 $.ajax({
            type: "POST",
            url: "process.php",
            data: {input1:class1b,input2:class2b},
            dataType: "JSON",
            success:  
            function(data) {
             $("#message").html(data);
             $("#message").addClass(" alert-info ");
            },
            error: function(err) {
            $("#message").html(err);
           $("#message").addClass(" alert-danger");

            }
        });

To show an alert message instead of displaying it in HTML, I use the following code:

  $.ajax({
            type: "POST",
            url: "process.php",
            data: {input1:class1b,input2:class2b},
            dataType: "JSON",
            success:  
            function(data) {
            alert(data);
            },
            error: function(err) {
            alert(err);
          
            }
        });

Although both codes work fine, I now want to use a different type of alert using this code:

$("#message").modal({backdrop: "static"}); 

I initially tried adding this code at the top:

<div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Alert</h4>
        </div>
        <div class="modal-body">
          <p>Message.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div> 

However, I'm unsure where to add this code within the ajax code, or how to properly use it to display the received alert message.

$("#message").modal({backdrop: "static"}); 

Answer №1

Feel free to insert the HTML code for the bootstrap modal at any position within your code. Then, simply swap out the alert message with

$("#message").modal('show');

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

After executing the controller function in AngularJS, the loading icon transitions into a status icon

Is it possible to dynamically change an icon in my view based on the status of a controller function? I want the icon to initially display as a spinning wheel to indicate loading and activity while the function is executing. https://i.stack.imgur.com/I ...

Add a hovering effect to images by applying the absolute positioning property

On my React website, I am utilizing Tailwind CSS and I am attempting to showcase an image that has interactive elements. I want certain parts of the image to increase in size slightly when hovered over. My approach to achieving this was to save each part o ...

Retrieve the value of a query string from an ASP.NET MVC controller action within a <script type="text/javascript"> tag

My Asp.net mvc action result is passing a query string with the name "RowTobeHighLighted". My goal is to retrieve the value of this query string from the controller action and use it in a text/javascript script. I attempted using Request.Querystring() in J ...

Making an Ajax request using HTTPS in an HTTP environment

My website currently utilizes both http and https protocols without impacting the content. It incorporates jQuery ajax calls to populate certain sections of the page. However, I have a preference to transition all ajax calls to https protocol. Despite thi ...

Using Selenium Webdriver to initiate the play function of a video by clicking on the control

Is there a way to play the video on this page by clicking the play button? I noticed a 'playpause' control in the JavaScript, but I'm unsure how to activate it. <div id="videoModal" class="reveal-modal expand open" style="display: block ...

Attempting to forward an image in a node-js/express application

I am facing an issue with a broken image link when trying to access it through Express: app.get('/fileThumbnail', function(req, res) { var url = proxiedURL +"?" + querystring.stringify(req.query); logger.info('/fileThumbnail going to url& ...

The conversion from a relative path to an absolute path in Node is producing unexpected results

Hello everyone, I'm facing a problem with the function sendDownload(), specifically with the objPathArray parameter that I am receiving in this format: [{"pathToFile":"./REPORTS/portfolio/onDemand/Portfolio_report_HP_17.08.2021.xlsx","file":"Portfolio ...

Forms for uploading and submitting multiple files

On my single page, I have several file upload forms that are generated in a loop. The issue is that the first file upload control works fine, but the others do not. <div> <form action="/docs/1046/UploadDocument?Id=1046&amp;propertyTypeId ...

Tips for inserting a button under a div when clicked

I am working on a layout where I have several div cards aligned side by side using the display: inline-block property. What I want to achieve is that when I click on a card, a button is added below the respective div. To accomplish this, I tried using jqu ...

Extract JSON Data from Nested Object

I'm currently struggling with parsing JSON data from an object within an object using a Node.js script. Here's the JSON Object: { "Item":{ "job_change_request":"task0020764", "id":"a156fc4e-e8d4-424f-a792-0c8cf8e3ca46", ...

Discover the process of loading one controller from another controller in Angular JS

Is it possible to load an entire controller1 from a different controller2, not just a function? ...

The jQuery global and local ajax events seem to be inactive and not triggering

Take a look at the following link: http://jsfiddle.net/TWiStErRob/s2jSA/. Here, I have tried to set up all possible variations for: success, error, complete ajaxSetup ajaxSuccess, ajaxError, ajaxComplete done, fail, always My observations so far are: S ...

A guide on adding a hyperlink to a table in Node.js using officegen

Currently, I am utilizing a widely-used Node.js library for generating MS Office Word documents. In the officegen module, the code below is used to create a table. When a raw string is provided to the 'val' property inside the table, it generate ...

What causes an error in RSVP Deferred when a promise is invoked multiple times?

What causes an error in RSVP Deferred when the promise is called twice? There appears to be a distinction between deferred.promise.then().finally() and deferred.promise.then(); deferred.promise.finally(). Why is this? RSVP.on('error', functio ...

Unable to locate three.js library

Hey there, I'm currently working on creating the "get started" application from the three.js website. For reference, you can check out their guide at . Here's a snippet of the HTML code I've put together: <!DOCTYPE html> <html lan ...

What is the exact functioning of the Array.push() method in Javascript?

During my online CS class, we covered the topic of how Arrays and memory work. The teacher used C as an example to explain that you cannot add extra elements to a full Array. As someone who started with JavaScript, I found it interesting that in JavaScript ...

What could be the reason my Angular interceptor isn't minified correctly?

I have come across this interceptor in my Angular project: angular.module('dwExceptionHandler', []) .factory('ExceptionInterceptor', ['$q', function ($q) { return function (promise) { return promise.th ...

Upon re-executing PHP following an Ajax request

I am working on a select menu that can submit without reloading the page. Here is how it currently functions: <select id="option" name="option"> <option value="15">15/option> <option value"30">30</option> <option value"90"> ...

The function Joi.validate is not defined at this time

I am currently working on creating a validation function for user input async function validateUserInput(user) { const schema = Joi.object({ password: Joi.string().pattern((new RegExp('^[a-zA-Z0-9]{3,30}$'))), repeat_password: Joi.a ...

mysterious supplier factoryprovider <- factory <- angular js controller

I'm encountering an issue with injecting dependencies from a service to a controller. Despite adding it, I keep receiving the following error: Unknown provider: websiteFactoryProvider <- websiteFactory <- listCtrl My main goal is to display ...