JavaScript function not fireing

[Entegral]

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">
               <p>
                   <input required='required' class='txt_input' type='text' placeholder="e.g. Cape Town or 244 Jean Avenue or Jhon Doe" id='searchTextField'/>
               </p>
               <p>
                   <a id="btnSearch"data-role="button" data-rel="actionsheet" href="#actionsheet" data-icon="search">Search</a>
                   <label id="lblMessage"></label>
               </p>
           </div>
       <ul id="actionsheet" data-role="actionsheet" data-cancel="Close">
           <li>
                <li><a id="btnContacts" data-action="initContactView" data-click="ContactView()">Contacts</a></li>

           <li>
               <a id="btnProperty" data-action="initpropertyView" data-click="initpropertyView()">Property</a>
           </li>
       </ul>
   </div>
   <!-- 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>
               </div>
           </header>
       <ul data-role="listview" data-style="inset" id="lstView_contacts" data-template="lstView_contact_Template"></ul>
   </div>

And my JavaScript

function ContactView()
{
    alert("nkjn")
    var txtSearchbox = $("#searchTextField").val();
$.ajax({
        type: "GET",
        data: param = "searchField="+txtSearchbox+"&office="+localStorage.getItem("office")+"&person="+localStorage.getItem("person"),
        contentType: "application/json; charset=utf-8",
        url: "http://smw-wsdl.company.net/mobile.asmx/ContactGet",
        dataType: "json",
        success: successContact,
        failure: function (msg) {
            console.log(msg);
        }
    });
}
/*wsdl call succeed*/
function successContact(data) {
    //apply datasource to listview
    $("#lstView_contacts").kendoMobileListView({
        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.

[Tina Stancheva]

Hi,

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.

Regards,
Tina Stancheva
Telerik