JavaScript function not fireing

2 posts, 0 answers
  1. Entegral
    Entegral avatar
    13 posts
    Member since:
    Nov 2006

    Posted 08 Apr 2014 Link to this post

    I have HTML code that needs to fire a JavaScript but it does not.

    <!-- search -->
       <div data-role="view" id="searchview" data-title="Search">
           <div data-role="content" class="view-content">
                       <input required='required' class='txt_input' type='text' placeholder="e.g. Cape Town or 244 Jean Avenue or Jhon Doe" id='searchTextField'/>
                       <a id="btnSearch"data-role="button" data-rel="actionsheet" href="#actionsheet" data-icon="search">Search</a>
                       <label id="lblMessage"></label>
           <ul id="actionsheet" data-role="actionsheet" data-cancel="Close">
                    <li><a id="btnContacts" data-action="initContactView" data-click="ContactView()">Contacts</a></li>
                   <a id="btnProperty" data-action="initpropertyView" data-click="initpropertyView()">Property</a>
       <!-- Contacts view list -->
       <div id="contactsview" data-role="view" data-init="initContactView">
           <header data-role="header">
                   <div data-role="navbar">
                       <a data-align="left" data-role="backbutton" data-icon="reply" class="nav-button">Back</a>
                       <h2 style="text-align:center;">Contacts</h2>        
           <ul data-role="listview" data-style="inset" id="lstView_contacts" data-template="lstView_contact_Template"></ul>

    And my JavaScript

    function ContactView()
        var txtSearchbox = $("#searchTextField").val();
            type: "GET",
            data: param = "searchField="+txtSearchbox+"&office="+localStorage.getItem("office")+"&person="+localStorage.getItem("person"),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successContact,
            failure: function (msg) {
    /*wsdl call succeed*/
    function successContact(data) {
        //apply datasource to listview
            dataSource: JSON.parse(data.d),
            template: $("#lstView_contact_Template").html(),
            endlessScroll: true,
            scrollThreshold: 8
        window.location = "#contactsview";

    I cant seem to figure out why it does not call the function and redirect to next page.
  2. Tina Stancheva
    Tina Stancheva avatar
    3298 posts

    Posted 11 Apr 2014 Link to this post


    In order to execute an action when clicking the links in an action sheet you need to use the data-action attribute of the links as described in our documentation. In the code you sent I noticed that you set both the data-action and data-click attributes. Also I noticed that one of the methods in the JavaScript you posted corresponds to the data-click attribute setting of the first link, however the data-click attribute is not respected within a link in an action sheet.

    Please change the definition of the links in the action sheet to use only the data-action attribute and make sure it is set to the JavaScript method you'd like to execute.

    For instance in the code snippet you sent if you change the btnContacts link definition like this:
    <li><a id="btnContacts" data-action="ContactView" >Contacts</a></li>
    the ContactView() method defined within your JavaScript will be properly fired. Please give this a try and let us know if it helps.

    Tina Stancheva

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top