HTML5 Data Bindings Support Product Page
Answered
Changing a repeat region on the fly - is it possible?
Asked 08 Jul 2015 12:27:29
2
have this question
08 Jul 2015 12:27:29 Paul Lamacraft posted:
Hi, I have a repeat region (from a JSON source) that lists employees names with the following code...<div data-binding-id="division_2" data-binding-repeat="{{playersNames.employees.where( "league", "==", "2" )}}">
{{league}} {{firstName}} {{lastName}}
</div> How would it be possible to change the value of the '2' to another number dynamically. I could then store the value in a variable ($myNewValue) and populate from this, so I would have something like this...
<div data-binding-id="division_2" data-binding-repeat="{{playersNames.employees.where( "league", "==", $myNewValue; )}}">
{{league}} {{firstName}} {{lastName}}
</div> Many thanks.
Replies
Replied 09 Jul 2015 08:20:19
09 Jul 2015 08:20:19 Teodor Kuduschiev replied:
Hello,
Unfortunately this is no possible. Please explain a little more detailed how exactly do you plan to update this variable so we can check if there is a solution?
Unfortunately this is no possible. Please explain a little more detailed how exactly do you plan to update this variable so we can check if there is a solution?
Replied 09 Jul 2015 08:40:10
09 Jul 2015 08:40:10 Paul Lamacraft replied:
Thank you for the reply. I am planning on a multi-page web app within a single HTML file. If it was PHP or ASP I would be able to request the Query String and work from there and update the necessary field.
I would have something like this:
When the link is pressed I could pick up the QueryString (id=23) - that in turn would be used to filter the JSON file and update the content div accordingly.
Thanks.
I would have something like this:
<a href="#page1?id=23">GoTo Page1</a>
When the link is pressed I could pick up the QueryString (id=23) - that in turn would be used to filter the JSON file and update the content div accordingly.
Thanks.
Replied 09 Jul 2015 08:56:24
09 Jul 2015 08:56:24 Teodor Kuduschiev replied:
Well, then there is an easier way to achieve this 
You could just use the URL variable to sort the results:
You could just use the URL variable to sort the results:<div data-binding-id="division_2" data-binding-repeat="{{playersNames.employees.where( "league", "==", $URL.id )}}">
{{league}} {{firstName}} {{lastName}}
</div> Replied 09 Jul 2015 10:35:36
09 Jul 2015 10:35:36 Paul Lamacraft replied:
Thanks for the reply. I have tried it but I can't get it to work, either I am doing something wrong or I am incrediebly stupid - (most probably the latter!!).
HTML Code:
JSON file.
Thanks for you time and patience.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Cordova Starter Site</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type="text/javascript" src="ScriptLibrary/dmxDataBindings.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataSet.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataFilters.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* dmxDataSet name "adidas" */
jQuery.dmxDataSet(
{"id": "adidas", "url": "js/names1.json", "data": "", "siteName": "sportsProject", "dataSourceType": "local", "dataType": "json"}
);
/* END dmxDataSet name "adidas" */
$(document).ready(function(){
});
</script>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div data-role="page" id="pageOne">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<a href="#pageTwo?id=1" data-transition="slide">Page One</a>
<br/><br/>
<a href="#pageTwo?id=2" data-transition="slide">Page Two</a>
<br/><br/>
<a href="#pageTwo?id=3" data-transition="slide">Page Three</a>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="pageTwo" data-add-back-btn="true">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div data-binding-id="division_2" data-binding-repeat="{{playersNames.employees.where( "league", "==", $URL.id )}}"> {{league}} {{firstName}} {{lastName}}
</div>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>JSON file.
{"employees":[
{"league":"1" , "firstName":"John", "lastName":"Doe"},
{"league":"1" , "firstName":"Anna", "lastName":"Smith"},
{"league":"2" , "firstName":"Peter", "lastName":"Jones"},
{"league":"2" , "firstName":"Glenn", "lastName":"Oakes"},
{"league":"1" , "firstName":"Peter", "lastName":"James"},
{"league":"2" , "firstName":"Oscar", "lastName":"Oakwood"},
{"league":"1" , "firstName":"Deon", "lastName":"Green"},
{"league":"3" , "firstName":"Kevin", "lastName":"Holder"},
{"league":"3" , "firstName":"Jason", "lastName":"Gribble"},
{"league":"2" , "firstName":"Mike", "lastName":"Brown"},
{"league":"1" , "firstName":"David", "lastName":"King"}
]}Thanks for you time and patience.
Replied 09 Jul 2015 11:30:40
09 Jul 2015 11:30:40 Teodor Kuduschiev replied:
Okay there are two problems in your code:
1. Your data source name is called "adidas" and your repeat region uses another data source name: data-binding-repeat="{{playersNames.employees.where ... "playersNames" -> make sure that they are the same.
2. It looks like the url parameter ?id is not getting passed on click as you are using hash (#) before it.
Solution:
Change the buttons code to:
And the repeat region code to:
1. Your data source name is called "adidas" and your repeat region uses another data source name: data-binding-repeat="{{playersNames.employees.where ... "playersNames" -> make sure that they are the same.
2. It looks like the url parameter ?id is not getting passed on click as you are using hash (#) before it.
Solution:
Change the buttons code to:
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '1');">Page One</a>
<br/><br/>
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '2');">Page Two</a>
<br/><br/>
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '3');">Page Three</a>And the repeat region code to:
<div data-binding-id="division_2" data-binding-repeat="{{adidas.employees.where( "league", "==", $league )}}"> {{league}} {{firstName}} {{lastName}}
</div> Replied 09 Jul 2015 12:02:50
09 Jul 2015 12:02:50 Paul Lamacraft replied:
Brilliant, many thanks for that you are a lifesaver!!
Replied 09 Jul 2015 12:59:30
09 Jul 2015 12:59:30 Paul Lamacraft replied:
One other small thing, how do I get the list to render properly? Not sure how to do listview refresh.
Thanks,
Paul.
<div data-binding-id="division_2" data-binding-repeat="{{adidas.employees.where( "league", "==", $league )}}">
<ul data-role="listview" data-inset="true">
<li><a href="#">{{league}} {{firstName}} {{lastName}}</a></li>
</ul>
</div>
Thanks,
Paul.
Replied 09 Jul 2015 14:55:17
09 Jul 2015 14:55:17 Teodor Kuduschiev replied:
Well, you need to select the UL and apply the ul.data.repeat.children to it.
Replied 09 Jul 2015 15:31:18
09 Jul 2015 15:31:18 Paul Lamacraft replied:
Thanks for helping me with this but unsure how I would go about what you have just mentioned (ul.data.repeat.children) and how I would insert in into my code.
Thanks for your patience.
Thanks for your patience.
Replied 10 Jul 2015 08:45:42
10 Jul 2015 08:45:42 Paul Lamacraft replied:
Thanks for you reply, but I am still unsure how to do this. I can get the data passed in but my code loses all formatting.
I have attached the code - as looking forward once I get past this I am sorted.
I have attached the code - as looking forward once I get past this I am sorted.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Cordova Starter Site</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type="text/javascript" src="ScriptLibrary/dmxDataBindings.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataSet.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataFilters.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* dmxDataSet name "adidas" */
jQuery.dmxDataSet(
{"id": "riders", "url": "js/names1.json", "data": "", "siteName": "speedwayProject", "dataSourceType": "local", "dataType": "json"}
);
/* END dmxDataSet name "adidas" */
$(document).ready(function(){
});
</script>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div data-role="page" id="pageOne">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '1');">Page One</a>
<br/><br/>
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '2');">Page Two</a>
<br/><br/>
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '3');">Page Three</a>
<br/><br/>
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '4');">Page Four</a>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="pageTwo" data-add-back-btn="true">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div data-binding-id="division_2" data-binding-repeat="{{riders.speedway.where( "league", "==", $league )}}"> {{league}} {{firstName}} {{lastName}}
</div>
<p>The above should format into a listview like below with the correct number data.</p>
<ul data-role="listview" data-inset="true">
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
<div data-binding-id="repeat1" data-binding-repeat="{{riders.speedway.where( "league", "==", $league )}}">
<ul data-repeat-children="true" data-role="listview">
<li><a href="#">Page 1</a></li>
</ul>
</div>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
Replied 10 Jul 2015 09:07:47
10 Jul 2015 09:07:47 Teodor Kuduschiev replied:
Well ... it is as easy as:
FULL SIZE IMAGE
You need to apply the repeat region to the ul, not to a div that wraps it. Follow the screenshot please!
FULL SIZE IMAGE
You need to apply the repeat region to the ul, not to a div that wraps it. Follow the screenshot please!
Replied 11 Jul 2015 11:39:15
11 Jul 2015 11:39:15 Paul Lamacraft replied:
Apologies for the previous post it should have read that I understand.
Ok many thanks, having re-read your post I have now got it.
The last thing and then I am sorted is how on that list that has been built with the repeating child would I run a query so I would end up with the items that appear at the top of the next page only in the list.
Thanks in advance.
Ok many thanks, having re-read your post I have now got it.
The last thing and then I am sorted is how on that list that has been built with the repeating child would I run a query so I would end up with the items that appear at the top of the next page only in the list.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Cordova Starter Site</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type="text/javascript" src="ScriptLibrary/dmxDataBindings.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataSet.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataFilters.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* dmxDataSet name "adidas" */
jQuery.dmxDataSet(
{"id": "riders", "url": "js/names1.json", "data": "", "siteName": "speedwayProject", "dataSourceType": "local", "dataType": "json"}
);
/* END dmxDataSet name "adidas" */
$(document).ready(function(){
});
</script>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div data-role="page" id="pageOne">
<div data-role="header">
[h1]Header[/h1]
</div>
<div data-role="content">
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '1');">Page One - Only Riders with the {{league}} value of 1 will appear in the list on the next page</a>
<br/><br/>
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '2');">Page Two - Only Riders with the {{league}} value of 2 will appear in the list on the next page</a>
<br/><br/>
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '3');">Page Three -Only Riders with the {{league}} value of 3 will appear in the list on the next page</a>
<br/><br/>
<a href="#pageTwo" data-transition="slide" onClick="$.dmxDataBindings.globalScope.add('$league', '4');">Page Four - Only Riders with the {{league}} value of 4 will appear in the list on the next page</a>
</div>
<div data-role="footer">
[h4]Footer[/h4]
</div>
</div>
<div data-role="page" id="pageTwo" data-add-back-btn="true">
<div data-role="header">
[h1]Header[/h1]
</div>
<div data-role="content">
<div data-binding-id="division_2" data-binding-repeat="{{riders.speedway.where( "league", "==", $league )}}"> {{league}} {{firstName}} {{lastName}}
</div>
<p>How would I then run a query on the list below to only list the items as they appear above for each option...</p>
<!--
** If the line of code below was substituted with this it works on the value 4, but I would like the 4 swapped with the {{league}} dynamic value.
<ul data-inset="true" data-role="listview" data-binding-id="repeat1" data-binding-repeat-children="{{riders.speedway.where( "league", "==", "4" )}}">
-->
<ul data-role="listview" data-binding-id="repeat1" data-binding-repeat-children="{{riders.speedway}}" data-inset="true" >[*]<a href="#">
{{league}} {{lastName}} {{firstName}}
</a>[/*][/list]
</div>
<div data-role="footer">
[h4]Footer[/h4]
</div>
</div>
</body>
</html> Replied 13 Jul 2015 15:33:07
13 Jul 2015 15:33:07 Paul Lamacraft replied:
Hi has anyone had any luck with this? I can work it on a static value that is included:
This list all the riders from league two. But I want to use the value that is passed from the previous page using the $.dmxDataBindings.globalScope.add('$league', '4') value, this could be 1,2,3 or 4.
I have tried,
This produces the correct result but has no styling on the list.
<ul data-inset="true" data-role="listview" data-binding-id="repeat1" data-binding-repeat-children="{{riders.speedway.where( "league", "==", 2 )}}">This list all the riders from league two. But I want to use the value that is passed from the previous page using the $.dmxDataBindings.globalScope.add('$league', '4') value, this could be 1,2,3 or 4.
I have tried,
<ul data-inset="true" data-role="listview" data-binding-id="repeat1" data-binding-repeat-children="{{riders.speedway.where( "league", "==", $league )}}">This produces the correct result but has no styling on the list.