I have 2 chained list :
<select>
<option> Half Life </option>
<option> Mario </option>
...
</select>
<select>
<option> Gordon </option>
<option> Alexia </option>
<option> Peach </option>
<option> Luigi </option>
...
</select>
These selects are populated by MySQL requests (ZSQL Method)
I would like to load this second form only when it's necessary. I don't know how to do in a Zope Page Template to link these select dynamically (Certainly with AJAX and JAVASCRIPT?). So I search in some topics but I don't find examples..
(I find these topics, but I don't know how to operate : dynamicly fill table using zpt and ajax as update; http://play.pixelblaster.ro/blog/topics/AJAX ; http://zajax.net/)
Thanks in advance !
1) in the form page:
$("#first_select").click(function(){
var dat_game = $('#first_select option:selected').text();
$.post("a_new_page_template", { dat_game: dat_game},
function(data){
var $response=$(data);
var res = $response.filter('#whatiwant').html();
$('#second_select').append(res);
});
return false;
});
2) in the 'a_new_page_template':
<html>
<body tal:define="results here/sql_select_value;
start request/start|python:0;
batch python:modules['ZTUtils'].Batch(results,
size=50,
start=start)">
<span id="whatiwant">
<tal:x repeat="result batch">
<option><tal:x replace="result/value">value goes here</tal:x></option>
</tal:x>
</span>
</body>
</html>
Thanks to me :)
Related
knowing community,
I want to achieve the following in short: I have a XML-file with listed pizzas inside of it (it is a kind of test file). My page has a select menu from which a user choses one pizza and the pizza size, which is then both displayed below. The content will only show up after the user has chosen. This is the function:
declare function app:showpizza2($node as node(), $model as map(*)){
let $pizza1 := request:get-parameter('selectMenu1', '')
let $size1 := request:get-parameter('size1', '')
return
for $pizza in $app:pizza//pizza
where $pizza/#id eq $pizza1
let $id := $pizza/#id
return
(<a data-key="{ $id }" class="person"><div>{ $pizza1 }</div></a>,
<div>{ $size1 }</div>)
};
With a second function I now want to build previous/next buttons which take the current shown pizza, find it inside of the XML tree and then go one step further up or down. So far I am able to show one pizza above or below with these lines:
declare function app:previousPizza($node as node(), $model as map(*)){
let $pizza1 := request:get-parameter('selectMenu1', '')
return
for $pizza in $app:pizza//pizza
where $pizza/#id eq $pizza1
let $previousPizza := $pizza/preceding::pizza[1]
return
<p>{ $previousPizza }</p>
};
The problem of course is that as a "current pizza parameter" I only take the user-chosen value from the select menu. So I guess this is a typical recursion problem because I want to have a function which always takes the current parameter after clicking on a button but I kind of really have no idea how to achieve this. Can you help out?
This is my html-file where I call these functions:
<div class="row">
<div class="col-sm-4">
<!-- form for choosing pizza -->
<form action="?">
<!-- select Pizza type -->
<select name="selectMenu1" id="pizzamenu1"
data-placeholder="Pizza wählen" style="width:150px">
<option value=""></option>
<option value="pizza1">Pizza 1</option>
<option value="pizza2">Pizza 2</option>
<option value="pizza3">Pizza 3</option>
</select>
<!-- select pizza size -->
<select name="size1" data-placeholder="Größe wählen"
style="width:150px;" onchange="this.form.submit()">
<option value=""></option>
<option value="family">Familien Pizza</option>
<option value="medium">Mittel Pizza</option>
<option value="small">Kleine Pizza</option>
</select>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<!-- showpizza2 returns chosen pizza from select menu -->
<div data-template="app:showpizza2"/>
<!-- Show previous pizza -->
<div data-template="app:previousPizza"/>
</div>
</div>
Thanks.
Since the value of the user-selected pizza comes from the html list, it is in $model. Your Xquery function for the next/prev buttons should access the $model to start where you want to.
We would need to see how you call the xquery modules in your .html files, to give you a working code sample. But the problems you describe are likely originating there.
See the documentation for Using the Model to Keep Application Data
I have select tag which takes values from array like this
<select class="groupForArchive" ng-model="selected.country">
<option ng-selected= "{{country == selected.country}}" ng-repeat="country in countrynList" value={{country}}> {{ country.name }} </option>
</select>
when I am deleting element from array(countryList) I am setting new value to this tag like this $scope.selected.country = newValue, but in select box I am getting free space like in this pictures.
before delete country from list
after delete country from list
and when I am taking select tag's ng-model I am getting correct object but I can not see it in my select box and I don't know which item is selected.
P.S newValue is array's another item(item from countrynList)
How can I fix it ?
Update AngularJS library to latest version and make changes, presented below:
angular.module('app', []).controller('ctrl', function($scope){
$scope.countrynList = [
{name:'USA'}, {name:'Spain'}, {name:'France'}, {name:'Germany'}
]
$scope.selected = {country: $scope.countrynList[0]};
$scope.Delete = function(){
var index = $scope.countrynList.indexOf($scope.selected.country);
$scope.countrynList.splice(index, 1);
$scope.selected.country = $scope.countrynList[0];
}
})
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<select class="groupForArchive" ng-model="selected.country">
<option ng-repeat="country in countrynList" ng-value='country'>
{{country.name}}
</option>
</select>
{{selected.country}}
<br>
<input type='button' ng-click='Delete()' value='Delete First'/>
</div>
I am using a select combobox with dynamic values from an OData response. Beccause of this I need to identify the 'highest' existing period in my response and set the selectedattribute for the relevant option item.
This selectis used as a period filter. That's why I also added an entry for 'all' periods. This can be removed in the sample and makes no difference in the behaviour.
Angular seems to evaluate the conditions etc. correct, so the element which should be selected gets the attribute selected="selected" and ng-select="true".
Nevertheless the browser selects '' by default rather than the selected element. Even if I remove the option for all periods, the browser takes the 'empty' element and not the element with the selectedattribute.
I checked other answer so similiar questions, but none of them worked and many reference ng-options instead of ng-repeat.
More information
I am using AngularJS v1.4.9 and Chrome 48.0.2564.103 m
I am using a rather large OData response in JSON format as data source, so I'd need to rewrite the code here to provide an executable example.
I'll do this if it's necesary or required.
For other reasons, which I don't want to discuss here I cannot use ng-options, so please don't suggest this.
HTML snippet - commented and indented afterwards
The other logic for sorting, ordering etc. is working fine.
<select class="semester-selection" ng-model="selectedPeriod.Period_Nav.PeriodName">
<!-- This 'empty' option can be removed. ng-selected won't work then either -->
<option ng-selected="false" value=""><Alle></option>
<option ng-selected="{{examResult.Period == getHighestPeriod()}}"
ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'"
value="{{examResult.Period_Nav.PeriodName}}">
<!-- Debug information -->
{{examResult.Period_Nav.PeriodName}}
{{examResult.Period == getHighestPeriod()}}
{{getHighestPeriod()}}
</option>
</select>
Generated HTML via Angular JS
The generated code looks okay, because selected="selected" and ng-select="true" as in there for the desired element.
<select class="semester-selection ng-pristine ng-valid ng-touched"
ng-model="selectedPeriod.Period_Nav.PeriodName">
<option value=""><Alle></option>
<!-- ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
<option selected="selected" ng-selected="true" ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'" value="WiSe 2011/12" class="ng-binding ng-scope">
WiSe 2011/12
true
15014000
</option>
<!-- end ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
<option ng-selected="false" ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'" value="SoSe 2007" class="ng-binding ng-scope">
SoSe 2007
false
15014000
</option><!-- end ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
</select>
Result in the browser
When I open the page in the browser the combobox has still not the selected value as active, but the first or empty one.
Reduced sample for testing / fiddling around
Oh. This reduced sample works, so I need to find the issue somewhere else in the code.
var app = angular.module('ExamResultList', [ ]);
app.controller('ExamResultController', ['$scope', function ($scope) {
// Simplified sample data -> this can contain 'duplicates'
$scope.examResultData = [
{PeriodName:'WiSe 15/16', Period:8}, // fake OData OrderBy -> Highest period is the first elem
{PeriodName:'SoSe 12', Period:1},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'SoSe 13', Period:3},
{PeriodName:'WiSe 13/14', Period:4},
{PeriodName:'SoSe 14', Period:5},
{PeriodName:'WiSe 14/15', Period:6},
{PeriodName:'SoSe 15', Period:7}
];
$scope.highestPeriod = 0;
$scope.getHighestPeriod = function() {
// first element has the highest period, because the OData request has a orderby expression
return $scope.examResultData[0].Period;
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExamResultList" id="examResultListWrapper">
<div ng-controller="ExamResultController as ExamResCtrl" id="examResultList">
<select class="semester-selection">
<option ng-selected="false" value=""><Alle></option>
<option ng-selected="{{examResult.Period == getHighestPeriod()}}"
ng-repeat="examResult in examResultData"
value="{{examResult.PeriodName}}">
{{examResult.PeriodName}}
<!-- Debug info
{{examResult.Period == getHighestPeriod()}}
{{getHighestPeriod()}}
-->
</option>
</select>
</div>
</div>
ng-selected does not take expression brackets. Use
ng-selected="examResult.Period == getHighestPeriod()"
So I am creating 2 drop down menus, the 2nd of which dynamically changes based off the first. However, the 2nd menu does not render the change, but is providing the correct options when viewing the Post with Firebug.
Here is the function that is supposed to render the menu
def findSubtagsForTags(){
print Tag.getAll()
def tag = Tag.get(params.tag.id)
render(template: 'subtagSelection', model: [subtags: tag.subtags])
}
This method is being called in my _form.gsp template, which is called by create.gsp (both generated by grails scaffolding for the most part). Here is my code snippet where I am calling it
<g:select name="tag.id" from="${Tag.list()}" optionKey="id" optionValue="tagName"
noSelection="['':'Choose Tag']"
onchange="${remoteFunction (
controller: 'tag',
action: 'findSubtagsForTags',
params: '\'tag.id=\' + this.value',
update: 'subtagSelection'
)}" />
<td id="subtagSelection" valign="top">
<select>
<option>Choose Tag</option>
<g:select name="subtags.id" id="subtags.id" from="${[]}" optionKey="id"/>
</select>
</td>
and the subtagSelection template that is being rendered is
<g:select name="subtag.id" from="${subtags}" optionValue="name" optionKey="id" id = "subtags.id"/>
The 2nd menu on the page is always "CHoose Tag", but using Firebug, when I look at the post, this is generated
<select name="subtag.id" id="subtags.id" >
<option value="1" >Training</option>
<option value="2" >Software</option>
</select>
however, there is no change to the 2nd menu.
Under the Net Tab of firebug, This is the 'put' request called by my function
Post:
Parameters : tag.id 1
Source:
tag.id=1
Response:
<select name="subtagSelection" id="subtagSelection" >
<option value="1" >Training</option>
<option value="2" >Software</option>
</select>
Any ideas/solutions?
EDIT: Issue was resolved after changing my code around a little, using https://stackoverflow.com/a/3771240/3691484 as a reference, changing the template file among other things
Try a few modifications - see if makes any difference:
<g:select name="tag.id" from="${Tag.list()}" optionKey="id" optionValue="tagName"
noSelection="['':'Choose Tag']"
onchange="${remoteFunction (
controller: 'tag',
action: 'findSubtagsForTags',
params: "'tag.id=' + this.value",
update: 'subtagSelection'
)}"
/>
<td id="subtagSelection11" valign="top">
<div id="subtagSelection">
<g:select name="subtags.id" id="subtags.id" from="[]"
optionKey="id" noSelection="['': 'Choose Tag']" />
</div>
</td>
There was a minor issue a select within a select? - use the noSelection tag for when nothing is selected
I have 10 different camp sites on a client site, I want to select a camp location based on where they what camp site they click on "registration form" from.
Currently it is a 10 item drop down, and I am looking to either do this through a url parameter (foo.com/test.html?camp=value) or something like that, but I cannot figure this out.
Hope fully you guys and gals can come through for me again!
Something like this if you are using php (using query string ?camp=value):
<?php
$camp = isset($_GET['camp']) ? $_GET['camp'] : NULL;
$sel = ' selected="selected"';
?>
<select>
<option value="value1"<?php if ($camp === 'value1') echo $sel; ?>>
Value 1
</option>
<option value="value2"<?php if ($camp === 'value2') echo $sel; ?>>
Value 2
</option>
</select>
Not sure if you're using php, but maybe this will help anyways.