Bootstrap modal popup not working properly in aspx

Question

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

enter image description here

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.com/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>

score 2 · Accepted Answer · edited May 23 '17 at 12:07

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

edited May 23 '17 at 12:07

Community

1
1

answered Oct 10 '13 at 10:30

jayeshkv

2,180
4
24
42

1

Hehe! You made it dude. I was going to refer you http://stackoverflow.com/a/9407523/2260496 this link. bUt before that you made it. :P :D – TheLittleNaruto Oct 10 '13 at 10:34

score 0 · Answer 2 · answered Oct 10 '13 at 05:10

0

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.

answered Oct 10 '13 at 05:10

iamsar

1,080
2
15
28

i dont think you got my question. There is this first Popup `B1Market` which works fine and inside the `B1Market` there is a link to `divFunctionalsSplit` which has to popup after applying `data-dismiss='modal'` on the first popup `B1Market`. But the dismiss of `B1Market` works fine and still i cant get the popup `divFunctionalsSplit` to open up. – jayeshkv Oct 10 '13 at 05:22
Ah, yes. I misunderstood. Have you tried $("#divFunctionalsSplit").modal().show(); – iamsar Oct 10 '13 at 05:28
`TypeError: $(...).modal is not a function $("#divFunctionalsSplit").modal().show();` i get that in my firebug – jayeshkv Oct 10 '13 at 05:44

Bootstrap modal popup not working properly in aspx

2 Answers2