1

EDIT I am new to development. So may be I am not getting this simple issue.

This has been marked Duplicate. But I don't think it is. My second Modal lies in a different file. It is not in the same file as the first Modal. So I am not sure how do I refer to the second Modal from the Ajax(jQuery) in the first Model.

ORIGINAL

I have been trying to open a Modal from another Modal. In first Modal I make an Ajax call to verify the code variable. If success I would like Ajax call to redirect the user to the actual signup form. It does redirect but I would like it to open as a Modal not as normal page. Here is Ajax in my first Modal:

$(function() {
    $("#verify").click(function () {
          var code = $("#code").val();
          var csrf = $('input[name="csrfmiddlewaretoken"]').val();
          var link = "{% url 'health:add_doctor' %}"
        $.ajax({
            type: "POST",
            url: '/verify_code/',
            data: {
                'code': code,
                'csrfmiddlewaretoken': csrf
            },
        dataType: 'json',
        success: function (data) {
            alert(link)
            if (data.verified == 1) {
                $(location).attr('href', link);
            }
        }
      });
    });
});

Second Modal code:

<form action="{% url 'health:add_doctor'%}" method="post" accept-charset="utf-8" class="form" role="form">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="title-doc">Add a Doctor</h4>
    </div>
    <div class="modal-body">
        {% csrf_token %}
        <div class="row">
        Fields here
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        <button class="btn btn-success" type="submit">Add</button>
    </div>
</form>

The second Modal opens fine on a button's click another page on. But I am not getting how to do it from a Modal. I tried few answers on SO but it doesn't work in my case.

Can anyone help, please.

Hamid Khan
  • 115
  • 2
  • 12
  • I don't think it is duplicate. I did go through those two links before asking this question. Please see my EDIT – Hamid Khan Feb 23 '18 at 14:35
  • It's a duplicate. Please make an effort the explore and understand the other Q&A. Read the [Bootstrap modal docs](https://getbootstrap.com/docs/4.0/components/modal/#methods) This should be easy to accomplish using `$('myModal2').modal('show')`. [Here's a **working example**](https://www.codeply.com/go/HTDu4jkqSA) – Carol Skelly Feb 23 '18 at 14:56
  • And, if you want to load the 2nd modal content from URL, read this answer: https://stackoverflow.com/a/48934494/171456 – Carol Skelly Feb 23 '18 at 15:00
  • I tried examples on SO and other sites. But It seems they all assume or have two Modals on parent page and then they close one and open another. I can do that. After searching a bit more I am able to load content from url into existing Modal. But it has issues with resizing. I don't want to change css for that. – Hamid Khan Feb 24 '18 at 03:47
  • Here is how my Modals work: 1. A normal page with signup Button opens. 2. On click of that Button Modal1 opens which has field for phone number and code and buttons send and verify code. The Ajax verifies the code. On success of Ajax call on Modal1 one I would like to open/show Modal2 which is in a separate file and also hide/close Modal1. Now I am not able to understand where actually do I put that jQuery which would open Modal2. Because Modal1 will close and that is where the Ajax call is. – Hamid Khan Feb 24 '18 at 03:48
  • Is there no way to just redirect to the Modal2 so that it opens as a Popup and not like a normal page? – Hamid Khan Feb 24 '18 at 03:48
  • No. Both modals need to be in the same page. Although the content/body of the modal can be stored in a separate file/url as shown here: https://www.codeply.com/go/VxvK5PPUcK – Carol Skelly Feb 24 '18 at 14:34

0 Answers0