Martin
Martin

Reputation: 557

Showing error messages using SweetAlert library

Am working on an application whereby am validating on the backecnd (using PHP) and displaying the errors on the frontend,, am passing the errors using AJAX. All is working well except that I need to display the errors in ordered list format using sweet alert js library.

The errors are displaying but the problem is they aint being aligned in an ordered list manner:

Sweet alert Js link

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Ajax code

 $.ajax({
            type: "POST",
            url: "getplans",
            data:JSON.stringify(type),
            contentType: 'application/json',
            dataType: "json",
            success: function(response){
                //Redirect
                window.location.href="getp" ;
            },
            //Alert errors from backend
            error: function(data) {
                //Unblock the spinner
                $.unblockUI();
                var errors = '';
                for(datos in data.responseJSON){
                    errors += data.responseJSON[datos] + '\n';
                }
                //Sweet alert js function
                swal(errors, "warning");
            }
        });

Upvotes: 0

Views: 9811

Answers (2)

Leonardo Lanchas
Leonardo Lanchas

Reputation: 1668

You can just take the nodes inside the ul element like this:

swal("Error:", document.getElementsByTagName('ul')[0].innerText)

and write them as text. Below a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <script type="text/javascript">
        //swal("Error:", document.getElementsByTagName('ul')[0].innerText)

    let array = ['cofee', 'Tea', 'mill'];
    let list = '';
    for (var i = 0; i < array.length; i++)
        list += array[i] + '\n';

    swal("Error", list);
    </script>

</body>
</html>

Upvotes: 2

Mozafar Gholami
Mozafar Gholami

Reputation: 121

you can use content option. take took at SweetAlert example

Upvotes: 0

Related Questions