Programmatically open a ModalView

15 posts, 1 answers
  1. Jason
    Jason avatar
    20 posts
    Member since:
    Nov 2011

    Posted 21 Jul 2012 Link to this post

    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
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 23 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jason
    Jason avatar
    20 posts
    Member since:
    Nov 2011

    Posted 23 Jul 2012 Link to this post

    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
  5. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 24 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Thomas
    Thomas avatar
    21 posts
    Member since:
    Oct 2011

    Posted 24 Jul 2012 Link to this post

    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?
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 24 Jul 2012 Link to this post

    Hi Thomas,

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

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Thomas
    Thomas avatar
    21 posts
    Member since:
    Oct 2011

    Posted 24 Jul 2012 Link to this post

    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");       
     
        }
    }

  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 24 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Thomas
    Thomas avatar
    21 posts
    Member since:
    Oct 2011

    Posted 24 Jul 2012 Link to this post

    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?
    :-)
  11. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 25 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Robert
    Robert avatar
    198 posts
    Member since:
    Aug 2009

    Posted 02 Aug 2012 Link to this post

    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?





  13. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 Aug 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Eric
    Eric avatar
    1 posts
    Member since:
    Mar 2011

    Posted 18 Oct 2012 Link to this post

    Has there been any resolution to this?  I'm looking to programmatically open a modal as well.
  15. Terry
    Terry avatar
    1 posts
    Member since:
    Mar 2013

    Posted 12 Mar 2013 Link to this post

    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"

  16. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 15 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready