jQuery error: $(...).modal is not a function

Question

I use this code to call a modal and pass some data:

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    int index = Convert.ToInt32(e.CommandArgument);
    if (e.CommandName.Equals("editRecord"))
    {
        GridViewRow gvrow = GridView1.Rows[index];
        HfUpdateID.Value = HttpUtility.HtmlDecode(gvrow.Cells[1].Text).ToString();
        txtNameUpdate.Text = HttpUtility.HtmlDecode(gvrow.Cells[2].Text);
        /*
            txtEmailIDUpdate.Text = HttpUtility.HtmlDecode(gvrow.Cells[3].Text);
            txtAddressUpdate.Text = HttpUtility.HtmlDecode(gvrow.Cells[4].Text);
            txtContactUpdate.Text = HttpUtility.HtmlDecode(gvrow.Cells[5].Text);
        */
        lblResult.Visible = false;
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append(@"<script type='text/javascript'>");
        sb.Append("$('#myModal').modal('show');");
        sb.Append(@"</script>");
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "EditModalScript", sb.ToString(), false);
    }
}

I'm using this version of JQuery and Bootstrap:

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

But I have this problem in the console. The modal won't open.

VM2312:1 Uncaught TypeError: $(...).modal is not a function
at <anonymous>:1:15
at Sys._ScriptLoader._loadScriptsInternal (MicrosoftAjaxWebForms.js:6)
at Sys._ScriptLoader._nextSession (MicrosoftAjaxWebForms.js:6)
at Sys._ScriptLoader._loadScriptsInternal (MicrosoftAjaxWebForms.js:6)
at Sys._ScriptLoader._nextSession (MicrosoftAjaxWebForms.js:6)
at Sys._ScriptLoader.loadScripts (MicrosoftAjaxWebForms.js:6)
at Sys.WebForms.PageRequestManager._onFormSubmitCompleted (MicrosoftAjaxWebForms.js:6)
at Array.<anonymous> (MicrosoftAjax.js:6)
at MicrosoftAjax.js:6
at Sys.Net.WebRequest.completed (MicrosoftAjax.js:6)

where do u call the script? before or after u call the the modal? make sure u call the jquery and bootstrap b4 running the modal pop up function — Se0ng11
– Se0ng11, Commented Nov 21, 2019 at 4:57
@Se0ng11 But i have the <scritpts> tags inside the head,the scripts i put above — luis
– luis, Commented Nov 21, 2019 at 5:21
but looking at the error message, it seem that it not recognize bootstrap modal, is your #myModal is in the page? if not, u need to be put somewhere in master page or the page itself so that it able to know where to call, the layout should exactly the same as what bootstrap page is — Se0ng11
– Se0ng11, Commented Nov 21, 2019 at 5:29

Guillaume Durupt · Accepted Answer · 2019-11-21 09:49:04Z

1

try to add your bootstrap.min.js script just before the end and jquery scripts in header

answered Nov 21, 2019 at 9:49

Guillaume Durupt

547 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery error: $(...).modal is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related