Modal won't show programmatically

Question

I have a button which shows a modal when clicked.

The button is:

    <button type="button" class="btn btn-primary assignRole" data-toggle="modal" data-target="#assignRole">
        New
    </button>

and the modal is:

 <div class="modal fade" id="assignRole" role="dialog">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Assign New Client Role to Employee</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <form class="form-group">
            </form>
            <div class="modal-footer">
               <button type="button" class="btn btn-warning" data-dismiss="modal">
               <span class='glyphicon glyphicon-remove'></span> Close
               </button>
               <button type="button" class="btn btn-success add-role-to-user" data-dismiss="modal">
               <span class='glyphicon glyphicon-check'></span> Add
               </button>
            </div>
         </div>
      </div>
   </div>
</div>

These work fine when the button is clicked manually but I would like the modal to show on error.

I am using the following code:

error: function(errors){
                setTimeout(function (){
                    $(".assignRole").click();
                    toastr.error('Validation error!', errors.responseJSON.message, {timeOut: 5000});
                }, 500);
        }

Could someone please point out where I am going wrong. I am using coreui admin template and chrome.

score 0 · Answer 1 · answered Mar 16 '19 at 21:09

0

Instead of triggering the click on the button, you can try this approach to show your modal:

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

answered Mar 16 '19 at 21:09

nakov

13,938
12
60
110

Can you open the developer console and share what's the error that you get? – nakov Mar 16 '19 at 21:24
edit:1546 Uncaught ReferenceError: data is not defined at Object.error (edit:1546) at fire (jquery-2.2.4.js:3187) at Object.fireWith [as rejectWith] (jquery-2.2.4.js:3317) at done (jquery-2.2.4.js:8759) at XMLHttpRequest. (jquery-2.2.4.js:9123) – Tim Kariuki Mar 16 '19 at 21:33
this error comes from somewhere else in the code my friend so you need to figure that out first, as that's what blocks the execution on the other part later. – nakov Mar 16 '19 at 21:35
I have sorted the error out and I am now getting "422 (Unprocessable Entity)" in the console. The toast shows though. – Tim Kariuki Mar 16 '19 at 21:55
1

that means that your ajax request is still not correct as the data you are passing is wrong. You can find many answers for the 422 error. But the modal should appear depends on which one you are using, is it the button click or the `modal('show')` call? – nakov Mar 16 '19 at 22:00

score 0 · Answer 2 · answered Mar 16 '19 at 22:39

0

It has finally worked after adding jQuery.noConflict(); before $('#assignRole').modal('show');.

More details here.

answered Mar 16 '19 at 22:39

Tim Kariuki

633
8
17

Modal won't show programmatically

2 Answers2