Can I use $(this).parentsUntil()... after a $.post?
I need to remember what select element from the DOM changed and then append the information collected from my PHP to next select.
//OPTION SELECTED
$('body').on('change','.provincias, .partidos', function(e) {
var idSelect = $(this).attr('id');
var dataSelect = $(this).select2('data');
var value = dataSelect.id;
$.post('php/select/script.php', {id:idSelect, id_provincia:value, id_partido:value } , function(respuesta) {
data = JSON.parse(respuesta);
if(data.control == 0){
alert(data.error)
window.location.replace(data.url);
}else{
if(idSelect == data.thisSelect){
for(var u=0; u<data.array1.length; u++){
$(this).parentsUntil('.formRow').next().children(data.nextSelect).append('<option value="' + data.array1[u].id + '">' + data.array1[u].nombre + '</option>');
}
}else if(idSelect == data.thisSelect){
for(var t=0; t<data.array1.length; t++){
$(this).parentsUntil('.formRow').next().children('".' + data.nextSelect +'."').append('<option value="' + data.array1[u].id + '">' + data.array1[u].nombre + '</option>');
}
}
}
});
});
The typical solution is to define another variable to hold the value of this, e.g. self, or in this case, you might want to call it target:
...
var target = this;
$.post('php/select/script.php', {id:idSelect, id_provincia:value, id_partido:value } , function(respuesta) {
// Use target here.
}
just save the $(this) in a variable.
$('body').on('change','.provincias, .partidos', function(e) {
var el = $(this);
...
el.parentsUntil('.formRow').next().children(data.nextSelect).append('<option value="' + data.array1[u].id + '">' + data.array1[u].nombre + '</option>');
Related
Code doesn't work. Array is correct but func append and $("#pairId").attr("disable", 0); doesn't work.
function setClientCur(clientcur) {
var coCurList = JSON.parse('<?=json_encode($this->To)?>');
var currClientCurr = coCurList[clientcur];
$("#pairId").attr("disable", 0);
for (var arg in currClientCurr) {
$("#pairId").append('<option value="' + currClientCurr[arg]['pairId'] + '">' + currClientCurr[arg]['coCurTitle'] + '</option>');
}
}
$("#pairId").attr("disable", 0);
This is not the way how it is done.
You can do it like this:
$("#pairId").prop("disabled", false);
I am referring to another question display select options based on previous selections
I have while loop to fill the var data and inside a foreach loop to give the sub-menu and all work fine, var data = {'B|1':['B5|1','B4|2']
now after displaying menu1 How do I display second one, am just stopped there.
my code is:
for (var i in data) {
var ii = i.split('|');
$('#menu1').append('<option value=' + ii[1] + '>' + ii[0] + '</option>');
}
$('#menu1').change(function () {
var key = $(this).val();
$('#menu2').empty();
for (var i in data[key]) {
var ii = data[key][i].split('|');
$('#menu2').append('<option value=' + ii[1] + '>' + ii[0] + '</option>');
}
}).trigger('change');
menu1 is ok, now I need to show #menu2 with the value and text ??
This may help you
$('#menu1').change(function() {
var key = $(this).val();
var keyText = $('#menu1 :selected').text();
$('#menu2').empty();
for (var i in data[keyText +"|" + key]) {
var ii=data[keyText +"|" + key][i].split('|');
$('#menu2').append('<option value='+ii[1]+'>' + ii[0] + '</option>');
}
}).trigger('change');
I can't figure out why am I getting undefined when trying to console.outthe iUsedId variable from the code below.
Here I attatch the user id to data-iUserId.
var aUsers = [];
for( var i = 0; i < aUsers.length; i++ ){
$("#lblUsers").append('<tr><th scope="row">'+aUsers[i].id+'</th><td>'+aUsers[i].username+'</td><td>'+aUsers[i].firstName+'</td><td>'+aUsers[i].lastName+'</td><td>'+aUsers[i].email+'</td><td>'+"<span data-iUserId='"+aUsers[i].id+"'</span><input type='checkbox' id='chk_"+i+"'"+'</td></tr>');
}
And here I am trying to use the data from the data attribute, but in the console all I get is undefined.
$(document).ready(function() {
$("#remove").on("click", function() {
$('input:checked').each(function() {
$(this).closest('tr').remove();
var iUserId = $(this).attr('data-iUserId');
console.log(iUserId);
for (var i = 0; i < aUsers.length; i++) {
if (iUserId == aUsers[i].iUsersId) {
aUsers.splice(i, 1);
}
}
});
});
});
Any gueses? Please help!
You are deleting the parent with the containers, then trying to access the element.
removing the parent should be in the last step:
$(document).ready(function() {
$("#remove").on("click", function() {
$('input:checked').each(function() {
var iUserId = $(this).closest('span').attr('data-iUserId');
console.log(iUserId);
for (var i = 0; i < aUsers.length; i++) {
if (iUserId == aUsers[i].iUsersId) {
aUsers.splice(i, 1);
}
}
$(this).closest('tr').remove();
});
});
});
Also, consider the comment of #pBuch
The reason is you are looping over the checkboxes and not the span's which have the attribute you are trying to access.
$(this) refers to the checkbox and not the span in the each method you are using:
$('input:checked').each(function() {
// Inside this each statement $(this) refers
// to the the current 'input:checked' element being accessed
});
You should put the data-iUserId attribute on the checkbox since you are accessing that element.
Also! You are missing the closing '>' on the opening span tag:
<span data-iUserId='"+aUsers[i].id+"'</span>
var aUsers = [];
//...somehow populate array...
// We have to assume here that the array got populated
for (var i = 0; i < aUsers.length; i++) {
$("#lblUsers").append('<tr><th scope="row">' + aUsers[i].id + '</th><td>' + aUsers[i].username + '</td><td>' + aUsers[i].firstName + '</td><td>' + aUsers[i].lastName + '</td><td>' + aUsers[i].email + '</td><td>' + "<span data-iUserId='" + aUsers[i].id + "'></span><input type='checkbox' id='chk_" + i + "'" + '</td></tr>');
}
$(document).ready(function() {
$("#remove").on("click", function() {
$("#lblUsers").find('input[type="checkbox"]:checked').each(function() {
// fixed to get the element with the data
var iUserId = $(this).siblings('[data-iUserId]').data('iuserid');
console.log(iUserId);
for (var i = 0; i < aUsers.length; i++) {
// bad practice to use a global aUsers
if (iUserId == aUsers[i].iUsersId) {
aUsers.splice(i, 1);
}
}
$(this).closest('tr').remove();
});
});
});
I want add "All" option to the existing dropdown as a first option. Pls help me
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}
I want "All" to be the first option in select dropdown
Instead of empty() use .html() and pass the html of the All Option. This will clear the select first then will add all option and then will add other options, and will save you an unnecessary .empty() operation.
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.html('<option value="'+all+'">All</option>');
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
Try this: You can add ALL option just right after emptying the output variable as shown below -
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
output.append("<option value='ALL'></option");//add here
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}
Try this:
$('#mysampledropdown').empty();
$.each(response.d, function(key, value) {
$("#mysampledropdown").append($("<option></option>").val(value.ID).html(value.text));
});
$('<option>').val("").text('--ALL--').prependTo('#mysampledropdown');
I want to pass the selected value in select element in variable idd and then use it later. But it is not getting stored in the variable. I tried to check the value in the alert function but even alert function is not getting called.
<script type="text/javascript" charset="utf-8">
$(function(){
$("select.ctlJob").change(function(){
$.getJSON("select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
var idd=$(this).val();
//alert(idd);
$('select#'+ idd).html(options);
})
})
})
</script>
You are not able to get the value as the this in your context does not refer to the select. You'll need to do the following:
<script type="text/javascript" charset="utf-8">
$(function(){
$("select.ctlJob").change(function(){
var selectBox = $(this);
$.getJSON("select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
var idd=selectBox.val();
//alert(idd);
$('select#'+ idd).html(options);
})
})
})
</script>
Try this - (moved var idd=$(this).val(); outside of getJSON)
<script type="text/javascript" charset="utf-8">
$(function(){
$("select.ctlJob").change(function(){
var idd=$(this).val();
$.getJSON("select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
//alert(idd);
$('select#'+ idd).html(options);
})
})
})
</script>
This is a scoping problem, and, you only need to access the selected value once. This code accesses the value in the change handler, then uses it in the getJSON response handler, which is a child-scoped function. All child-scoped functions have access to their parent scopes, which is why val is defined in the response handler function.
$(function(){
$("select.ctlJob").change(function(){
var val = $(this).val();
$.getJSON("select.php",{id: val, ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
$('select#'+ val).html(options);
});
})
})