javascript - Bootstrap modal popup not working properly in aspx - Stack Overflow

admin管理员组

文章数量:1428461

i have this button B1 (say) when i click on this B1 a modal popup appears with buttons / links

when i click the button / link a new popup should appear but i dont get the Modal window but i do get the values in firebug

Here is the code to the Button B1

<div class="thumbnail" ><img src="../Images/pix/B1.png" href="#B1Market" data-toggle="modal" /></div> 

which then calls this modal popup which contains the content from the div divB1Market

<div class = "modal fade" id="B1Market" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Heading</h3>
        </div>  
        <div class="modal-body">
        <div id='divB1Market' runat="server"></div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
        </div>
    </div>
</div>

The code below is the link / content inside the divB1Market

<a href='#' data-dismiss='modal' onclick='JavaScript:" + (user.RoleID == 3 ? "PlayerMP." : "") + "showFunctionDetails(1," + drMTDFunction["PlayerID"] + "," + SessionID + "," + SessionNum + ");'>Link here</a>

which inturn calls the ajax call

PlayerMP.getFunctionDetails = function (type, UserID, SessionID, SessionNo) {
$.ajax({
    type: "GET",
    url: PlayerMP.URL,
    data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo,
    success: function (FinancialSplitsJS) {
        if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {

            $("#divFunctionalDetails").html(FunctionalSplitsJS);
            switch (type) {
                case 1:
                    $("#divFunctionalsSplit"); 
                    break;
                            }                

                    $("#divFunctionalsSplit").show();        /* calling the div with this id in the aspx page */
        }
        else
            window.location.href = "../Login.aspx?SessionExpired=1";
    }
});}

This is the modal-popup content in the aspx page

<div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <%--this is the one not showing up--%>
        <div class="modal-dialog">
            <div class="modal-content">
                  <div class="modal-header">
                        <h3>Content</h3>      
                  </div> 
                  <div class="modal-body">
                    <div id="divFunctionalDetails" style="color:Black;"></div>
                   </div>
            </div>
        </div>
    </div>

This is what i get when i openup firebug and hover around with my cursor

But when i try to debug the code with firebug i get the responses (in the console) perfectly. I'm not able to figure out where the error might be.

This is the order of my importing the packages (posted this because i got this error while using )

$("#divFunctionalsSplit").modal().show();

Uncaught TypeError: Object #<Object> has no method 'modal'

<script src=".10.2.min.js" type="text/javascript"></script>
<!-- Start of BootStrap -->
<link href="../Scripts/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>

i have this button B1 (say) when i click on this B1 a modal popup appears with buttons / links

when i click the button / link a new popup should appear but i dont get the Modal window but i do get the values in firebug

Here is the code to the Button B1

<div class="thumbnail" ><img src="../Images/pix/B1.png" href="#B1Market" data-toggle="modal" /></div> 

which then calls this modal popup which contains the content from the div divB1Market

<div class = "modal fade" id="B1Market" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Heading</h3>
        </div>  
        <div class="modal-body">
        <div id='divB1Market' runat="server"></div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
        </div>
    </div>
</div>

The code below is the link / content inside the divB1Market

<a href='#' data-dismiss='modal' onclick='JavaScript:" + (user.RoleID == 3 ? "PlayerMP." : "") + "showFunctionDetails(1," + drMTDFunction["PlayerID"] + "," + SessionID + "," + SessionNum + ");'>Link here</a>

which inturn calls the ajax call

PlayerMP.getFunctionDetails = function (type, UserID, SessionID, SessionNo) {
$.ajax({
    type: "GET",
    url: PlayerMP.URL,
    data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo,
    success: function (FinancialSplitsJS) {
        if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {

            $("#divFunctionalDetails").html(FunctionalSplitsJS);
            switch (type) {
                case 1:
                    $("#divFunctionalsSplit"); 
                    break;
                            }                

                    $("#divFunctionalsSplit").show();        /* calling the div with this id in the aspx page */
        }
        else
            window.location.href = "../Login.aspx?SessionExpired=1";
    }
});}

This is the modal-popup content in the aspx page

<div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <%--this is the one not showing up--%>
        <div class="modal-dialog">
            <div class="modal-content">
                  <div class="modal-header">
                        <h3>Content</h3>      
                  </div> 
                  <div class="modal-body">
                    <div id="divFunctionalDetails" style="color:Black;"></div>
                   </div>
            </div>
        </div>
    </div>

This is what i get when i openup firebug and hover around with my cursor

But when i try to debug the code with firebug i get the responses (in the console) perfectly. I'm not able to figure out where the error might be.

This is the order of my importing the packages (posted this because i got this error while using )

$("#divFunctionalsSplit").modal().show();

Uncaught TypeError: Object #<Object> has no method 'modal'

<script src="http://code.jquery./jquery-1.10.2.min.js" type="text/javascript"></script>
<!-- Start of BootStrap -->
<link href="../Scripts/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>

• javascript
• jquery
• asp
• css
• twitter-bootstrap

Share Improve this question Follow edited Oct 10, 2013 at 9:28 jayeshkv asked Oct 10, 2013 at 4:36 jayeshkvjayeshkv 2,21844 gold badges2525 silver badges4444 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

All I needed to add was jQuery.noConflict(); before $('#divID').modal('show') it had to something to do with with other plugins conflicting.

• This Helped Me

It would appear that the id of your modal is getting overwritten by ASP. It changes from #B1Market to #divFunctionalSplit. I assume your button still has an href of #B1Market. Simple solution would be to change the href to match the div id. Better solution would be to prevent ASP from replacing the id.

本文标签： javascriptBootstrap modal popup not working properly in aspxStack Overflow