I am building a mobile application and am using the datasource feature to perform CRUD operations. The buttons that initiate the destroy and update on the transport are in a different view from where the datasource is described.
For example, the listmessages view has a listView widget to display all the messages (from the datasource), when one is selected, they are directed to the viewmessage remote view.
When in this view I want to initiate the update and destroy on the datasource in the previous view (listmessages ).
I currently use PHP to display the data on viewmessage view and would prefer to access the relevant dataSource id to display the selected data.
Hope this makes sense. Please see my code for a better idea of what I am trying to achieve.
Many thanks in advance for any advice.
For example, the listmessages view has a listView widget to display all the messages (from the datasource), when one is selected, they are directed to the viewmessage remote view.
When in this view I want to initiate the update and destroy on the datasource in the previous view (listmessages ).
I currently use PHP to display the data on viewmessage view and would prefer to access the relevant dataSource id to display the selected data.
Hope this makes sense. Please see my code for a better idea of what I am trying to achieve.
<
div
data-role
=
"view"
data-title
=
"Mobile"
id
=
"listmessages"
data-init
=
"listMessagesInit"
>
<
h2
>Customer Messages</
h2
>
<
p
><?
php
echo $unread_messages . ' - unread messages'; ?></
p
>
<
ul
id
=
"message_list"
></
ul
>
</
div
>
<
script
id
=
"message_list_template"
type
=
"text/x-kendo-template"
><
a
href
=
""
><
div
style
=
"float:left; width:150px; height: 50px"
class
=
"isnew_#= isnew #"
>#= customer_name #<
br
/>#= created #</
div
><
div
style
=
"height: 50px"
id
=
"message_#= id #"
class
=
"isnew_#= isnew #"
>#= message #</
div
></
a
></
script
>
<
script
>
function listMessagesInit(){
var dataSource = new kendo.data.DataSource({
transport: {
read: "/messages/data",
dataType: "json",
update: {
url: function() {
//where id is a global variable
var url = "/messages/markasread/" + id + "/" + read;
return url;
},
type: "POST",
dataType: "json"
//other configurations
},
destroy: {
url: function() {
//where id is a global variable
var delurl = "/messages/delete/" + id;
return delurl;
},
type: "DELETE",
dataType: "json"
}
},
schema: {
model: {
id: "id",
fields: {
created: { type: "string" },
message: { type: "string" },
customer_name: { type: "string" },
isnew: { type: "string" }
}
}
}
});
$("#message_list").kendoMobileListView({
dataSource: dataSource,
//pullToRefresh: true,
//appendOnRefresh: true,
style: "inset",
click: function(e) {
var id = e.dataItem.id;
var selected = dataSource.get(id);
window.kendoMobileApplication.navigate("/messages/view/" + id);
},
template: $("#message_list_template").text()
});
}
</
script
>
<
style
>
#listmessages div.isnew_1 {font-weight:bold}
#listmessages div.isnew_0 {font-weight:normal}
</
style
>
<
div
data-role
=
"view"
data-title
=
"Mobile"
id
=
"viewmessage"
data-init
=
"viewMessageInit"
>
<
h2
>Message</
h2
>
<
p
>Date: <?=$message->message->created?></
p
>
<
p
>From: <?=$message->message->customer_name?></
p
>
<
p
>Email: <
a
href="mailto:<?=$message->message->email?>" target="_blank"><?=$message->message->email?></
a
></
p
>
<
p
>Telephone: <?=$message->message->customer_telephone?></
p
>
<
p
>Location IP:<?=$message->message->ip?></
p
>
<
div
data-role
=
"scroller"
>
<
p
><?=$message->message->message?></
p
>
</
div
>
<?
php
$read_text = ($message->message->isnew == 1 ? 'Mark as read' : 'Mark as unread'); ?>
<?
php
$read = ($message->message->isnew == 1 ? 0 : 1); ?>
<
p
><
a
data-align
=
"left"
data-role
=
"button"
id
=
"markasread"
><?=$read_text?></
a
>
<
a
data-align
=
"right"
data-role
=
"button"
id
=
"delete"
>Delete</
a
></
p
>
</
div
>
<
script
>
function viewMessageInit(){
//var selected is defined in previous view - how to access this?
$("#markasread").click(function(){
selected.set("isnew", read);
dataSource.sync();
});
$("#delete").click(function(){
dataSource.remove(selected);
dataSource.sync();
});
}
</
script
>
Many thanks in advance for any advice.