Master the art of customizing SweetAlert designs!

Can anyone provide guidance on how to style the AJAX response data in SweetAlert? Below is my code and a sample image. Any assistance would be greatly appreciated. Order screenshot

swal({
  title: "Confirm your transaction",
  html:true,
  showSpinner: true,
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Send",
  closeOnConfirm: false
},function () {
  $.ajax({
    type: "post",
    url: remoteUrl,
    data: largeParams,
    success: function (data) { }
  }).done(function (data) {
    swal("Thank you for your order", data, "success");
  }).error(function (data) {
    swal("Oops", "We couldn't connect to the server!", "error");
  });
});

Answer №1

Make sure to utilize the designated css classes when styling the modal content. For detailed guidance, refer to our documentation linked below where you will find a list of all required classes.

For instance:

.swal-title {
  margin: 0px;
  font-size: 25px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
  margin-bottom: 28px;
}

Answer №2

Give this a shot with SweetAlert2:

.done(function (data) {
    swal({
        title: 'Thanks for your purchase',
        type: 'success',
        html: data
    });
});

Quick Tip: The SweetAlert repository appears to be inactive. Check out Sweetalert2 as an alternative. It offers the same functionality as Sweetalert but includes support for HTML in modals and additional customization options such as modal window width, padding, Esc button behavior, and more.

Answer №3

.done(function (info) {
                    sweetAlert({
                        title: 'Your purchase is complete',
                        type: 'success',
                        html: true,
                        content: info
                    });
                })

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

Using JavaScript to display a live data table on a website sourced from Firebase

I am trying to generate a table with data from Google Firebase in JavaScript, but for some reason the table is not being displayed. Below is the code I am using: <a href="#usertable" onclick="openLink(event,'usertable');tab1();" class="tabl ...

componentWillReceiveProps with excessive conditional statements

Having recently ventured into React development, I've already worked on 3 major projects utilizing React+Redux. However, I've noticed a recurring pattern that I find quite displeasing: componentWillReceiveProps(nextProps) { if (nextProps.par ...

Modifying the color of drawings on a Javascript canvas

I am currently working on developing a drawing board using HTML and JavaScript (Node.js on the server side). One challenge I'm facing is implementing a color picker that allows users to change the paint color dynamically. While I could hard code the c ...

Next.js throwing an error: TypeError - attempting to read property 'map' of undefined

I am facing an issue with my Next Js project. I have implemented the backend logic to display data, but when I attempt to show all the data using the useEffect hook and the map function, I encounter the following error: TypeError: Cannot read property &apo ...

Toggle the visibility of various divs by clicking on them

I'm trying to find a way to display/hide 3 links, each pointing to a different version of a document. Currently, I have a <div id="defaultTemplate"> as the default, with <div id="Option2" class="hidden"> and <div id="Option3" class="hid ...

Remove padding in Twitter Bootstrap table cells

One of my current projects requires making a button that fills the entire width and height of the TD element. I have attempted setting the normal .btn-warning with -Xpx!important, but it did not produce the desired result. Here is what I currently have: ...

Problem with Bootstrap 4 grid specifically occurring in Safari browser

After creating a website using Bootstrap 4, I encountered an issue where every column in a row starts on a new line instead of wrapping to the previous one when the number of columns is equal to 12. This problem seems similar to flexbug#11, and attempts to ...

Is there a way to load a CI controller function in view without having to refresh the page

Whenever I want to view a specific league, I need to retrieve the seasons associated with that league from the database. This is the code I attempted to use: test.php view <script type="text/javascript"> $(document).ready(function () { ...

tips for extracting data from a javascript chart without an internet connection

Recently, I've been exploring a website that contains a fascinating javascript chart displaying a simple time series. When hovering over the data points on the chart, a popup window reveals the exact value of each point. While I am aware of methods t ...

Performing a JavaScript Axios POST request following a series of iterations using a while loop with

Just getting started with async/await and feeling a bit lost. I'm trying to figure out how to send an axios post request after a while loop finishes. Is there a way to wrap the while loop in an async function and await for it? Here's the code s ...

The constant reloading of the page is hindering the crucial display of the data

After successfully getting something to work, I noticed that the data disappears when the page refreshes. How can I prevent this from happening? <html> <head> <meta charset="utf-8"> <title> IT Services </ti ...

Accessing several values in Angular by clicking

I have a dropdown that contains an input field and two more dropdowns. I am looking for a way to retrieve the values of all three fields when the search button is clicked. Screenshot https://i.sstatic.net/5Imaq.png Code HTML <nz-dropdown-menu #menu=&q ...

The image source is not functioning properly to display the image, even though it is working perfectly on

I'm currently attempting to retrieve an image from Instagram. Everything seems to be in order with the image link on Instagram. However, when I try to use it within an img tag, it fails to fetch. One thing worth noting is that this particular image d ...

Authentication for file uploads in Angular 2 using Dropzone and passportjs

I am currently working on implementing authentication for an admin user using Express, Passport, and MySQL in a specific page. The authentication process works fine, but I am facing an issue with verifying whether the user is logged in while uploading file ...

The issue of ExpressionChangedAfterItHasBeenCheckedError is a common problem faced by Angular

I have implemented a component loading and an interceptor to handle all requests in my application. The loading component is displayed on the screen until the request is completed. However, I am encountering an error whenever the component inside my router ...

Unlock the Potential: Leverage Kendo Grid jQuery's Brilliant Feature - Reveal Hidden Column

Presently, the grouped columns are concealed using the attributes of the k-group-indicator element field. $("div.k-group-indicator").each(function (i, v) { grid.hideColumn($(v).data("field")); }); However, I am now faced with the task of making th ...

Is there a way to turn off the auto-complete feature for JavaScript keywords in HTML within JSX in WebStorm?

While using WebStorm, I've noticed that it automatically completes JavaScript keywords as I type regular text in JSX. This behavior is starting to frustrate me because I have to constantly press ESC or click elsewhere to hide the auto-complete popup. ...

Customize Vue.js: Disable Attribute Quote Removal for Individual Pages

We have a requirement to turn off the minify.removeAttributeQuotes property for certain pages. This is the content of my vue.config.js: const packageJson = require('./package.json') module.exports = { assetsDir: packageJson.name + &apos ...

Determine the Height of the Container once the Font File has Finished Loading

When styling a website with a unique font using @font-face, the browser must download the font file before it can display the text correctly, similar to how it downloads CSS and JavaScript files. This poses an issue in Chrome (v16.0.912.63) and Safari (v5 ...

Issue with file upload using Ajax FormData [JQuery] [PHP]

I've been encountering an issue with my upload form - every time I submit it, the PHP file runs but my $_FILES variable ends up empty. I've been spending hours trying to troubleshoot this problem, and despite scouring through numerous posts on th ...