We Keep Coding

Problem selecting an item after building the select options with AJAX

I use this javascript to select a specific option (the option value being specified within a hidden element):
$("select").each(function() {
var id = $(this).attr('id');
var source = 'input:hidden[name=select_'+id+']';
if ($(source).length) {
var selected = $(source).val();
$(this).val(selected).change();
}
});
This works fine when the options are hard coded in the HTML source.
I now need to populate the options with an AJAX call, I use the below method:
select : function(ctrl,id) {
var call = '/'+ctrl+'/'+$("#auth input[name=verify]").val();
$.getJSON(call, function(result) {
$.each(result, function() {
$('#'+id).append($("<option />").val(this.id).text(this.title));
});
});
},
I process the select method (AJAX) on page load, and the options populate fine. But when I then try to select the desired option, the browser defaults to the first option.
I have tested what is happening by sticking some alerts around the code as thus:
alert($(this).val(selected)); // A
alert($(this).val()); // B
$(this).val(selected).change();
alert($(this).val()); // C
When the options are hard coded I get A=3, B=null, C=3 i.e. it works
When the options are populated via AJAX I get A=3, B=null, C=null i.e. it fails
I am guessing that I need to trigger some kind of change() event after populating the option list with AJAX. I have tried (a bit overkill I know):
$('#'+id).append($("<option />").val(this.id).text(this.title).change());
&
$('#'+id).append($("<option />").val(this.id).text(this.title)).change();
Any ideas? Thx

Problem solved.
Although I was triggering the code in the correct order (in theory), because of javascripts event driven behaviour the AJAX call was not completing until after my select initialisation had finished. So I moved the code to set the selected option into the AJAX call and voila.
select : function(ctrl,id) {
var call = '/'+ctrl+'/'+$("#auth input[name=verify]").val();
$.getJSON(call, function(result) {
$.each(result, function() {
$('#'+id).append($("<option />").val(this.id).text(this.title));
});
var source = 'input:hidden[name=select_'+id+']';
if ($(source).length) {
var selected = $(source).val();
$('#'+id).val(selected).change();
}
});

How to select option from second select after it loads with javascript?

Yeah, I know, likely been answered, but can't find it or figure out how to successfully search for it, so, 45 minutes later i am succumbing to the potential of flaming...so go easy on me, ok?
It is a simple problem, and my issue is timing. One select holds Countries, it is bound to State/Province select. Change Country, State/Province loads appropriately via a separate function. Use a mouse to select from State/Province, perfection. Use JavaScript ..uh oh. Problem is I need to force my JavaScript to wait for the browser to load the State/Province data before I can target and select it. SetTimeout or using a Promise just seems... inelegant? How many seconds does a browser need to load 50 states or 8 provinces - on a new rocket or an old turtle? Is there a way to just know when the second select finishes loading when the load is in a separate function? Example is jquery, but any flavor will do.
$('#country option[value=US]').prop('selected', 'selected').change();
$('#stp option[value=VT]').prop('selected', 'selected').change();
Adding more clarification based on the responses so far.
Whena user changes the Country, the State/Province loads in the time it takes them to move their mouse down the page allowing them to select.
Now I have implemented a helper that pulls the user's address from BigData using a phone number. This happens in a dialog box. When the user clicks "Accept" this code then fires
function setFormwithDF(){
d={};
// data from dialog
d.address=$('#oaddress').text();
d.city=$('#ocity').text();
d.state=$('#ostate').text();
d.zip=$('#ozip').text();
d.country=$('#ocountry').text();
$('#s_country option[value='+d.country+']').prop('selected', 'selected').trigger('change');
// doesn't matter if this is .change() or .trigger('change')
$('#s_addr1').val(d.address).change();
$('#s_addr2').val('').change();
$('#s_city').val(d.city).change();
$('#s_st option[value='+d.state+']').delay(3000).prop('selected', 'selected');console.log(d.state);//getting a good value here - delay is desperation
$('#s_zip').val(d.zip);
$('#s_phone').val($('#dfsearch').val());
$( "#dfsearchdialog" ).dialog('close');
}
And for completeness, here is the loading code. Bunch of extras in here that don't pertain to the issue though
$('#s_country,#b_country').change(function(e){
var st="";
var addrType="S";
var loadObj=$('#shipstp');
if( $(this).attr("id") == 'b_country'){
loadObj=$('#billstp');
addrType="B";
}
if( typeof(e.st) != 'undefined'){st=e.st;console.log(5)}// this data is passed during the trigger() code
uObj={c:$(this).val(),nc:Math.random(),t:addrType,p:st};
uParam=$.param(uObj);
loadObj.load('/stubs/state-n-province.cfm',uParam);
});

As per my understanding, you dont want user to select state until the state's are getting loaded. After loading only user should be able to select the state.
And I am assuming you are using AJAX to load the State.
If this is the issue :
you can use loading image, which will be displayed until the success has not been return and data has not been map to element.
In this case you can use below sample code :
function getData(p){
.......
$('#loadingmessage').show(); // show the loading message.
$.ajax({
url: "loadData.php?id=<? echo $id; ?>",
type: "POST",
cache: false,
data: "&page="+ page,
success : function(html){
$(".content").html(html);
$('#loadingmessage').hide(); // hide the loading message
}
});

I believe a Promise is what you need. It will allow you exactly
to just know when the second select finishes loading when the load is
in a separate function
$('#country').change(function() {
$("#stp").empty().append("<option>...</option>");
loadStates($(this).val())
.then(states => $("#stp")
.empty()
.append(states.reduce((acc, cur) => acc + `<option>${cur}</option>`, "")));
});
$('#country').change();
function loadStates(country) {
console.log(`Loading states for country: ${country}...`);
//setTimeout here just emulates your long loading process
return new Promise((res, rej) => setTimeout(() => {
console.log(`States for country: ${country} are loaded!`);
res(["state1", "state2", "state3"]);
}, 3000));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option>US</option>
<option>UK</option>
<option>RU</option>
</select>
<select id="stp">
</select>
For your actual use case you would write something like:
return new Promise((resolve, reject) => {
var states = yourLoadingFunction();
resolve(states);
});
UPDATE: Given your latest example, I think I understand your problem now. I suggest you to put your loading code into a separate function, for example:
function countryChanged(e, callback) {
var st="";
var addrType="S";
var loadObj=$('#shipstp');
if( $(this).attr("id") == 'b_country'){
loadObj=$('#billstp');
addrType="B";
}
loadObj.prop("disabled", true);
// this data is passed during the trigger() code
if( typeof(e.st) != 'undefined'){st=e.st;console.log(5)}
uObj={c:$(this).val(),nc:Math.random(),t:addrType,p:st};
uParam=$.param(uObj);
loadObj.load('/stubs/state-n-province.cfm', uParam, function() {
// when the loading is complete, we enable the second select and
// call the callback function
loadObj.prop("disabled", false);
if (callback) callback();
});
}
Note that jQuery .load() method has a third argument which is a callback function that will be called when the loading is complete.
Then you can use this function in two ways:
1) when the user changes the country:
$('#s_country,#b_country').change(countryChanged);
2) in your setFormwithDF() function:
function setFormwithDF(){
d={};
// data from dialog
d.address=$('#oaddress').text();
d.city=$('#ocity').text();
d.state=$('#ostate').text();
d.zip=$('#ozip').text();
d.country=$('#ocountry').text();
$('#s_country option[value='+d.country+']').prop('selected', 'selected');
//instead of calling .trigger('change') just call countryChanged function
countryChanged({st: "whatever you pass during the trigger() code"}, function() {
//this will happen only after .load() is complete
$('#s_st option[value='+d.state+']').prop('selected', 'selected');
});
$('#s_addr1').val(d.address).change();
$('#s_addr2').val('').change();
$('#s_city').val(d.city).change();
$('#s_zip').val(d.zip);
$('#s_phone').val($('#dfsearch').val());
$( "#dfsearchdialog" ).dialog('close');
}

Dynamic table onclick

I have the following issue i would like to get some help for.
There is a combobox (select) where i choose an item and i get back a dinamic table from php. The table contains example names. Firstname, Lastname and ID(which is hidden). When i click on the table i get the value of the ID of the selected row. So far it is works fine. The problem that the event doesnt want to fire for first. After that it works fine but i need it for first as i have a function which auto click on the first row but this doesnt work until i solve this problem. I made a code which works fine with a html table. But not with the dinamic one. Please help.
Here is the code works fine with dinamic table but just after 2nd click:
function nametableclick() {
var rows = document.getElementById("nametable").rows;
for(var i = 0; i < rows.length; i++)
{
rows[i].onclick = function()
{
data=(this.cells[3].innerHTML);
var data = data;
$.ajax({
type: "POST",
url: "list.php",
data: "data="+data,
Type: "json",
success: function(msg) {
msg = JSON.parse(msg);
$("#dob").html(msg.dob);
$("#age").html(msg.age);
$("#sex").html(msg.sex);
}
});
};
};
};
And here is the code works well but just with html table:
(Actually is same but i use onload)
onload = function() {
var rows = document.getElementById("nametable").rows;
for(var i = 0; i < rows.length; i++)
{
rows[i].onclick = function()
{
data=(this.cells[3].innerHTML);
var data = data;
$.ajax({
type: "POST",
url: "list.php",
data: "data="+data,
Type: "json",
success: function(msg) {
msg = JSON.parse(msg);
$("#dob").html(msg.dob);
$("#age").html(msg.age);
$("#sex").html(msg.sex);
}
});
};
};
$("#nametable tr:eq(0) td:first-child").click();
};
When i use the onload function for the dinamic table it just doesnt work at all.
Thanks for any help in advance.

This question does not suit well for an answer. Instead, I'll do some code analysis.
onload = function() ... - well not terrible but kinda sloppy. Also looks like this is possible a global namespace leak. I'm going to assume this should be window.onload in which case I'd wonder why jQuery's ready event isn't used $(function() { ... }).
var rows = document.getElementById("nametable").rows;
for(var i = 0; i < rows.length; i++) {
rows[i].onclick = function() { ... };
}
Ok now were again running away from jQuery as if it was diseased some how. And then were looping over the array of rows only to construct a new function each time and attach them to the onclick (again avoiding jQuery)? Constructing functions inside a loop is a very bad idea and most linters will complain loudly about that. A suggestion:
$('#nametable tr').on('click', function() { ... });
This will attach the click handler to all the <TR> rows in the table with the id="nametable" attribute.
data=(this.cells[3].innerHTML);
var data = data;
My heart skipped a beat here!. First your pulling out the HTML content into (what I thought was a global variable) until I saw the next line and realized we have variable hoisting. But wait your assigning data to itself. Lastly, the name data doesn't provide any context as to the content of the innerHTML. Since I don't have the data I could only guess so in these examples I'll leave it as data. In the future think about picking names which provide context to their content and use. That way when you read the code you don't have to hunt for what the variables are for or how to use them.
var data = $(this, 'td:eq(3)').text();
Finally, the use of data is to directly concatenate it into a post request. I would assume HTML is not desired in that server API. Not to mention the avoidance of jQuery's parameter building by forcing the data to a string. Instead use a JS object:
$.ajax({
type: 'POST',
url: 'list.php',
data: {data: data} // This is a very poorly designed server API
}).then(function(data) {
...
});
Also, the use of Type: 'json' suggests that your server is not returning proper HTTP headers. First off there is no Type property for jQuery's ajax instead I think you wanted dataType. However the need for a dataType suggests the server is not sending the proper headers. If the PHP script were to return application/json instead of plain/text then jQuery could parse the response for you avoiding the need for JSON.parse on your own which can be a bit error prone.
$("#dob").html(msg.dob);
$("#age").html(msg.age);
$("#sex").html(msg.sex);
Be warned by using html() your directly injecting HTML into the DOM that you received from a third party. This is a big cross site scripting vulnerability. Use text() instead to push data into the DOM unless you know and can assert the trust of your server and the connection to it (SSL to avoid man in the middle). Probably not important for this example but still worth keeping in mind because it's far to easy to have this show up in the wild.
$("#nametable tr:eq(0) td:first-child")
When you have a selector like this it is far easier and readable to instead provide contextual hooks instead of relying on the make up of the DOM. Add things like class="clickable-row" or class="person-data dob" to your HTML markup. It makes for maintenance and readability.

Thanks for the quick reply. Im sure if there are lot of mistakes as i just started to learn this(i mean php html ajax ect.) a few weeks ago so i dont clearly understand everything and i use things i should not use or should do it another way. But there is a simple program i would like to make it done and learn from that. So when i dont know something im trying to get some info (like: w3schools.com) or check other topics which similar what im looking for.
Sorry i left there the
Var data = data;
My mistake. Dont need there. i was trying out something before and left there. Does not make any different anyway.
next:
The onload = function() {
i found in another topic as solved result and it works with a static table but not with dynamic.
I have tried the following. i did not mentioned:
window.onload = nametableclick;
function nametableclick() {
data here
}
But does not work with dynamic table either.
Next:
var rows = document.getElementById("nametable").rows;
for(var i = 0; i < rows.length; i++)
{
rows[i].onclick = function()
{
data2=(this.cells[3].innerHTML);
What it does for me it finds the selected row and comes back with the value of the 3rd(actually 4th) cell which is the ID in my prog. I need this cos i want to sent this value to the php to get all the data from the table where ID = the value. And it works fine.
As i mentioned the prog works fine even if it is not the best way to do it. Slowly i gonna learn how to do it better way. But at the moment the only problem with that is that the dynamic table onclick event fires only after the 1st click.
Thanks and sorry if im a bit hard case. :-)))
Oh 1 more thing:
"First off there is no Type property for jQuery's ajax instead I think you wanted dataType."
For some reason if i type dataType it just does not work at all. I have no idea why. I watched some training videos and read some short courses about ajax and some of them mentioned using dataType some of them just simple type. I followed everything but did not worked for me. i spent like 5 hours another day to find out why actually i have a topics here with that question as well.
get data from mysql with ajax and json into different textareas
And accidently i tried with uppercase T once and it worked. Have no idea why.

Appending new results to an open jQuery autocomplete menu

I have an app in which I have multiple search sources. Previously, the users had to choose in what source to search in before searching. If they did not choose, the app would default to one of the options.
However, now they want to search in all the sources at the same time. This is fine enough, but the problem is that when one of the searches returns, it overwrites the previous search result. Pretty much expected behavior. What I basically want is to append the new results to the already open autocomplete menu, instead of overwriting the old results. Naturally, the autocomplete menu would have to empty when it closes.
I guess that this is possible to do, but what approach is the best? I could just have an array I guess, which I append results to and then overwrite _renderMenu to use this array instead of the items one that is passed to the function. Then empty said array at the close event.
Is this the best way to go though? Or is there a more elegant solution?
Some code:
Ok, so searchAction is called by jquery autocomplete eventually. In collection.search I do the ajax call, here the URL is created based in the this parameter, then respondWhithData is called and maps the search result to a proper format (ie value and label for the autocomplete menu). After reponse is called from respondWithData, jquery automagically renders the resultsmenu. Thus, I probably have to overwrite the reponse event function as well as the _renderMenu and possibly _renderItem, yes?
searchAction: function(searchTerm, collection, response){
var self = this;
$.when(collection.search(searchTerm, this)).then(function(data) {
self.respondWithData(data, response);
});
},
respondWithData : function(data, response) {
if (data.length > 0) {
var responseVal = _.map(data, this.mapData);
this.checkResponseCount(responseVal);
response(responseVal);
}
else {
response(this.emptyResult());
}
},
To be clear, the problem is not the multiple search itself, but rendering the asynchronos results. I want to render the first results that come back, and then appends the rest as soon as they are returned from the server.
Edit 2:
Just tried to edit ui.content in the autocompleteresponse event, but any edit does not take once it renders for some reason...
Edit 3: Ah, ui.content can only be modified directly, not changed. If I push every single change instead of concating two arrays ui.content shows what I want.
It works I guess, but its not perfect.

I can figure how looks your scenario but I'm guessing:
You should have like:
function search1() {
$.ajax({ ...
success: function(data) {
$('#myResultsDiv").html(data)
}
});
}
etc
Instead of overwritting the #myResultsDiv you need to Append the results like:
function search1() {
$.ajax({ ...
success: function(data) {
$('#myResultsDiv").append(data)
}
});
}
Edit: You can also do something like this:
var resultsArray = [];
var searchDone = 0;
var totalSearchs = 5; //assuming 5 searches
function search1() {
function search1() {
$.ajax({ ...
success: function(data) {
//APPEND data to resultsArray
searchDone++;
if(searchDone==totalSearch) //syncronize the 5 searchs before render
renderSearchs(resultsArray);
}
});
}

My AJAX is only firing once,

I ahave some ajax that is fired when a checkbox is clicked, it essentially sends a query string to a PHP script and then returns the relevant HTML, however, if I select a select it works fine if I then slect another checkbox as well as the previous I get no activity what so ever, not even any errors in firebug, it is very curious, does anyone have any ideas?
//Location AJAX
//var dataObject = new Object();
var selected = new Array();
//alert(selected);
$('#areas input.radio').change(function(){ // will trigger when the checked status changes
var checked = $(this).attr("checked"); // will return "checked" or false I think.
// Do whatever request you like with the checked status
if(checked == true) {
//selected.join('&');
selected = $('input:checked').map(function() {
return $(this).attr('name')+"="+$(this).val();
}).get();
getQuery = selected.join('&')+"&location_submit=Next";
alert(getQuery);
$.ajax({
type:"POST",
url:"/search/location",
data: getQuery,
success:function(data){
//alert(getQuery);
//console.log(data);
$('body.secEmp').html(data);
}
});
} else {
//do something to remove the content here
alert($(this).attr('name'));
}
});

I see you are using the variable checked = $(this).attr("checked"); I think this might be a problem because checked is a standard JS attribute native to JS. You can compare checked normally on an element and see if it is true or false. I would start by changing the name of your variable and move on from there.
The other thing that could be happening is you might be losing your listener which might be caused by your variable selected. You do not need to declare selected outside your listener. Just declare it inside when you set it.
And if THAT doesn't help, providing some markup would help debug this issue because it seems like there is a lot going on here.
Good luck.

I turned out that because my ajax loads in a new page on success the actions were not being put on the elements as they were only being loaded once on DOM ready, I moved the all the script into a function and call that on DOM Ready now and it works great.