Develop Reference

jquery how to make multiple ajax calls [duplicate]

This question already has answers here:
Does ID have to be unique in the whole page?
(14 answers)
Closed 2 years ago.
I am stuck on ajax, I have first select box, which list all countries for a sender, and I also have second select box which also list countries for a receiver. I use ajax to append the countries but the issue now is that, the second select box is not populated.
I call the country from my php function
public function country()
{
return $this->countries->getCountries();
}
My route
Route::get('/country', [ 'as' => 'customer.country', 'uses' => 'IndexController#country' ]);
my ajax now
$.ajax({
type: "get",
url: "/country",
success: function (res) {
if (res) {
$.each(res,function(key,value){
$("#country").append('<option value="'+value+'">'+value+'</option>');
});
}
}
});
and My select box is as follow
For Sender:
<div class="col col-md-6">
<div class="form-group">
<label class="required">Receiver Country</label>
<select id="country" class="form-control" required>
<option selected disabled>Select Country</option>
</select>
</div>
</div>
Then for receiver:
<div class="col col-md-6">
<div class="form-group">
<label class="required">Receiver Country</label>
<select id="country" class="form-control" required>
<option selected disabled>Select Country</option>
</select>
</div>
</div>
Now only the select box for sender always populated but the receiver will not. Pls how can I get the two select box populated using the ajax?.
UPDATED...pls check

you used the same id for the two Select, try something like that:
if (res) {
$.each(res,function(key,value){
$("#country_sender").append('<option value="'+value+'">'+value+'</option>');
$("#country_receiver").append('<option value="'+value+'">'+value+'</option>');
});
}

How to trigger dynamic dropdown in Edit View

I am new to web development and I just learned Jquery to create dynamic dropdowns. The problem that I am facing is that my dropdowns are not being updated when I go to the edit view.
So I have been able to successfully create dynamic dropdowns for my Create view (see code).
Create.cshtml:
<div class="form-group col-md-4" id="drop_1">
<label asp-for="Option_1" class="control-label"></label>
<select asp-for="Option_1" class="form-control" id="opt1">
<option value="">Select Option</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<span asp-validation-for="Option_1" class="text-danger"></span>
</div>
<div class="form-group col-md-4" id="drop_2">
<label asp-for="Option_2" class="control-label"></label>
<select asp-for="Option_2" class="form-control" id="opt2">
<option value="">Select Option</option>
</select>
<span asp-validation-for="Option_2" class="text-danger"></span>
</div>
<div class="form-group col-md-4" id="drop_3">
<label asp-for="Option_3" class="control-label"></label>
<select asp-for="Option_3" class="form-control" id="opt3">
<option value="">Select Option</option>
</select>
<span asp-validation-for="Option_3" class="text-danger"></span>
</div>
Edit.cshtml is the same as Create.cshtml
Site.js:
$(function() {
$('#opt3').change(function () {
var x = $(this);
if (x.val() == "") {
$('#drop_2').hide();
$('#drop_3').hide();
}
else {
if (x.val() == "A") {
$('#opt2').find('option').remove().end();
$('#opt2').append('<option value="D">D</option>');
.
.
. etc.
}
}
//Same for the remaining dropdowns
});
});
The point is that my dropdowns work when I start clicking on my dropdowns. But what I would like to see is that when I try to go into my edit views and the data is pulled in, the dropdowns automatically get changed based on whatever data there is for dropdown 1 and 2, without the user having to reselect dropdown 1 and 2.

The change event is sent to an element when its value changes. If you want to make the dropdownlist changes when page is loading the first time , you can write your javascript methods directly in $(function () {}); . For example , if you want to add D option to select 2 after loading edit views :
<script>
$(function () {
$('#opt2').append('<option value="D">D</option>');
//write your other logic here
$('#opt3').change(function () {
var x = $(this);
if (x.val() == "") {
$('#drop_2').hide();
$('#drop_3').hide();
}
else {
if (x.val() == "A") {
$('#opt2').find('option').remove().end();
$('#opt2').append('<option value="D">D</option>');
}
}
//Same for the remaining dropdowns
});
});
</script>

dynamic row creation affecting other created dropdown values angular 6

I have 3 drop downs primary, secondary,ternary categories, each dependent on each other, Initially I have 3 drop downs below that I have one button " add more" , after clicking "add more" again drops will come below the ones earlier have, now the question is first row drop down selection is working fine , after clicking "add more" the second row drop down selection is not working , means it changes the value of already selected first row of the second category same with the ternary category. first I all load all the primary category, based on primary id i will fetch secondary categories, based on the secondary category id i will fetch ternary category. please me with this.
HTML CODE
<div class="row Space_2">
<div class="col-md-4">
<select class="Textfield_2" id="primary_category_id" formControlName="primary_category_id" (change)="getSecondCategory($event.target.value)" name="primaryServices" required>
<option value="">Primary Service</option>
<option *ngFor="let primaryCat of primaryCategory" [value]="primaryCat.id">{{primaryCat.name}}</option>
</select>
</div>
<div class="col-md-4">
<select class="Textfield_2" id="secondary_category_id" formControlName="secondary_category_id" (change)="getTernaryCategory($event.target.value)" name="secondaryServices" required>
<option value="">Secondary Service</option>
<option *ngFor="let secondCat of secondCategory" [value]="secondCat.id">{{secondCat.name}}</option>
</select>
</div>
<div class="col-md-4">
<select class="Textfield_2" id="ternary_category_id" formControlName="ternary_category_id" name="secondaryServices" required>
<option value="">Ternary Service</option>
<option *ngFor="let ternaryCat of ternaryCategory" [value]="ternaryCat.id">{{ternaryCat?.name}}</option>
</select>
</div>
</div>
<div *ngFor="let k of addmoreServices let i = index">
<div class="row Space_2">
<div class="col-md-4">
<select class="Textfield_2" id="primary_category" (change)="getSecondCategory($event.target.value)" name="{{k.primary_category}}" required>
<option value="">Primary Service</option>
<option *ngFor="let a of primaryCategory" [value]="a.id">{{a?.name}}</option>
</select>
</div>
<div class="col-md-4">
<select class="Textfield_2" id="secondary_category" (change)="getTernaryCategory($event.target.value)" name="{{k.secondary_category}}" required>
<option value="">Secondary Service</option>
<option *ngFor="let b of secondCategory" [value]="b.id">{{b?.name}}</option>
</select>
</div>
<div class="col-md-4">
<select class="Textfield_2" id="secondary_category" (change)="getTerId($event.target.value)" name="{{k.ternary_category}}" required>
<option value="">Ternary Service</option>
<option *ngFor="let c of ternaryCategory" [value]="c.id">{{c?.name}}</option>
</select>
</div>
</div>
</div>
TypeScript Code:
getPrimaryCategory() {
this.http.get('http://localhost:3000/api/getPrimaryCategory' ,{
})
.subscribe(
res => {
this.primaryCategory = res['data'];
console.log(this.primaryCategory);
},
err => {
}
);
}
getSecondCategory(id,i) {
this.primcatId = id;
this.http.get('http://localhost:3000/api/getsecondarycatdataforternary/'+id ,{
})
.subscribe(
res => {
this.secondCategory = res['data'];
console.log(this.secondCategory);
},
err => {
}
);
}
getTernaryCategory(id) {
console.log("The ternary ID is",id);
this.secondId = id;
this.http.get('http://localhost:3000/api/getternaryCatforServices/'+id ,{
})
.subscribe(
res => {
this.ternaryCategory = res['data'];
console.log(this.ternaryCategory);
},
err => {
}
);
}
getTerId(id){
this.terid = id;
console.log("THE TERNARY ID IS",this.terid);
}
addMoreServices() {
this.addmoreServices.push({ primary_category:this.primcatId , secondary_category:this.secondId ,ternary_category: this.terid });
console.log("the add more services",this.addmoreServices);
}

You need to add trackBy to your *ngFor directives. You can track by id and thanks you this Angular won't treat values after refreshing as new values.

Vue selected first option with v-model

I cannot set default value for myselect, when user is at the first time at the site. I want to have first option as selected, but user can change his choice and choose another option if he doesn't want default option. Can I do this when I use v-model?
Here is my HTML code:
<div class="form-group">
<label class="control-label" for="docType">Type of document</label>
<select class="form-control" id='docType' name="docType" v-model="docType"
:disabled="noDocChoose == true">
<option value="paragon">Document1</option>
<option value="complaint">Document2</option>
</select>
</div>
And here is my Vue JS code:
data: () => ({
docType: ''
}),

Are you asking if you can make the select have an empty default value? In that case, you would have to add another option that has a blank value. For example:
<select class="form-control" id='docType' name="docType" v-model="docType">
<option value="">- please select -</option>
<option value="paragon">Document1</option>
<option value="complaint">Document2</option>
</select>
The value of the option that matches the docType model would be selected.

Set your docType in data, to the value you want to be the default.
data(){
return {
docType: "paragon"
}
}
Example.
console.clear()
new Vue({
el: ".form-group",
data(){
return {
docType: "paragon"
}
}
})
<script src="https://unpkg.com/vue#2.4.2"></script>
<div class="form-group">
<label class="control-label" for="docType">Type of document</label>
<select class="form-control" id='docType' name="docType" v-model="docType" :disabled="noDocChoose == true">
<option value="paragon">Document1</option>
<option value="complaint">Document2</option>
</select>
</div>

ngChange a bunch of dropdowns

So I need to entirely change a group of drop downs that appear based on the selection of one dropdown. I believe ngChange is the way to go about it, but I am not entirely sure how to change between two sets of divs (or if that is even the best way of doing it.
So I have this dropdown:
<div class="input-group" theme="bootstrap" style="">
<label>Product Type</label>
<select class="dropdown-menu scrollable-menu form-control" style="" ng-model="event.etype" ng-change="setOptions()" id="etype">
<option value="" selected disabled>Select a Product</option>
<option ng-click="type = 'x'">X</option>
<option ng-click="type = 'y'">Y</option>
<option ng-click="type = 'z'">Z</option>
<option ng-click="type = 'q'">Q</option>
<option ng-click="type = 'w'">W</option>
</select>
</div>
If the choice is X, I need one set of drop downs (contained in one row), and if it is anything else, I need an entirely different set (contained in another row).
Here are how the drop downs look:
<div class="col-lg-3">
<label>Numbers</label>
<ui-select-match placeholder="Select Numbers">{{$item.admin_user.name}}</ui-select-match>
<ui-select-choices repeat="a in ams"> {{a.admin_user.name}} </ui-select-choices>
</ui-select>
</div>
</div>
<div class="row col-lg-12" id="nonX">
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Super Heroes</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="superhero" id="script">
<option value="" selected disabled>Select Superhero</option>
<option ng-repeat="superhero in superheroes" ng-value={{superhero}} ng-click="selectHeroe(superhero)">{{superhero.name}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row col-lg-12" id="noniPad">
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Screen</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="event.screen" id="screen">
<option value="" selected disabled>Select Screen</option>
<option ng-repeat="screen in screens" ng-value={{screen}} ng-click="selectScreen(screen)">{{screen.name}}</option>
</select>
</div>
</div>
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Misc Asset</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="event.miscasset" id="miscasset">
<option value="" selected disabled>Select Misc Asset</option>
<option ng-repeat="miscasset in miscassets" ng-value={{miscasset}} ng-click="slectMiscAsset(miscasset)">{{miscasset.name}}</option>
</select>
</div>
</div>
</div>
<div class="row m-b-sm m-t-sm"></div>
</div>
The separate drop downs both appear in different rows. So I would need one row to appear if they select iPad and one row to appear if they do not select an iPad.
I would love some help. Thank you!

Your best option would be to set the dropdowns of each one depending on the parent selection. There's no need to create a duplicate div to hold both sets of dropdows.
I removed all css classes and any other markup not relevant to the ng-change to make it clearer.
Your parent dropdown would look like this:
<div>
<label>Product Type</label>
<select ng-model="event.etype" ng-change="setOptions(event.etype)">
<option value="">Select a Product</option>
<option ng-repeat="etype in etypes" ng-value="etype" ng-bind="etype"></option>
</select>
</div>
Take special notice of how the setOptions handler is being passed the ng-model value. This means when an option is selected, it'll automatically set ng-model="event.etype" to the value of that option.
To support this behavior in your controller you need to provide the array of event types:
$scope.etypes = ['gif', 'photo', 'ipad', 'video', 'print'];
Then, on your setOptions method you'll get the selected option and filter your descendant dropdowns
var options1 = [{
etype: 'ipad',
value: '1'
}, {
etype: 'gif',
value: '2'
}];
$scope.setOptions = function (etype) {
$scope.scripts = options1.filter(function (item) {
return item.etype == etype;
});
};
What this means is that setOptions will set the descendant dropdowns based on the etype value passed in. In this example I'm limiting to $scope.scripts only but you can set as many as needeed. As you can see options1 is just an array which contains the etype property which I need to filter against.
Finally on your descendant dropdowns you would use the filtered options:
<select ng-model="event.script">
<option value="" selected disabled>Select Script</option>
<option ng-repeat="script in scripts" ng-value="script.value" ng-bind="script.value"></option>
</select>

Using ng-hide="event.etype == null || event.etype=='ipad'" and ng-show="event.etype == 'ipad'" on the row tags solved my issue!