Programmatically open a ModalView

[Jason]

How do I open a ModalView using javascript? I have a button which opens the ModalView, but when I run this code:

   app.navigate("modalview-login");

It opens the view in a non-modal way and its missing most of the styling that it has as a modal. I also get the same result using this code:

   $("#modalview-login").open();

Any help is greatly appreciated. Thanks.
Jason

[Kamen Bundev]

Hi Jason,

You need to get the data object first, like this:
$("#modalview-login").data("kendoModalView").open();

All the best,
Kamen Bundev
the Telerik team

[Jason]

Hi Kamen. I tried the code but I'm getting an error "TypeError: Cannot call method 'open' of undefined"  Using the javascript console I've found that $("#modalview-login").data("kendoModalView") is null, which is why calling .open() is undefined. I'd assume that I've created the html incorrect, but it does popup from a button <a data-role="button" data-rel="modalview" href="#modalview-login">Log In</a>  I've include the html below. I'm not sure what's going on that a button click opens the modal view but the javascript does not.

            <div data-role="modalview" id="modalview-login">
                <div data-role="header">
                    <div data-role="navbar">
                        Log In
                    </div>
                </div>
                <ul data-role="listview" data-style="inset">
                    <li><label for="username">Username:</label> <input type="text" id="username" /></li>
                    <li><label for="password">Password:</label> <input type="password" id="password" /></li>
                </ul>
                <a data-click="loginCall" id="loginButotn" type="button" data-role="button">LogIn</a>
            </div>

Here is a link to a demo of it http://jsfiddle.net/jwhitmer/g7fhv/ 

Thank you again for your time and suggestions.

Jason

[Kamen Bundev]

Hi Jason,

Sorry, my bad, the data object is stored in kendoMobileModalView. However it still won't work since you're trying to get it right after Mobile init, plus in the beta you're using the ModalView can't be initialized outside of a View. Check the updated jsFiddle below:


If you use the Q2 release, you can move the ModalView declaration in the SplitView itself and the ModalView will cover both views:


Regards,
Kamen Bundev
the Telerik team

[Thomas]

I'm using Q2 and I still get the error
"Error: Cannot call method 'open' of kendoMobileModalView before it is initialized "

I try to open it by Javascript:

$("#modalview-error").kendoMobileModalView("open");

My modalview code comes here:

    <!-- Modal View zur Anzeige von Fehlern -->

<div data-role="modalview" id="modalview-error" style="width: 95%; height: 80%;">

     <div data-role="header">

         <div data-role="navbar">

             <span>Fehler</span>

             <a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>

         </div>

     </div>

     <div id="modalviewErrorMessage">       

     </div>

 </div>

I does not matter if I place the modelview code into a view or outside (in my case, I would prefer outside, cause I want to use it as error-message view called by differents views).

Is there a workaround?

[Kamen Bundev]

Hi Thomas,

Can you reproduce your issue in a Fiddle and I will take a look?

All the best,
Kamen Bundev
the Telerik team

[Thomas]

Hi,

I don't know how to get it into a Fiddle. Actually, it is already a running project.

You can find it here:

http://www.sur-picadas-bar.de/mobile/new/index.aspx

And here, you find the error, when you click on "Anfrage abschicken"

http://www.sur-picadas-bar.de/mobile/new/index.aspx#http://www.sur-picadas-bar.de/mobile/new/mobileViews/Tischreservierung.aspx

The modalview is in my index.aspx File at the moment.
The modalview is called in the custom.js file, in the function "addTischanfrage()".

Here is the code of this function:

function addTischanfrage() {

  

    application.showLoading();

     

    $("#btnAddTA").css("display", "none");

    $("#errorTA").css("color", "red");

    var name = $("#tbNameTA").val();

    var vorname = $("#tbVornameTA").val();

    var mail = $("#tbMailTA").val();

    var handy = $("#tbHandyTA").val();

    var datum = $("#tbDatumTA").val();

    var personenzahl = $("#tbPersonenzahlTA").val();

    var anmerkungen = $("#tbAnmerkungenTA").val();

 

    $("#errorTA").html("");

 

    // Validation Check

    if (name !== "" && vorname !== "" && mail !== "" && datum != "" && personenzahl != "") {

        //setLoading(true, currentIDContainer);

 

        $.post(url + 'MobileRequests/InsertTischanfrage.aspx',

        { name: name, vorname: vorname, gn: id, mail: mail, handy: handy, datum: datum, personenzahl: personenzahl, anmerkungen: anmerkungen }, function (data) {

            // put whole script content to your div without reloading page

            // setLoading(false, currentIDContainer);

            $("#errorTA").css("color", "black");

            $('#errorTA').html(data);

             

            application.hideLoading();

        });

    }

    else {

        $("#errorTA").html("Bitte geben Sie Ihren Namen, Datum, Personenzahl und Ihre E-Mail richtig ein."); $("#btnAddTA").css("display", "block");

        application.hideLoading();

 

        $("#modalview-error").css("display", "block");

        $("#modalview-error").kendoMobileModalView("open");       

 

    }

}

[Kamen Bundev]

Hi Thomas,

You've defined the ModalView at the root, which is unfortunately not supported in the Q2 release. You can work around that by defining it in the View that uses it. If you want to share it between the Views, there is another workaround, but it requires downloading the latest internal build. After you upgrade to it, you can initialize a root level ModalView manually like this:
var application = new kendo.mobile.Application(document.body);
kendo.mobile.init(application.element.children("[data-role=modalview]"));

Then you can use it from any View (like you're trying to do).

Greetings,
Kamen Bundev
the Telerik team

[Thomas]

Ok, now it works, when I put it into the view.

Thanx a lot.

But just to be curious - where can I get the next internal build?
:-)

[Sebastian]

Hi Thomas,

I checked your account and it indicates that you have an active Kendo UI Complete commercial license that expires February 2013. This means that the latest internal build should be available under your account's section, since it was published in the beginning of this week.

Kind regards,
Sebastian
the Telerik team

[Robert]

Kamen,

I have the newest build and I tried your method but I am getting the TypeError: Cannot call method 'open' of undefined.

View at the root:

<div data-role="modalview" id="foo">

   foo....

</div>

I add the following on init at the bottom of the page:

<script type="text/javascript">
var app = new kendo.mobile.Application(document.body); 

kendo.mobile.init(app.element.children("[data-role=modalview]"));
</script>


I try to open the view:

$("#foo").data("kendoMobileModalView").open();

and get the error: TypeError: Cannot call method 'open' of undefined. 

Any idea of what else I can be missing?

[Kamen Bundev]

Hello Robert,

Can you send a sample page with the issue reproduced and I will try to help you fix it. Additionally, if you use the latest builds from August, you don't have to initialize the ModalView yourself - the Kendo Mobile Application takes care of that during init.

Regards,
Kamen Bundev
the Telerik team

[Eric]

Has there been any resolution to this?  I'm looking to programmatically open a modal as well.

[Terry]

I'd very much like an answer to this too. Currently,

$('#myModal').data("kendoMobileModalView");

returns "undefined" for me.

If I add

kendo.mobile.init($('#myModal'))

or

$('#myModal').kendoMobileModalView();

I get the following error:

'Uncaught TypeError: Cannot read property 'os' of undefined"

[Alexander Valchev]

Hello Terry,

This thread is relatively old and outdated. In the latest KendoUI Versions a mobile ModalView widget is defined in the mobile application DOM element (same level as the application views). This help article explains how the ModalView could be opened. If you would like to open it via JavaScript, please use the open method.
For your convenience I prepared a small example: http://jsbin.com/atezoj/2/edit

Kind regards,
Alexander Valchev
the Telerik team