CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialog
jeff werner
jeff werner

Reputation: 869

how to destroy a bootstrap modal but use again later

I checked around and found other questions but not really answered to what I need. I am using a boot straps and have a modal for a set of forgot password challenge questions. I am able to get the modal to appear and disappear. however my problem is if the window is called a second time the submit button does not work.

on hidden I am clearing out the form values and removing the modal

$('#forgotPassModal').on('hidden', function () {
    $("#forgotPassForm input").each(function () {
        $(this).val(null);
    });
    $('#forgotPassModal').remove();
});

so here is the scenario I am having an issue with

User comes to page and activates the modal, cancels the modal, then activates the modal again. User then fills in the questions and clicks the submit button.

in this scenario the submit button does not activate its click event

here is the click code.

$('#forgotPassSubmit').click(function() {
        var questAnswered = true;
    for (var i = 0; i < $forgotPassQuest.questionId.length; i++){
            var questionId = $forgotPassQuest.questionId[i]['id'];
        if ($('#forgotPass_' + questionId).val() == '' || $('#forgotPass_' + questionId).val() == null){
            questAnswered = false;
        } else {}
    }
    if (questAnswered == true) {
        submitAnswers();
    } else {
        alert('please complete your security questions.');
    }
});

if the user calls the modal and answers the question and hits submit it works if you call the modal, cancel, call it a second time and submit it doesnt work.

What am I missing?

thanks

Jeff

Upvotes: 0

Views: 1424

Answers (1)

Alex Neigher
Alex Neigher

Reputation: 907

(cant comment not enough rep)

I've had this issue before, check to make sure that the popup isnt added to the DOM twice as siblings of one another. Because you have the submit button as an ID, it'll break the page if it's found in the DOM twice.

2 fixes:

First- Wherever you have the popup being built, or opened, add $(popup's class/id).hide(); as the first line of the function. This will make sure that the popup isnt created a second time after not fully being removed the second time.

Second- Rather than assigning an ID to the submit button, try doing it via a class i.e .forgotPassSubmit wherever it appears in the code. This should circumvent the situation in which there are multiple in the DOM for whatever reason, and still allow you to hook into a click action on it

Alex

Upvotes: 1

Related Questions