This may help the developers to implement the
- Ø Basic list view(without/with search/filter option)
- Ø How to create/develop Dynamic list view
- Ø how to call web service to get the json/jsonp data
- Ø How to bind json/jsonp data to the list view.
- How to show the count of items in listview (on search also it works).
- How to create/show validations on search if no match found.
This KB is simple and understandable for beginners too.
Brief on jQuery Mobile:
jQuery Mobile is a touch-friendly web UI development framework, can develop pages mainly using markup driven with minimal or no JavaScript.
Before going to see how to develop dynamic list view, brief introduction about basic listview given below.
ü jQuery Mobile Basic list view with/without search
Below sample code is example for Listview without search.
To get the search/filter input box just add simple attribute as below ‘ data-filter="true" ‘.
Use <ol> >( ordered list) instead <ul>( unordered list) to get the default serial numbers for the list view items.
ü Dynamic listview
Take an empty/loaded list view with id ‘dynamiclist’.
Here list view has one item with name ‘Item 1’.
Now list view has one item, now two more items will added dynamically on page load.
Add following script in <script> part as shown below.
ü Dynamic listview using web services.
Call Web Service and bind data to the list view (format of data is jsonp).
(json- JavaScript Object Notation, jsonp-executes third-party javascript which should return a Javascript object)
Take an empty/loaded list view with id ‘dynamiclist’.
Now list view has no items, now call Web service to get the data to add new items dynamically.
Prerequisites for dynamic we list view
Add following script in <script> part as shown below.
Here in Ajax call some data need to provide to get the json data from the webservice,
url: address of the web service
type: GET/POST ( to get the data GET & to post/save data POST).
data: parameters can pass here
dataType: return data type
On Success of Ajax call, ‘data’ will be filled with return json data, then add dynamic items to the list view by giving dynamic data values. To read the json data use ‘this’ key word and property name as shown above code.
Dynamic items will be added to the listview as below.
Also refer how filter/search works in list view
ü Count of list items before & after
To show the count of list view items, just take list-driver and give group id for that list-driver as below.
Then add below code,
First populate dynamic list view (populatelist () function), and write a function to count the items and then call the function at page load, on search, on clear search.
ü search displaying validations on search if no match found
Note: by default message of search input box is ‘Filter items’, list view has flexibility to change/set validations too.
Add data-filter-placeholder in
If no items match on filter of list items, to show the validations follow steps.
Add a dynamic list items with validations at the end ( means this would be last item), and hide this item by default on page load.
Add following code after all dynamic items added to the list view (i.e after for each )
Now add the following code to show the validations on search if no match found.
But when even click on close button of input search box to clear the filter string, still validations displayed at end of the items.
To remove this, just add below code, this is event which works on clicking of clear button of search box.
Final code
Code includes following
ü Develop dynamic listview with input search/filter option.
ü How to call web service and how to use/bind json data.
ü Displaying count of items on page load as well as on search too.
ü Applying validations on search if no match found and also how to hide those validations messages when those are not required to display.
ü How to add dynamic elements (as same as dynamic items of list).
Summary:
Developing jQuery Mobile Dynamic web list view with json data and search with count of items & result set and display validation messages if no match found on search.
