javascript - After open bootstrap modal and close i can't reopen again why?

I open bootstrap modal and close it without any issue

when I try to reopen again for second time after closing it

it not open so how to fix issue

so how to solve this issue

I can open bootstrap modal for display data and can close it without any issue

but when try to reopen again it not accept and not open bootstrap modal

<button id="BtnAddDisplay" class="btn custom-button col-12" type="button" onclick="INSERT_REQUEST_DEGREE_EQUATION_MODAL(); return false;">
        ارسال الى جهه جديده
    </button>
<div class="modal fade" id="INSERT_REQUEST_DEGREE_EQUATIONModal" tabindex="-1" aria-labelledby="INSERT_REQUEST_DEGREE_EQUATIONModalLabel" aria-hidden="true">
  <div class="modal-dialog custom-modal-dialog">
    <div class="modal-content">
      <div class="modal-header btn-dark text-center w-100">
        <h5 class="modal-title text-white w-100" id="INSERT_REQUEST_DEGREE_EQUATIONModalLabel">اضافه جهه جديده</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
               <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="card-subtitle line-on-side text-muted text-center font-small-4 pt-1">دراسة مواد للشهادة ذاتها بجامعات أخرى</h6>
                            </div>
                            <div class="card-body">
          
                                <div id="dvTransfersInputs" class="row transfers">
                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="control-label">
                                                <asp:Literal Text="<%$ Resources:Resource1, P_COUNTRY_ID %>" runat="server" />
                                            </label>
                                              <asp:DropDownList ID='ddlP_COUNTRY_ID_equation' runat='server' 
                                    CssClass='chosen-select chosen-rtl form-control' 
                                    data-placeholder="<%$ Resources:Resource1, ddl-placeholder %>" 
                                    ClientIDMode='Static' 
                                    onchange="handleDropdownChange_country(this)">
                                    <asp:ListItem Value="" Text="" Selected="True"></asp:ListItem>
                                </asp:DropDownList>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="control-label">
                                                <asp:Literal Text="<%$ Resources:Resource1, P_UNIVERSITY_ID %>" runat="server" />
                                            </label>
                                            <asp:DropDownList ID='ddlP_UNIVERSITY_ID_equation' runat='server' CssClass='chosen-select chosen-rtl form-control' data-placeholder="<%$ Resources:Resource1, ddl-placeholder %>" ClientIDMode='Static'  onchange="handleDropdownChange_university(this)">
                                                <asp:ListItem Value="" Text="" Selected="True"></asp:ListItem>
                                            </asp:DropDownList>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="control-label">
                                                <asp:Literal Text="<%$ Resources:Resource1, P_OFFICE_ID %>" runat="server" />
                                            </label>
                                            <asp:DropDownList ID='ddlP_OFFICE_ID_equation' runat='server' CssClass='chosen-select chosen-rtl form-control' data-placeholder="<%$ Resources:Resource1, ddl-placeholder %>" ClientIDMode='Static' onchange="handleDropdownChange_office(this)">
                                                <asp:ListItem Value="" Text="" Selected="True"></asp:ListItem>
                                            </asp:DropDownList>
                                        </div>
                                    </div>
                          
                                </div>
                            </div>
                 
                        </div>

                    </div>
                </div>
      </div>
      <div class="modal-footer justify-content-center">
       <button type="button" onclick="INSERT_UPD_E_TRANS_REQUEST_DEGREE_EQUATION_TRANSFARED()" class="btn btn-success">اضافه</button>
       <button type="button" class="btn btn-danger" data-dismiss="modal">الغاء</button>
      </div>
    </div>
  </div>
</div>
i open it using 
function INSERT_REQUEST_DEGREE_EQUATION_MODAL() {
    debugger;
    //$('.chosen-select').chosen({
    //    no_results_text: "No results matched",
    //    width: "100%"
    //});
    // check values of country
    $('#ddlP_OFFICE_ID_equation').val('').trigger('chosen:updated');
    $('#ddlP_UNIVERSITY_ID_equation').val('').trigger('chosen:updated');
    $('#ddlP_COUNTRY_ID_equation').val('').trigger('chosen:updated');
    var hiddenCountryValue = $('#HiddenCountry').val();
    var countries = JSON.parse(hiddenCountryValue);

    // Clear the dropdown and add a default empty option
    var $ddlCountry = $('#ddlP_COUNTRY_ID_equation');
    $ddlCountry.empty();
    $ddlCountry.append($('<option>', {
        value: '',
        text: 'اختر من القائمه'
    }));

    // Populate the dropdown with the JSON data
    $.each(countries, function (index, country) {
        $ddlCountry.append($('<option>', {
            value: country.COUNTRY_ID,
            text: country.COUNTRY_NAME
        }));
    });

    // Set the selected index to 0 (default option)
    $ddlCountry.prop('selectedIndex', 0);

    // Trigger the chosen update if you are using the chosen plugin
    $ddlCountry.trigger('chosen:updated');

    //========== Check university
    // Get the JSON data from the hidden field for Universities
    var hiddenUniversityValue = $('#HiddenUniversity').val();
    var universities = JSON.parse(hiddenUniversityValue);

    // Clear the University dropdown and add a default empty option
    var $ddlUniversity = $('#ddlP_UNIVERSITY_ID_equation');
    $ddlUniversity.empty();
    $ddlUniversity.append($('<option>', {
        value: '',
        text: 'اختر من القائمه'
    }));

    // Populate the University dropdown with the JSON data
    $.each(universities, function (index, university) {
        $ddlUniversity.append($('<option>', {
            value: university.UNIVERSITY_ID,
            text: university.UNIVERSITY_DESC
        }));
    });

    // Set the selected index to 0 (default option)
    $ddlUniversity.prop('selectedIndex', 0);

    // Trigger the chosen update for University dropdown
    $ddlUniversity.trigger('chosen:updated');

    //=========== Check office
    var hiddenOfficeValue = $('#HiddenOffice').val();
    var offices = JSON.parse(hiddenOfficeValue);

    // Clear the Office dropdown and add a default empty option
    var $ddlOffice = $('#ddlP_OFFICE_ID_equation');
    $ddlOffice.empty();
    $ddlOffice.append($('<option>', {
        value: '',
        text: 'اختر من القائمه'
    }));

    // Populate the Office dropdown with the JSON data
    $.each(offices, function (index, office) {
        $ddlOffice.append($('<option>', {
            value: office.OFFICE_ID,
            text: office.OFFICE_NAME
        }));
    });

    // Set the selected index to 0 (default option)
    $ddlOffice.prop('selectedIndex', 0);

    // Trigger the chosen update for Office dropdown
    $ddlOffice.trigger('chosen:updated');

    //============
    $('#INSERT_REQUEST_DEGREE_EQUATIONModal').find('input:text, select').val('').trigger('chosen:updated');

    // Optionally, if you are using other plugins or components, reset their states here

    // Show the modal
    $('#INSERT_REQUEST_DEGREE_EQUATIONModal').modal('show').on('hidden.bs.modal', function () {
        // Perform any clean-up if necessary when the modal is hidden
        // Reset dropdowns or other inputs here if needed
        populateDropdown($('#ddlP_COUNTRY_ID_equation'), countries, 'اختر من القائمه');
        populateDropdown($('#ddlP_UNIVERSITY_ID_equation'), universities, 'اختر من القائمه');
        populateDropdown($('#ddlP_OFFICE_ID_equation'), offices, 'اختر من القائمه');
    });
    //if ($.fn.chosen) {
    //    $ddlCountry.chosen('destroy'); // Destroy previous instance if any
    //    $ddlCountry.chosen({
    //        // Custom Chosen Options if required
    //        'width': '100%', // adjust as needed
    //        'no_results_text': 'لا توجد نتائج' // Example
    //    });

    //    $ddlUniversity.chosen('destroy'); // Destroy previous instance if any
    //    $ddlUniversity.chosen({
    //        // Custom Chosen Options if required
    //        'width': '100%', // adjust as needed
    //        'no_results_text': 'لا توجد نتائج' // Example
    //    });

    //    $ddlOffice.chosen('destroy'); // Destroy previous instance if any
    //    $ddlOffice.chosen({
    //        // Custom Chosen Options if required
    //        'width': '100%', // adjust as needed
    //        'no_results_text': 'لا توجد نتائج' // Example
    //    });
    //}
/*    $('#INSERT_REQUEST_DEGREE_EQUATIONModal').modal('hide');*/

    // Reset input fields (optional, since they'll be reset when hidden)
    //$('#ddlP_OFFICE_ID').val('').trigger('chosen:updated');
    //$('#ddlP_UNIVERSITY_ID').val('').trigger('chosen:updated');
    //$('#ddlP_COUNTRY_ID').val('').trigger('chosen:updated');
    //$('#INSERT_REQUEST_DEGREE_EQUATIONModal').modal('show');
    return false; 
}
and i close it using 
         $('#INSERT_REQUEST_DEGREE_EQUATIONModal').modal('hide');

I open bootstrap modal and close it without any issue

when I try to reopen again for second time after closing it

it not open so how to fix issue

so how to solve this issue

I can open bootstrap modal for display data and can close it without any issue

but when try to reopen again it not accept and not open bootstrap modal

<button id="BtnAddDisplay" class="btn custom-button col-12" type="button" onclick="INSERT_REQUEST_DEGREE_EQUATION_MODAL(); return false;">
        ارسال الى جهه جديده
    </button>
<div class="modal fade" id="INSERT_REQUEST_DEGREE_EQUATIONModal" tabindex="-1" aria-labelledby="INSERT_REQUEST_DEGREE_EQUATIONModalLabel" aria-hidden="true">
  <div class="modal-dialog custom-modal-dialog">
    <div class="modal-content">
      <div class="modal-header btn-dark text-center w-100">
        <h5 class="modal-title text-white w-100" id="INSERT_REQUEST_DEGREE_EQUATIONModalLabel">اضافه جهه جديده</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
               <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="card-subtitle line-on-side text-muted text-center font-small-4 pt-1">دراسة مواد للشهادة ذاتها بجامعات أخرى</h6>
                            </div>
                            <div class="card-body">
          
                                <div id="dvTransfersInputs" class="row transfers">
                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="control-label">
                                                <asp:Literal Text="<%$ Resources:Resource1, P_COUNTRY_ID %>" runat="server" />
                                            </label>
                                              <asp:DropDownList ID='ddlP_COUNTRY_ID_equation' runat='server' 
                                    CssClass='chosen-select chosen-rtl form-control' 
                                    data-placeholder="<%$ Resources:Resource1, ddl-placeholder %>" 
                                    ClientIDMode='Static' 
                                    onchange="handleDropdownChange_country(this)">
                                    <asp:ListItem Value="" Text="" Selected="True"></asp:ListItem>
                                </asp:DropDownList>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="control-label">
                                                <asp:Literal Text="<%$ Resources:Resource1, P_UNIVERSITY_ID %>" runat="server" />
                                            </label>
                                            <asp:DropDownList ID='ddlP_UNIVERSITY_ID_equation' runat='server' CssClass='chosen-select chosen-rtl form-control' data-placeholder="<%$ Resources:Resource1, ddl-placeholder %>" ClientIDMode='Static'  onchange="handleDropdownChange_university(this)">
                                                <asp:ListItem Value="" Text="" Selected="True"></asp:ListItem>
                                            </asp:DropDownList>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="control-label">
                                                <asp:Literal Text="<%$ Resources:Resource1, P_OFFICE_ID %>" runat="server" />
                                            </label>
                                            <asp:DropDownList ID='ddlP_OFFICE_ID_equation' runat='server' CssClass='chosen-select chosen-rtl form-control' data-placeholder="<%$ Resources:Resource1, ddl-placeholder %>" ClientIDMode='Static' onchange="handleDropdownChange_office(this)">
                                                <asp:ListItem Value="" Text="" Selected="True"></asp:ListItem>
                                            </asp:DropDownList>
                                        </div>
                                    </div>
                          
                                </div>
                            </div>
                 
                        </div>

                    </div>
                </div>
      </div>
      <div class="modal-footer justify-content-center">
       <button type="button" onclick="INSERT_UPD_E_TRANS_REQUEST_DEGREE_EQUATION_TRANSFARED()" class="btn btn-success">اضافه</button>
       <button type="button" class="btn btn-danger" data-dismiss="modal">الغاء</button>
      </div>
    </div>
  </div>
</div>
i open it using 
function INSERT_REQUEST_DEGREE_EQUATION_MODAL() {
    debugger;
    //$('.chosen-select').chosen({
    //    no_results_text: "No results matched",
    //    width: "100%"
    //});
    // check values of country
    $('#ddlP_OFFICE_ID_equation').val('').trigger('chosen:updated');
    $('#ddlP_UNIVERSITY_ID_equation').val('').trigger('chosen:updated');
    $('#ddlP_COUNTRY_ID_equation').val('').trigger('chosen:updated');
    var hiddenCountryValue = $('#HiddenCountry').val();
    var countries = JSON.parse(hiddenCountryValue);

    // Clear the dropdown and add a default empty option
    var $ddlCountry = $('#ddlP_COUNTRY_ID_equation');
    $ddlCountry.empty();
    $ddlCountry.append($('<option>', {
        value: '',
        text: 'اختر من القائمه'
    }));

    // Populate the dropdown with the JSON data
    $.each(countries, function (index, country) {
        $ddlCountry.append($('<option>', {
            value: country.COUNTRY_ID,
            text: country.COUNTRY_NAME
        }));
    });

    // Set the selected index to 0 (default option)
    $ddlCountry.prop('selectedIndex', 0);

    // Trigger the chosen update if you are using the chosen plugin
    $ddlCountry.trigger('chosen:updated');

    //========== Check university
    // Get the JSON data from the hidden field for Universities
    var hiddenUniversityValue = $('#HiddenUniversity').val();
    var universities = JSON.parse(hiddenUniversityValue);

    // Clear the University dropdown and add a default empty option
    var $ddlUniversity = $('#ddlP_UNIVERSITY_ID_equation');
    $ddlUniversity.empty();
    $ddlUniversity.append($('<option>', {
        value: '',
        text: 'اختر من القائمه'
    }));

    // Populate the University dropdown with the JSON data
    $.each(universities, function (index, university) {
        $ddlUniversity.append($('<option>', {
            value: university.UNIVERSITY_ID,
            text: university.UNIVERSITY_DESC
        }));
    });

    // Set the selected index to 0 (default option)
    $ddlUniversity.prop('selectedIndex', 0);

    // Trigger the chosen update for University dropdown
    $ddlUniversity.trigger('chosen:updated');

    //=========== Check office
    var hiddenOfficeValue = $('#HiddenOffice').val();
    var offices = JSON.parse(hiddenOfficeValue);

    // Clear the Office dropdown and add a default empty option
    var $ddlOffice = $('#ddlP_OFFICE_ID_equation');
    $ddlOffice.empty();
    $ddlOffice.append($('<option>', {
        value: '',
        text: 'اختر من القائمه'
    }));

    // Populate the Office dropdown with the JSON data
    $.each(offices, function (index, office) {
        $ddlOffice.append($('<option>', {
            value: office.OFFICE_ID,
            text: office.OFFICE_NAME
        }));
    });

    // Set the selected index to 0 (default option)
    $ddlOffice.prop('selectedIndex', 0);

    // Trigger the chosen update for Office dropdown
    $ddlOffice.trigger('chosen:updated');

    //============
    $('#INSERT_REQUEST_DEGREE_EQUATIONModal').find('input:text, select').val('').trigger('chosen:updated');

    // Optionally, if you are using other plugins or components, reset their states here

    // Show the modal
    $('#INSERT_REQUEST_DEGREE_EQUATIONModal').modal('show').on('hidden.bs.modal', function () {
        // Perform any clean-up if necessary when the modal is hidden
        // Reset dropdowns or other inputs here if needed
        populateDropdown($('#ddlP_COUNTRY_ID_equation'), countries, 'اختر من القائمه');
        populateDropdown($('#ddlP_UNIVERSITY_ID_equation'), universities, 'اختر من القائمه');
        populateDropdown($('#ddlP_OFFICE_ID_equation'), offices, 'اختر من القائمه');
    });
    //if ($.fn.chosen) {
    //    $ddlCountry.chosen('destroy'); // Destroy previous instance if any
    //    $ddlCountry.chosen({
    //        // Custom Chosen Options if required
    //        'width': '100%', // adjust as needed
    //        'no_results_text': 'لا توجد نتائج' // Example
    //    });

    //    $ddlUniversity.chosen('destroy'); // Destroy previous instance if any
    //    $ddlUniversity.chosen({
    //        // Custom Chosen Options if required
    //        'width': '100%', // adjust as needed
    //        'no_results_text': 'لا توجد نتائج' // Example
    //    });

    //    $ddlOffice.chosen('destroy'); // Destroy previous instance if any
    //    $ddlOffice.chosen({
    //        // Custom Chosen Options if required
    //        'width': '100%', // adjust as needed
    //        'no_results_text': 'لا توجد نتائج' // Example
    //    });
    //}
/*    $('#INSERT_REQUEST_DEGREE_EQUATIONModal').modal('hide');*/

    // Reset input fields (optional, since they'll be reset when hidden)
    //$('#ddlP_OFFICE_ID').val('').trigger('chosen:updated');
    //$('#ddlP_UNIVERSITY_ID').val('').trigger('chosen:updated');
    //$('#ddlP_COUNTRY_ID').val('').trigger('chosen:updated');
    //$('#INSERT_REQUEST_DEGREE_EQUATIONModal').modal('show');
    return false; 
}
and i close it using 
         $('#INSERT_REQUEST_DEGREE_EQUATIONModal').modal('hide');

Share Improve this question edited Mar 19 at 3:38 asked Mar 19 at 3:35 Figo Eldakhlawy 11 bronze badge

1 Bootstrap comes with built-in modal open-close functionality so you don't need to implement a new one with JQuery unless you need additional functions – Faiz Byputra Commented Mar 19 at 3:52
so what changes i will do – Figo Eldakhlawy Commented Mar 19 at 7:32
Please format the code, reduce to minimal and simply remove all that commented out code to make this easier to answer here. – Mark Schultheiss Commented Mar 20 at 12:19

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

That is a mountain code, and all that code is not really required.

I suggest using a jQuery.UI dialog, and you have not only far more control with code, but you also save world poverty from a codding point of view.

A jQuery.UI dialog simply requires you specify a div (with display:none), and then jQuery.UI will pop the contents of that div for you.

So, say we have a GridView, and when you click on a row, we will:

Take the row PK database ID, load up the div area with code, then call the jQuery.UI dialog to pop and display that div.

Hence, say this GridView, and in the GridView we have a plain simple asp button that the user clicks on.

Hence, this markup:

<asp:GridView ID="GHotels" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ID" Width="50%"
    CssClass="table table-hover table-striped"
    >
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
        <asp:BoundField DataField="LastName" HeaderText="LastName"    />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName"  />
        <asp:TemplateField HeaderText="Active" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:CheckBox ID="chkActive" runat="server" 
                    Checked='<%# Eval("Active") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Description" HeaderText="Description"  />
        <asp:TemplateField HeaderText="Hotel Information" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:Button ID="cmdView" runat="server" Text="Edit"
                    OnClick="cmdView_Click" CssClass="btn" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

And right below the above GridView,then I have the "div" we will popup and display as a jQuery.UI dialog.

That markup is just a div with display:none for the style. That markup in the div looks like this:

    <div id="HotelInfo" runat="server" 
        style="float:left;display:none;width:48%"
        clientidmode="Static" >

    <div style="float:left" class="iForm">
            <label>HotelName</label>
            <asp:TextBox ID="txtHotel" runat="server"  width="280" f="HotelName" ></asp:TextBox> <br />

            <label>First Name</label>
            <asp:TextBox ID="txtFirst" runat="server"  width="280" f="FirstName"></asp:TextBox> <br />

            <label>Last Name</label>
            <asp:TextBox ID="txtLast" runat="server"  width="280" f="LastName"></asp:TextBox> <br />
.etc .etc .etc.

And below the above div, is our JavaScript to display the div as a jQuery.UI dialog:

    <script>
        function popinfo(pbtn, strHotelName) {

            // btn = row buttion - we use that for position of pop
            btn = $('#' + pbtn)
            var MyDialog = $("#HotelInfo")


            MyDialog.dialog({
                title: strHotelName,
                modal: true,
                position: { my: 'right top', at: 'left bottom', of: btn },
                width: "48%",
                dialogClass: "dialogWithDropShadow",
            })
        }
    </script>

Now, our code behind to fill the GridView:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid()
    End If

End Sub

Sub LoadGrid()

    Dim strSQL As String =
        "SELECT * FROM tblHotelsA
        WHERE Description is not null
        ORDER BY HotelName"
    Dim rstData As DataTable = MyRst(strSQL)
    GHotels.DataSource = rstData
    GHotels.DataBind()

End Sub

And the button click code behind:

Protected Sub cmdView_Click(sender As Object, e As EventArgs)

    ' Row click - get hotel informaton, fill out the pop div
    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer

    Dim intPK As Integer = GHotels.DataKeys(gRow.RowIndex).Item("ID")

    Dim rstData As DataTable
    rstData = MyRst($"SELECT * FROM tblHotelsA WHERE ID = {intPK}")

    Call fLoader(HotelInfo, rstData.Rows(0)) ' Load up conrols in div

    ' call our js pop function.
    Dim strHotelName = $"Edit Information for {rstData.Rows(0).Item("HotelName")}"
    Dim strJavaScript As String =
        $"popinfo('{btn.ClientID}','{strHotelName}');"

    ScriptManager.RegisterStartupScript(Page, Page.GetType, "mypop", strJavaScript, True)


End Sub

And the result is now this:

So, note how ONE very simple JavaScript routine is required here, and the beauty of a jQuery.UI dialog is you don't have a "gazillion" classes to try and set and "hope" that the bootstrap dialog somehow will work. A simple direct bit of JavaScript code + a jQuery.UI dialog is thus far simpler, and far less work and hassle.

The other issue may well that you using a update panel (which is not shown in your markup). In the case of a update panel, then the bootstrap code will tend not to re-initialize after a partial page post-back. All in all, I think adopting a jQuery.UI is a far more robust approach to display a popup dialog.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - After open bootstrap modal and close i can't reopen again why? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)