We Keep Coding

On page load call change events?

On page load I need to call change events for the drop down list. Currently what happens is in my Jquery code below when you select a value from the professions drop down list i.e. GP a Help text then below the drop down shows in a DIV area shows, however once you submit the form and if validation is thrown the help text goes from the view.
I need to call change events for the drop down list #profession but not exactly sure how to do this. Please advise
$('#profession').on('change', function (e) { //Gets the ID of profession drop down list
var selectedVal = $(this).val(); //Variable selectedVal this . value
$.ajax({ //Ajax declared
type: 'GET', //Its a get
url: "#Url.Action("GetenquiryTypes", "UnauthEnquiry")", //It goes to the enquiry controller method GetenquiryTypes
dataType: 'json', //Datatypes JSON
data: { SelectedProfession: selectedVal }, //data is SelectedProfession: selectedVal
success: function (json) { //Jquery Parse Json data from server on ajax success
if (json.helptext != undefined && json.helptext != '')
{
$('#ProfHelp').html(json.helptext)
$('#ProfHelpAlert').show(); ///////
}
else
$('#ProfHelpAlert').hide(); ///////
var targetDropdown = $('#enquirytype') //Var targetDropDropdown goes to dropdown ID enquiry type
targetDropdown.empty(); //target empty dropdown
$("<option />", {
val: "",
text: "Please select enquiry type" //Select enquiry type
}).appendTo(targetDropdown); //add to the target dd
if (json.enquiryTypes.length > 0) { //if JASON data from server greater then 0
for (var EnquiryType in json.enquiryTypes) { //go through each EnquiryType in JSON
$("<option />", {
val: json.enquiryTypes[EnquiryType].EnquiryId, //mapping
text: json.enquiryTypes[EnquiryType].Enquiryname //mapping
}).appendTo(targetDropdown); //add to drop down
};
}
targetDropdown.change();
}
});
});

Try this:
$(document).ready(function() {
$('#profession').trigger('change');
});

On page load call change of events for both dropdown

On first time page load, help text and announcements are displayed, on refresh after validation the help text and announcement don't show again on the view. I think I need to on page load call change event for both drop down, I'm not quiet sure how to do this. The first dropdown Div id is #profession and the second drop down is div id is #enquirytype.
$('#profession').on('change', function (e) { //Gets the ID of profession drop down list
var selectedVal = $(this).val(); //Variable selectedVal this . value
$.ajax({ //Ajax declared
type: 'GET', //Its a get
url: "#Url.Action("GetenquiryTypes", "UnauthEnquiry")", //It goes to the enquiry controller method GetenquiryTypes
dataType: 'json', //Datatypes JSON
data: { SelectedProfession: selectedVal }, //data is SelectedProfession: selectedVal
success: function (json) { //Jquery Parse Json data from server on ajax success
if (json.helptext != undefined && json.helptext != '')
{
$('#ProfHelp').html(json.helptext)
$('#ProfHelpAlert').show(); ///////
}
else
$('#ProfHelpAlert').hide(); ///////
var targetDropdown = $('#enquirytype') //Var targetDropDropdown goes to dropdown ID enquiry type
targetDropdown.empty(); //target empty dropdown
$("<option />", {
val: "",
text: "Please select enquiry type" //Select enquiry type
}).appendTo(targetDropdown); //add to the target dd
if (json.enquiryTypes.length > 0) { //if JASON data from server greater then 0
for (var EnquiryType in json.enquiryTypes) { //go through each EnquiryType in JSON
$("<option />", {
val: json.enquiryTypes[EnquiryType].EnquiryId, //mapping
text: json.enquiryTypes[EnquiryType].Enquiryname //mapping
}).appendTo(targetDropdown); //add to drop down
};
}
targetDropdown.change();
}
});
});
$('#enquirytype').on('change', function (e) { //onlick of professions DD
var selectedVal = $(this).val(); //Variable selectedVal this .value
$('#enquiryTypeHelpAlert').hide(); ///////
$('#EnquiryTypeAnnouncements').empty();
if (selectedVal != undefined && selectedVal != '') {
$.ajax({
type: 'GET', //Get
url: "#Url.Action("GetEnquiryTypeAndAnnoncements", "UnauthEnquiry")", //It goes to the enquiry controller method GetenquiryTypes
dataType: 'json', //Datatypes JSON
data: { SelectedEnquiryType: selectedVal }, //data is SelectedProfession: selectedVal
success: function (json) { //Jquery Parse Json data from server on ajax success
if (json.helptext != undefined && json.helptext != '') {
$('#enquiryTypeHelp').html(json.helptext)
$('#enquiryTypeHelpAlert').show(); ///////
}
else
$('#enquiryTypeHelpAlert').hide(); ///////
var announcement = $('.EnquiryTypeAnnouncement:first').clone();
$('#EnquiryTypeAnnouncements').empty();
$('#enquiryTypeHelp').html(json.helptext);
for (var i in json.announcements) {
var announcementCopy = announcement.clone();
announcementCopy.find(".notification").html(json.announcements[i]);
$(announcementCopy).appendTo($('#EnquiryTypeAnnouncements')).show();
$('#EnquiryTypeAnnouncements').show();
}
}
});
}
});

That seems correct as on change will keep your DD help text loaded.
$(document).ready(function () {
$('#profession').change(); //Keeps profession dropdown list help text displayed
});
As its not in the Jquery you have to get it from the model.
var EnquiryType ='#Model.EnquiryType
Then get it in the change event.

In the beginning of ypur script call your Professions dropdown in a function such as
$(document).ready(function () {
$('#profession').change(); //Keeps profession dropdown list help text displayed
});
Next as the enquiry type is not available in Jquery. you have get that from Model. By using
var EnquiryType ='#Model.EnquiryType
Then get it in the change event.

Reset the data after unchecking the checkbox

I have some results in div's ,each result has one checkbox associated with it, when a user click on single checkbox user, Current checked box's value is passed to another page using an ajax call and data is fetched and displayed in a hidden div box.
Now problem is, when user uncheck the checkbox it should remove the data associated with the checkbox.
My code is :
<div id='compare_box'>
</div>
<div class="col-md-3 photo-grid " style="float:left">
<div class="well well-sm">
<a href="final.php?id=<?php echo $id;?>&name=<?php echo $title;?>" target="_blank">
<h4><small><?php echo $title; ?></small></h4>
</a>
<br>
<input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>">add to compare
</div>
</div>
Ajax call
<script type="text/javascript">
$(document).ready(function()
{
$(".compare").change(function() {
if(this.checked) {
var check = $(this).val();
$.ajax({
type: 'POST',
url: 'compare.php',
dataType : 'JSON',
data:{value : check},
success: function(data)
{
console.log(data);
$('#compare_box').append(data);
}
});
}
});
});

Use something like this to empty the contents of the DIV
$('#compare_box').empty()

better way is to keep the reference map, something like this
$(document).ready(function() {
var boxes = {};
$(".compare").change(function() {
var check = $(this).val();
var data = $(this).closest('.box').clone();
if (this.checked) {
boxes[check] = data;
$('#comparebox').append(boxes[check]);
} else if (!this.checked && boxes[check]) {
boxes[check].remove();
delete boxes[check];
}
});
});
EDIT - should be working (not tested)
var check = $(this).val();
if (this.checked) {
$.ajax({
type: 'POST',
url: 'compare.php',
dataType: 'JSON',
data: {
value: check
},
success: function(data) {
boxes[check] = $(data);
$('#compare_box').append(boxes[check]);
}
});
} else if(!this.checked && boxes[check]) {
boxes[check].remove();
delete boxes[check];
}
DEMO

Get select multiple values with JQuery

I have a problem with JQuery, I have a multiple select that i can populate in 2 ways, manually taking some value from another select with a add button, and dynamically, with parsing a json returned from a spring call.
I have no problem to take the value when I add it manually, but, when I populate dynamically the select, the JQuery code doesn't take any value although int the html code there're values in the select.
Here my code:
The empty html selects
<div id="enti_disp_box">
<label>Enti disponibili</label>
<select id="ente" multiple> </select>
<button class="btn" onclick="addEnteInBox();" type="button">Aggiungi</button>
</div>
<div id="enti_att_box">
<label>Enti attivi*</label>
<select id="entiAttivi" multiple></select>
<button class="btn" onclick="removeEnteInBox();" type="button">Rimuovi</button>
</div>
JQuery for populate the second select manually
function addEnteInBox(){
var selectedOptions = document.getElementById("ente");
for (var i = 0; i < selectedOptions.length; i++) {
var opt = selectedOptions[i];
if (opt.selected) {
document.getElementById("entiAttivi").appendChild(opt);
i--;
}
}
}
function removeEnteInBox(){
var x = document.getElementById("entiAttivi");
x.remove(x.selectedIndex);
}
JQuery for populate the second select dynamically
function getEntiByIdUtente(idutente) {
var action = "getEntiByidUtente";
var payload = {
"idUtente": idutente,
"action": action,
"token": token
};
$.ajax({
type: "POST",
url: '../service/rest/enti/management_utenti',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(payload),
resourceType: 'json',
success: function(obj, textstatus) {
obj = obj.trim();
var json = JSON.parse(obj);
//parse response
if (obj.stato == 'error') {
alert('Errore');
} else {
$('#entiAttivi').empty();
//fetch obj.data and populate table
$(json.data).each(function() {
$("#piva").val(this.piva);
$("#codiceipa").val(this.codiceipa);
$('#entiAttivi').append($('<option>', {
value: this.idente,
text: this.ragionesociale
}));
});
}
return json;
},
error: function(obj, textstatus) {
alert('Errore di comunicazione col server!');
}
});
}
JQuery for taking the value of the second select
var entiList = $("#entiAttivi").val();

This line seems to be wrong, it's not working for me
$('#entiAttivi').append($('<option>', {
value: this.idente,
text: this.ragionesociale
}));
would you try replacing by
$('#entiAttivi').append($('<option value="' + this.idente + '">' + this.regionesociale + '</option>');
The append, is trying to create an option with the json as parent, this is not working. please try my code.

jquery .change multiple textbox and select retrieve data from row to row

I have a code that will display select and textbox depending on the count of the loop. The select dropdown will display currencies on acronym format if selected example USD the textbox will display "US Dollars". on the second loop if I select JPY it will display Japan Yen on the textbox on the second row and so on. Is this possible on jquery?
Here is my code
<script>
$(document).ready(function(){
$('#acr').change(function(){
//get json + this.value get corresponding value on db
//retrieve data
});
});
</script>
<?php
foreach($data as $d) {
?>
<select name = "acr" id = "acr">
//Records from db
</select>
<input type = "text" readonly value = ""> <br>
<?
}
??

Yes. But first please give a name attribute to your textbox and assume its id is 'longName'. You may have two options:
option 1:
Save the currencies short name/Long name in select. JPY
code:
$('#acr').change(function(){
$('#longName').val($(this).val());
});
option 2:
$('#acr').change(function(){
var sel = $(this);
$.ajax({
url: "your url",
type: "POST",
data: 'data='+sel.val(),
dataType:'json',
success: function(data) {
//Do what ever you want. Data holds the response from server
},
error: function() {
//Error occured, handle it
}
});
});
Read more on ajax here