Opening modal from code behind absolute failure

Question

0.00/5 (No votes)

See more:

I am trying to fire a Bootstrap Modal at the end of a section of code behind by calling a Javascript function, it will run the alert() that is in the function but steadfastly refuses to display any modal I try.

Code behind partial :-

ScriptManager.RegisterStartupScript(Me, Page.GetType(), "Script", "openModal();", True)

And the Javascript Function on the content page :-

<%@ Page Title="" Language="vb" AutoEventWireup="False" MasterPageFile="~/Site.Master" CodeBehind="clientprocess.aspx.vb" Inherits="UPARS.clientprocess" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

    <asp:ScriptManager ID="ScriptManager1" runat="server"
        EnablePageMethods="true">
    </asp:ScriptManager>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <style>
        .GridViewClass td, th {
            padding: 4px;
        }
    </style>


    <script type="text/javascript">

        function openModal() {
            alert("howdy");
           $('#chqPayModal').modal('show');
        }

    </script>

And the Modal code:-

<pre>   <div class="modal modal-dialog-centered fade " id="chqPayModal" tabindex="-1" role="dialog" aria-labelledby="chqPayModal" aria-hidden="true">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-3"></div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <input type="text" class="form-control" id="chqNumber" placeholder="Cheque Number">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="chqAmount" placeholder="Cheque Value">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" runat="server" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" onclick="chqTransfer();" class="btn btn-primary">Save </button>
                </div>
            </div>
        </div>
    </div>

What I have tried:

I can fire this modal no problem with a button on the content page, but not from code behind, although the alert() part does fire.

Hope someone has some idea as I surely don't ....

Posted 12-Apr-18 7:34am

Member 10111160

Add a Solution

Comments

F-ES Sitecore 13-Apr-18 5:29am

First thing you need to appreciate is that you can't call js from code-behind, your code-behind runs on the server and generates output which is then sent to the browser to run. All your RegisterStartupScript is doing is adding js to the output that you want to run when the browser receives the finished page.

If the "alert" is running but the modal isn't showing then it's probably because it can't find it by id. We can't say why that is, you'll need to look at the source of the page and try to work it out. You can debug if this is the issue using code like

function openModal() {
alert($('#chqPayModal').length);
}

if the alert shows "0" then that's the problem.

Member 10111160 13-Apr-18 8:19am

Hi
Thanks for taking the time to respond, I added the debug code but whilst the first alert still runs, the alert($('#chqPayModal').length); fails to run at all, so no 2nd alert box comes up at all.

If I just put your debug code in alone in the function, nothing happens with regard to an alert firing....

F-ES Sitecore 13-Apr-18 8:32am

If the code doesn't run at all that's normally because there is a syntax error. Check the error console of the browser, maybe you're not loading the jQuery library properly or maybe there is an issue elsewhere.

Member 10111160 13-Apr-18 8:49am

It seems that it is the Jquery it wont run, my plain and simple JavaScript alert runs fine.

I load these in the Site.Master files :-









These must be functioning as all the rest of the Bootstrap and Modals work fine on the content page.

F-ES Sitecore 13-Apr-18 9:07am

No point in making assumptions, use the network tab of the browser tools to ensure the scripts are loading and check the console for errors.

Member 10111160 13-Apr-18 9:16am

The error which is trapped at the alert you have told me to add is:-

Line: 259
Error: '$' is undefined

Member 10111160 13-Apr-18 9:16am

Also JQuery is loaded

F-ES Sitecore 13-Apr-18 9:32am

If it's loaded you wouldn't be getting the $ undefined error. Check it's being loaded before your function uses it.

Member 10111160 13-Apr-18 9:46am

I was loading Jquery in the site.master page (so I (maybe incorrectly) assumed it would load prior to the content page. I have however added a second reference to load it in the content page before the fuction. This has changed the error to :-

Line: 261
Error: Object doesn't support property or method 'modal' Which still refers to the line $('#chqPayModal').modal('show');

F-ES Sitecore 13-Apr-18 9:56am

Don't add extra references, you're just making the issue worse, you need to resolve the original problem. Again, how do you know it is loading? Are you just assuming it is loading as assumptions are the root of many issues. I'm guessing you don't quite understand that the code on your master page runs in the location context of the content page, and I'm further guessing your content page is in a sub-folder and I'm also guessing the references in your master page are relative, and if all of those guesses are correct you are not loading the jQuery script because the paths are wrong because you're in a different folder. If this is the issue and your jQuery files are in the project use Page.ResolveUrl to reference your scripts and they should work anywhere.

If the above guesses are not right then I'm afraid we can't tell you why your code can't find your files, we can't access your system.

Member 10111160 13-Apr-18 10:02am

Dont know why this keeps wiping out code segments in forum, i added second references in the content file to bootstrap and adminLTE it all now works.... but I guess I have mitigated the issue rather than solved it ...

Member 10111160 13-Apr-18 9:58am

OK So I have it working now by adding a second reference on the content page :-



I assume I am missing the point in the page load cycle as both of the above are also referenced in the Site.Master file

Member 10111160 13-Apr-18 8:50am

Member 10111160 13-Apr-18 8:52am

Sorry for some reason when posting the paths in the reply they get stripped out, but they are correct and loading..

Member 10111160 13-Apr-18 8:21am

I know the ID of the Modal is correct because it triggers fine from an asp:button on the content page, and i have just copied and paste the ID of the modal into the Javascript function...

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)