KendoUI Mobile Development Part 3

KendoUI Mobile Development Simplified:

In this next example, I am going to instruct how to use jQuery to read text from the screen and transfer it to a new page.

Each of my blogs are itemized to break down the code section by section for clarity.

We will be a different example program this time. Take a look at the code snippet below:

<div data-role="view" id="graphics" data-title="Graphics/Counter" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Atari Basic
<ul>
<li id="graphicsLV">
<h1>Graphics X</h1>
<span class="sales-up">
<p class="buttoncolorRed" align="right">x=0-16 (+16 no text window)</p>
</span></li>
<li>COLOR C<span class="sales-up">- C=0-3</span></li>
<li>PLOT X,Y<span class="sales-up"><p class="buttoncolorRed" align="right">X - horizontal Y - vertical</p>
</span></li>
<li>DRAWTO X,Y<span class="sales-up"><p class="buttoncolorRed" align="right">X - horizontal Y - vertical</p>
</span></li>
</ul>
</li>

The area that shows "Graphics X x=0-16 (+16 no text window)" will be transferred to a new page (view) once that ListView is clicked. This works by capturing the text image on the page with jQuery, navigating to a new view, and then showing the results from the previous page.

Take a look at the jQuery code below:

$("#graphicsLV").click(function () {
var lv1 = $("#graphicsLV").text();
alert(lv1);  alert("You clicked the first ListView");
kendo.mobile.application.navigate("#app_pageA");
$("#listviewTest").text("Text:" + lv1);
});

The script searches the tags above for the ID name of "graphicsLV" and connects this to a jQuery click event. Then a variable called lv1 is initialized that contains the text "Graphics X x=0-16 (+16 no text window)".

The alert message recalls the variable name of lv1 which is now loaded with the text that was displayed using <h1>Graphics X</h1> and <p class="buttoncolorRed" align="right">x=0-16 (+16 no text window)</p>.

Then the code navigates to a new page with "kendo.mobile.application.navigate("#app_pageA"). The section "app_pageA" is the new web page name.

After this the section "$("#listviewTest").text("Text:" + lv1)" searches for the new listview name "listviewTest" on the second page. Then it remembers the text contained in the variable lv1. The "Text:" is concatenated together with the text.

Take a look at the code on the new page (view) below:

<div data-role="view" id="app_pageA" data-init="mobileListViewHeadersInit" data-title="Atari 800 Programming" data-layout="databinding">
<header data-role="header">
<div data-role="navbar" data-align="left">
<a class="button" data-align="right" data-role="button" data-click="Page2">Page 2</a>
<a class="nav-button" data-align="center">Atari</a>
<span data-role="view-title"></span>
</div>
</header>   
<ul data-role="listview" data-style="inset">
<li id="listviewTest"><a data-rel="external"></a></li>
</ul>

In the code above the section that shows id="app_pageA" is the page name. The part that shows data-init="mobileListViewHeadersInit" can be ignored for now. I will explain that later. Just know that it communicates with a function called "mobileListViewHeadersInit". A "data-init" is a way to refresh ListView data. This is commonly seen on Facebook when you try to scroll to a page that contains more postings.

The part that shows data-layout="databinding" is a way of reproducing code over in a page. In the example above it is used to show the button much later.

The important part to pay attention to for now is the ListView section that shows <ul data-role="listview" data-style="inset">. This area identifies the ListView with the name of "listview". The data-style="inset" is used to format the ListView display style.

The new ListView name shows <li id="listviewTest"><a data-rel="external"></a></li>.

Once the user has navigated to the new page you will see the ListView filled with text:

Now recall the code earlier that showed $("#listviewTest").text("Text:" + lv1). This code recalls the text that was on the previous view and can now paste it in the new ListView found here called "listviewTest".

Conclusion:
jQuery can be used for a lot of different purposes. In this blog you learned how to capture the text on a ListView and transfer it to a new page.


About the author:
I received my Bachelor of Computer Science from Devry University in 2011. Shortly after I left a job of 8 years in banking to begin my adventure as a Web Developer and have been in the field to date.