jQuery code not loaded when navigating to html file?

4 posts, 1 answers
  1. James
    James avatar
    2 posts
    Member since:
    Sep 2011

    Posted 03 May 2012 Link to this post

    I have a very straightforward setup at the moment.  
    index.html has 2 links.  Using jQuery I handle the .click event of the links and call app.navigate to load either "test.html" or "about.html".  They both load correctly as far as static HTML goes, however anything inside of a jQuery block does not work.  
    For example on about.html I have a link with id="test".  with the jQuery of :
    $("#test").click(function(e){
        alert('inside click');
    });

    it does not show an Alert.  If I move the Alert as regular JS code it works or if I move the jQuery code and "test" link to the main view (index.html) it works.  

    So it seems pretty obvious that any jQuery code (or at least events) not in the index.html and referencing HTML elements that exist in the DOM at the moment won't work correctly.  

    Is this a known bug?  It seems like an incredibly large oversight.
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 03 May 2012 Link to this post

    Hello,

    The reason for the handler not working is that when the script is evaluated, the remote page is not yet initialized (and outside of the DOM). 

    The recommended way to achieve this is to define a view init event handler function in the remote view, and define your code there. You can take a look at the source code of our mobile demos (this one, for example), for an example. 

    On a side notice, the click event performs ~300ms delay on mobile devices, significantly decreasing the perceived application performance. I would like to recommend taking a look at our widget (button/listview) events instead. 

    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. James
    James avatar
    2 posts
    Member since:
    Sep 2011

    Posted 03 May 2012 Link to this post

    I tried using an init like you said but it does not seem to work.  Here is the full source of the page being navigated to via "app.navigate"

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
            <meta charset="utf-8">
            <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />
            <script type="text/javascript" charset="utf-8" src="cordova-1.7.0rc1.js"></script>
            <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
            <script type="text/javascript" charset="utf-8" src="js/kendo.mobile.min.js"></script>
            <script type="text/javascript" charset="utf-8">
            function onBodyLoad()
            {      
                document.addEventListener("deviceready", onDeviceReady, false);
            }
         
            /* When this function is called, Cordova has been initialized and is ready to roll */
            /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
            for more details -jm */
            function onDeviceReady()
            {
                // do your thing!
            }
             
            var prepareThings = function() {
                console.log('preparing things');
                $("#home").click(function(e){
                    console.log('home clicked');
                    e.preventDefault();
                    app.navigate("index.html");
                });
                $("#about").click(function(e){
                    console.log('about clicked');
                    e.preventDefault();
                    app.navigate("about.html");
                });
            }
            </script>
        </head>
        <body onload="onBodyLoad()">
            <div data-role="view" data-layout="app" data-title="test" id="test" data-init="prepareThings">
                This is a test page.<br />
              <a href="#" id="home">Home</a>
              <br />
              <a href="#" id="about">About</a>
            </div>
        </body>
    </html>


    None of the "console.log" instances are hit.  Which means that "prepareThings" is not hit.  The page loads and looks fine.  If I add a script tag that just does an alert, it works, but prepareThings isn't called at all.
  4. Answer
    Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 04 May 2012 Link to this post

    Hello,

    The script tag needs to be put inside the body tag. I recommend that you take a look at the documentation article regarding remote views for more details.  

    Kind regards,
    Petyo
    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