This is a migrated thread and some comments may be shown as answers.

onclick event not being fired on iPhone

7 Answers 252 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 08 Feb 2012, 03:46 PM

I tried this:

<footer data-role="footer">
<div id="defaultfooter" data-role="tabstrip">
<button id="greet-home" href="#index" data-icon="home" data-role="button">Home</button>
<button id="greet-search" data-icon="search" data-role="button" >Search</button>
<button id="greet-create" href="#customerdetail" data-icon="add" data-role="button">Create</button>
</div>
</footer>

$("#defaultfooter").kendoMobileTabstrip({
select: function(e) {
alert("defaultfooter");
console.log(e.item);
if(e.item === "greet-search")
greetSearch();
}
});

But I still do not received the alert.

answered on 08 Feb 2012, 05:22 PM

<!DOCTYPE html>
<html>
<head>
<title>Navex Greet</title>

<link href="/content/kendo.common.min.css" rel="stylesheet" />
<link href="/content/kendo.default.min.css" rel="stylesheet" />
<link href="/content/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="/content/jquery-1.7.1.min.js"></script>
<script src="/content/kendo.all.min.js"></script>
<link rel="stylesheet" href="/content/integration/sushi/css/style.css" />
</head>
<body>

<div data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">

<span data-role="view-title"></span>
</div>
</header>

<footer data-role="footer">
<div id="defaultfooter" data-role="tabstrip">
<button id="greet-home" href="#index" data-icon="home" data-role="button">Home</button>
<button id="greet-search" onclick="greetSearch();" data-icon="search" data-role="button" >Search</button>
<button id="greet-create" href="#customerdetail" data-icon="add" data-role="button">Create</button>
</div>
</footer>
</div>

<div data-role="layout" data-id="List">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<button data-role="button" data-icon="back" href="#index" class="k-button" data-align="left">Back</button>
</div>
</header>

<footer data-role="footer">
<div data-role="tabstrip">
<a id="list-home" href="#index" data-icon="home" class="k-button">Home</a>
</div>
</footer>
</div>

<div data-role="layout" data-id="Save">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<button data-role="button" data-icon="back" href="#index" class="k-button" data-align="left">Back</button>
</div>
</header>

<footer data-role="footer">
<div data-role="tabstrip">
<a id="save-home" href="#index" data-icon="home" class="k-button">Home</a>
<a id="save-save" href="#index" data-icon="stop" class="k-button">Save</a>
</div>
</footer>
</div>

<div data-role="view" id="index" data-transition="zoom" data-layout="default" data-url="/" data-init="initIndexView" data-title="Greet Customer">

<div id="errormessage-index" style="color:red;margin-left:auto;margin-right:auto;width:70%;"></div>
<div data-role="listview" data-style="inset" class="item-list">

<li>VIN:<span class="list-item-data" style="float:right;"><input type="text" id="greet-vin" value="Enter VIN" /></span></li>

<li>
<label for="greet-phone">Phone:</label>
<input type="text" style="float:right;" id="greet-phone" value="Enter Phone Number" />
</li>
<li>
<label for="greet-lastname">Last Name:</label>
<input type="text" style="float:right;" id="greet-lastname" value="Enter Last Name" />
</li>
<li>
<label for="greet-tagnumber">Tag Number:</label>
<input type="text" style="float:right;" id="greet-tagnumber" value="Enter Tag Number" />
</li>
<li>
<label for="greet-state">State:</label>
<input type="text" style="float:right;" id="greet-state" value="Enter State" />
</li>
</div>
</div>

<div data-role="view" id="customerlist" data-init="initCustomerListView" data-title="Customer List" data-layout="List" data-id="List" >

<div id="errormessage-customerlist" style="color:red;margin-left:auto;margin-right:auto;width:70%;"></div>
<div id="customerlist-grid" class="k-content">
</div>

</div>

<div data-role="view" id="customerdetail" data-transition="zoom" data-layout="Save" data-id="Save" data-init="initCustomerDetailView" data-title="Customer Info">
<div data-role="content">
<div id="errormessage-customerdetail" style="color:red;margin-left:auto;margin-right:auto;width:70%;"></div>
<ul data-role="listview" style="margin-left:auto;margin-right:auto;width:70%;" class="item-list">
<li><span style="float:left;">Date:</span><span style="float:right;" id="date">10/12/2011</span></li>

<li><span style="float:left;">Service Rep:</span><span style="float:right;" id="servicerep">CB</span></li>
<li><span style="float:left;">RO Number:</span><span style="float:right;" id="ronumber">14885</span></li>
<li><span style="float:left;">Name:</span><span style="float:right;" id="name">Ron Richins</span></li>
<li>
<span style="float:left;">Contact Phones:</span><span style="float:right;" id="phone1">(901) 240-3369</span>
<span style="float:right;" id="phone2"></span>
</li>
<li>
<span style="float:left;">Address:</span><span style="float:right;" id="address">9065 Cottonwood Cv<br />
<span id="city">Olive Branch, </span><span id="state">MS </span><span id="zipcode">38654</span></span>
</li>
<li><span style="float:left;">Year:</span><span style="float:right;" id="year">2005</span></li>
<li><span style="float:left;">Make:</span><span style="float:right;" id="make">Dodge</span></li>
<li><span style="float:left;">Model:</span><span style="float:right;" id="model">RAM 2500</span></li>
<li><span style="float:left;">License Number:</span><span style="float:right;" id="license">ABC 123</span></li>
<li><span style="float:left;">VIN:</span><span style="float:right;" id="vin">1Z6247755222</span></li>
<li><span style="float:left;">Appointment:</span><span style="float:right;" id="appointment">2/6/2012</span></li>
<li><span style="float:left;">Appointment Time:</span><span style="float:right;" id="appointmenttime">1:30 PM</span></li>
<li><span style="float:left;">Date/Time Promised:</span><span style="float:right;" id="promised">2/7/2012 8:00 AM</span></li>

</ul>
<ul data-role="listview" data-style="inset">
<li>
<label for="mileage">Mileage:</label>
<input type="text" style="float:right;" id="mileage" value="" />
</li>
</ul>
<select id="customertypes" data-style="inset">
<option>New Customer</option>
<option>Repeat Customer</option>
</select>
<select id="referraltypes">
<option>Drive By</option>
<option>Referral</option>
<option>Internet</option>
<option>Radio</option>
<option>Other</option>
</select>
</div>

<script>

$(document).ready(function()
{
$("#defaultfooter").kendoMobileTabstrip({
select: function(e) {
alert("defaultfooter");
console.log(e.item);
if(e.item === "greet-search")
greetSearch();
},
click: function(e) {
alert("defaultfooter");
console.log(e.item);
if(e.item === "greet-search")
greetSearch();
},
selectedIndex: -1
});

// var button = $("#xx").kendoMobileButton().bind("click", greetSearch());
var viewbag;
function onChange(arg)
{
var selected = $.map(this.select(), function(item)
{
var id = $(item.parentElement.firstChild).text();
getcustomerdetailbyid(id);
return $(item).text();
});

}
$("#customerlist-grid").kendoGrid({
dataSource: {
data: createRandomData(50),
schema: {
model: {
fields: {
CustomerNumber: { type: "string" },
CustomerName: { type: "string" },
CustomerAddress: { type: "string" }
}
}
},
pageSize: 10
},
change: onChange,
selectable: "multiple cell",
height: 250,
scrollable: true,
sortable: true,
filterable: true,
pageable: true,
columns: [
{
field: "CustomerNumber",
title: "Cust#"
},
{
field: "CustomerName",
title: "Name"
},
{
field: "CustomerAddress",
title: "Address"
}
]
});
$("#customertypes").kendoDropDownList();
$("#referraltypes").kendoDropDownList();
// var xxx = $("defaultfooter").data("kendoMobileTabstrip");
// xxx.bind("select", function () { alert("xx"); });

});

function greetSearch()
{
// alert("greetsearch");
$("#errormessage-index").text("");
if($("#greet-vin").val() != "Enter VIN")
{
// get by vin
var response = getcustomersbyvin($("#greet-vin").val());

if(response.nbrCustomer == 0) { $("#errormessage-index").text("No vehicles were found with the requested VIN."); return; }
if(response.nbrCustomers > 1) { submit("#customerlist", response.Customers); return; }
if(response.nbrVehicles == 1) { submit("#customerdetail", response.Customers[0], response.Customers[0].Vehicles[0]); return; }
submit("#vehiclelist", response.Customers[0]); $("#greet-vin").val("Enter VIN"); return;
}
else if($("#greet-phone").val() != "Enter Phone Number")
{
// get by phone
var response = getcustomersbyphone($("#greet-phone").val());

if(response.nbrCustomers == 0) { $("#errormessage-index").text("No customers were found with the requested phone."); return; }
if(response.nbrCustomers == 1) { submit("#vehiclelist", response.Customers[0]); return; }
submit("#customerlist", response.Customers); $("#greet-phone").val("Enter Phone Number"); return;
}
else if($("#greet-lastname").val() != "Enter Last Name")
{

// get by last name
var response = getcustomersbylastname($("#greet-lastname").val());
response = { nbrCustomers:2, Customers: [ {name: "Test", address: "123 Main" }, {name: "Test2", address: "456 Main" }] };

if(response.nbrCustomers == 0) { $("#errormessage-index").text("No customers were found with the requested last name."); return; }
submit("#customerlist", response.Customers); $("#greet-lastname").val("Enter Last Name"); return;
}
else if($("#greet-tagnumber").val() != "Enter Tag Number")
{
// get by tag number
var response = getcustomersbytagnumber($("greet-tagnumber").val(), $("greet-state").val());

if(response.nbrCustomers == 0) { $("#errormessage-index").text("No vehicles were found with the requested tag number."); return; }
if(response.nbrCustomers > 1) { submit("#customerlist", response.Customers); return; }
if(response.nbrVehicles == 1) { submit("#customerdetail", response.Customers[0], response.Customers[0].Vehicles[0]); return; }
submit("#vehiclelist", response.Customers[0]); $("#greet-tagnumber").val("Enter Tag Number"); return;
}
}


function getcustomersbyvin(vin) {}

function getcustomersbyphone(phone) {}

function getcustomerdetailbyid(id)
{
var response = { name: "Test", address: "123 Main", city: "Olive Branch", state: "MS", zipcode: "38654", date: "2/7/2012", servicerep: "CB", ronumber: "14844", contactphone1: "(901) 240-3369",
contactphone2: "", vehicles: [ {year: "2005", make: "Dodge", model: "RAM 2500", license: "ABC 456", vin: "1Z6247755222" } ],
appointment: "2/8/2012", appointmenttime: "1:30 PM", promised: "2/9/2012 8:00 AM", mileage: "12500", customertype: "Repeat Customer", referraltype: "Radio" };
$("#name").text(response.name);
$("#address").text(response.address);
$("#city").text(response.city);
$("#state").text(response.state);
$("#zipcode").text(response.zipcode);
$("#date").text(response.date);
$("#servicerep").text(response.servicerep);
$("#ronumber").text(response.ronumber);
$("#contactphone1").text(response.contactphone1);
$("#contactphone2").text(response.contactphone2);
$("#year").text(response.vehicles[0].year);
$("#make").text(response.vehicles[0].make);
$("#model").text(response.vehicles[0].model);
$("#license").text(response.vehicles[0].license);
$("#vin").text(response.vehicles[0].vin);
$("#appointment").text(response.appointment);
$("#appointmenttime").text(response.appointmenttime);
$("#promised").text(response.promised);
$("#mileage").val(response.mileage);
var ct = $("#customertypes").data("kendoDropDownList");
ct.select(function(dataItem)
{
return dataItem.text === response.customertype;
});

var ref = $("#referraltypes").data("kendoDropDownList");
ref.select(function(dataItem)
{
return dataItem.text === response.referraltype;
});

submit("#customerdetail", response);
}

function getcustomersbylastname(lastname)
{
initCustomerListView();

}

function getcustomersbytagnumber(tagnumber, state) {}

function greetcreate() {}

function submit(url, response)
{
viewbag = response;
app.navigate(url);
}

function initIndexView()
{

}
function initCustomerListView()
{

}
function initCustomerDetailView()
{
$("#customerdetail").kendoMobileListView({});
}

var app = window.kendoMobileApplication = new kendo.mobile.Application($(document.body),
{
transition: "slide",

viewShow: function(e)
{
var view = e.view, viewID = view.element.attr("id"), item;
if(viewID === "index")
view.content.find(".item-list").data("kendoMobileListView")._refresh();

},

view: function(e)
{

}
});
// var button = $("#xx").data("kendoMobileButton");

// button.bind("click", greetSearch());

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"];

function createRandomData(count) {
var data = [],
now = new Date();
for (var i = 0; i < count; i++) {
var customerName = firstNames[Math.floor(Math.random() * firstNames.length)] + " " + lastNames[Math.floor(Math.random() * lastNames.length)],
customerAddress = cities[Math.floor(Math.random() * cities.length)];

data.push({
CustomerNumber: i + 1,
CustomerName: customerName,
CustomerAddress: customerAddress
});
}
return data;
}

</script>

</body>
</html>

answered on 09 Feb 2012, 09:56 AM

index.zip

Hello,

I have modified your source code to bind to the tabstrip select event - see attachment.

On a side node, I would like to recommend that you review our demos and documentation more closely. Kendo UI Mobile has very rigid requirements about what HTML structure is needed for the widgets to function properly. Nesting buttons elements in mobile tabstrip is not supported, and it only works by accident.

All the best,
Petyo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 09 Feb 2012, 05:32 PM

Thank you for your help.

Originally, I had anchor tags vs buttons, I was trying the buttons to see if they would solve the problem (which they did not, but since there were no adverse effects I left them as buttons).

One thing about the changes that you made, was to put a href on the search anchor tag, I reality I was trying to call a function and based on that function navigate to the appropriate view. I removed the href and call the greetSearch() in the tabstrip select function, this does work, however, when I use app.navigate("#customerlist"); it does perform the navigation but it does not style the view. What do I need to call to navigate with styling?