Search function with multiple input field - modx

is there a chance to search with evoSearch with 3 items? I would like the search results page to show the result only if the page meets all 3 conditions? TVs added to the document will be checkboxes with the possibility of multiple selection
Below is a screen that should help
https://imgur.com/a/1uKN2N0#t9hgC5x
Search page code
<form action="[~24~]" id="praca" method="get">
<div>
<label for="language">Language:</label>
<select type="text" name="language" id="language" class="form">
<option selected="" value="english">english</option>
<option value="spanish">spanish</option>
<option value="german">german</option>
<option value="polish">polish</option>
</select>
</div>
<div>
<label for="localisation">Localisation:</label>
<select type="text" name="localisation" id="localisation" class="form">
<option selected="" value="italy">Italy</option>
<option value="Greece">Greece</option>
<option value="Spain">Spain</option>
<option value="Portugese">Portugese</option>
</select>
</div>
<div>
<label for="category">Category:</label>
<select type="text" name="category" id="category" class="form">
<option selected="" value="it-service">IT service</option>
<option value="helpdesk">Helpdesk</option>
<option value="callcenter">Call center</option>
<option value="support">Support</option>
</select>
</div>
<button type="submit">Search</button>
</form>
Search results page
[!evoSearch?
&display=`10`
&filters=`AND(
content:c.template:notin:27,28;
content:c.id:notin:23,88;
)`
&tvPrefix=``
&tvList=`language,localisation,category`
&renderTV=`language,localisation,category`
&ownerTPL=`#CODE:[+dl.wrap+]`
&tpl=`evoSearch`
&statTpl=`<p>Showing results [+stat_from+] - [+stat_to+] of [+stat_total+] for "[+stat_request+]"</p>`
&noResult=`<p>Nothing was found for "[+stat_request+]"</p>`
!]
It can also be AjaxSearch, I have code like below, but unfortunately it searches for one criteria.
Adding advSearch = 'allwords' causes it to find nothing
[!AjaxSearch?
&clearDefault=`1`
&showResults=`0`
&landingPage=`12`
&showMoreResults=`1`
&moreResultsPage=`12`
&output=`0`
&whereSearch=`tv`
&withTvs=`category,language,localisation`
&tvPhx=`category,language,localisation`
&tplInput=`#FILE:assets/snippets/ajaxSearch/templates/inputTemplates/input3.tpl.html`
!]
input3.tpl.html code
[+as.showInputForm:is=`1`:then=`
<form id="[+as.formId+]" action="[+as.formAction+]" method="post">
<fieldset>
<div>
<label for="language">Language:</label>
<select name="search[]" id="ajaxSearch_select" class="form">
<option value="english">english</option>
<option value="spanish">spanish</option>
<option value="german">german</option>
<option value="polish">polish</option>
</select>
</div>
<div>
<label for="localisation">Localisation:</label>
<select name="search[]" id="ajaxSearch_select2" class="form">
<option selected="" value="italy">Italy</option>
<option value="Greece">Greece</option>
<option value="Spain">Spain</option>
<option value="Portugese">Portugese</option>
</select>
</div>
<div>
<label for="category">Category:</label>
<select name="search[]" id="ajaxSearch_select3" class="form">
<option selected="" value="it-service">IT service</option>
<option value="helpdesk">Helpdesk</option>
<option value="callcenter">Call center</option>
<option value="support">Support</option>
</select>
</div>
[+as.showAsId:is=`1`:then=`<input type="hidden" name="[+as.asName+]" value="[+as.asId+]" />`+]
<input type="hidden" name="advsearch" value="[+as.advSearch+]" />
<label>
<input id="[+as.submitId+]" type="submit" name="sub" value="[+as.submitText+]" />
</label>
</fieldset>
</form>
[+as.showIntro:is=`1`:then=`
<p class="ajaxSearch_intro" id="ajaxSearch_intro">[+as.introMessage+]</p>
`+]
`+]

Related

Inserting argument with Jekyll

I am trying to insert the attribute "selected" into the first option (volvo) with Jekyll without writing anything in the form.
I guess I should do it with capture but don't get how it works for passing attributes.
cars.html
<html>
<body>
...
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
...
</body>
</html>

Sweetalert2 confirmButton stays visible when selectize.js opens - independent of z-index

I have a sweetalert2 like this:
When I want to pick something it looks like that:
My code inside the sweetalert2 is:
<div className={'col-12 course-item-modal'}>
<div className="row">
<div className="form-group col-12">
<div className="row">
<label htmlFor="form_4_course">Kurs</label>
<select id="form_4_course" name="form[4][course]" className="selectize form-control">
<option value=""></option>
<option value="60"> GTS</option>
<option value="62">Sprechstunde</option>
<option value="59">BesF 1c</option>
<option value="58">BesF 3c</option>
<option value="53" selected="selected">D 1a</option>
<option value="56">D 1b</option>
<option value="57">W T/X 1a</option>
</select>
</div>
</div>
<div className="form-group col-12">
<div className="row">
<label className="" htmlFor="form_4_rooms">Räume</label>
<select id="form_4_rooms" name="form[4][rooms][]" className="selectize form-control"
multiple="multiple">
<option value="1">Info I</option>
<option value="2">Info I</option>
</select>
</div>
</div>
</div>
</div>
I use selectize.js in this react.js application.
I played around with z-index of the sweetalert2 .swal2-actions and the .
Also I increased the z-index of the selectize containers. I tried everything possible with z-index - I guess. Nothing works at all.
Can someone help?
The solution is:
.swal2-content {
z-index: 2 !important;
}
The z-index for swal2-header, swal2-body, swal2-actions and swal2-footer are 1.
So setting the swal2-content class to z-index: 1 !important; solves the problem.

Angularjs is not updating ng-model value when the value of dropdown/select is being changed

When i am changing my option value of select it's ng-model value is not being changed.
Is this happening because of value is being changed by Jquery?
Because i read a line about angularjs from w3school that The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.
And i want to clarify that option value is being changed by j query.
Please suggest me proper solution or tell me error in the code.
Here is my html
<div class="row" ng-app="myapp" ng-controller="mycontroller" id="mainController">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<p>Rooms
<% no_of_rooms %>
</p>
<select ng-init="no_of_rooms='1'" autocomplete="off" ng-model="no_of_rooms" class="form-control" id="no_of_rooms" style='display:none' name="no_of_room" style="height: 39px !important;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" ng-repeat="i in getNumber(no_of_rooms) track by $index">
<div class="form-group">
<p>Adult (12+ YRS)</p>
<select autocomplete="off" class="form-control" style='display:none' name="no_of_adults[]" style="height: 39px !important;">
<option value="0">0</option>
<option value="1" Selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
</div>
Here is my script.
var app = angular.module('myapp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('mycontroller', function($scope , $filter) {
$scope.getNumber = function(num) {
return new Array(parseInt(num));
}
});

hide on element and show other element in jquery

$(document).ready(function(){
$(".btn").hide();
$(".about input").on('click',function(){
$(".about input").hide();
$(".btn").show();
});
});
" method="post" enctype="multipart/form-data">
save as
cover
logo
save
<select name="save">
<option selected="selected">save as<option>
<option value="coverimage">cover<option>
<option value="logo">logo<option>
</select>
<input type="file" name="image"></input>
<button class="btn">save</button>
</form>
initially hiding ".btn", but after clicking ".about input" want to hide ".about input" and show ".btn"

Can use the optgroup option on div?

have this optgroup select it is possible to use a javascript for this and if yes can show me an example how can do that i have look around but i do not find something?
Choose a city:
<select name="city">
<optgroup label="color_1">
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
</optgroup>
<optgroup label="Colors 2">
<option value="Yellow">Yellow</option>
<option value="Grey">Grey</option>
<option value="White">White</option>
</optgroup>
</select>
But i want use group for div class for example
<div class="categories">
<span class="optgroup" id="color_1">
<div class="category">Colors 1</div>
<label class="color_1">Blue</label>
<label class="color_1">Red</label>
<label class="color_1">Green</label>
</span>
<span class="optgroup" id="color_2">
<div class="category">Colors 2</label >
<label class="color_2">Yellow</label>
<label class="color_2">Grey</label>
<label class="color_2">White</label>
</span>
</div>

Resources