I have a dropdown which has a 'click' event where I call a rest service and update the options in the dropdown using jquery, So the problem is that the options are not getting updated in IE. It works fine in chrome & others.
sample code
<select class="dropdown">
<option value="1">Column1</option>
<option value="2">Column2</option>
</select>
$(.dropdown).click(function () {
var $dropdown = $(this);
var contrId = $(this).attr('id');
var selectedVal = $(this).val();
$($dropdown).empty();
$.ajax({
url: '#Url.Content("~/FakeAPI/GETDATA")',
dataType: "json",
method: 'POST',
data: { 'id': '10' },
}).done(function (data) {
// Clear drop down list
$($dropdown).empty();
// Fill drop down list with new data
var $option = $("<option />");
$option.attr("value", '').text('Select Column');
$($dropdown).append($option);
$(data).each(function () {
// Create option
var $option = $("<option />");
// Add value and text to option
$option.attr("value", this.Text).text(this.Value);
if (selectedVal == this.Text) {
$option.attr("selected", "selected");
}
// Add option to drop down list
$($dropdown).append($option);
});
});
});
}
Any suggestion would be helpful.
Working in I.E 9,10 and 11 tested
$(document).ready(function () {
$(".dropdown").click(function () {
var $dropdown = $(this);
var contrId = $(this).attr('id');
var selectedVal = $(this).val();
$($dropdown).empty();
$.ajax({
url: '#Url.Content("~/FakeAPI/GETDATA")',
dataType: "json",
method: 'POST',
data: {'id': '10'},
}).done(function (data) {
// Clear drop down list
$($dropdown).empty();
// Fill drop down list with new data
var $option = $("<option />");
$option.attr("value", '').text('Select Column');
$($dropdown).append($option);
$(data).each(function () {
// Create option
var $option = $("<option />");
// Add value and text to option
$option.attr("value", this.Text).text(this.Value);
if (selectedVal == this.Text) {
$option.attr("selected", "selected");
}
// Add option to drop down list
$($dropdown).append($option);
});
});
});
});
I think the issue is IE cache requests by mistake. Add cache:false to your ajax request and probably it fix the issue by adding _={timestamp} at the end of your requests.
$.ajax({
cache:false,
url: '#Url.Content("~/FakeAPI/GETDATA")',
dataType: "json",
method: 'POST',
data: { 'id': '10' },
Related
I have several select-box and data of each of them returns based on previous select-box option.
Previously i had 3 select-box and everything was working just fine, now i need to add extra select-box those old select-boxes still working fine but this new one returns TypeError: e.nodeName is undefined
screenshot
Maybe this image can explain better
Code
Javascript
To make code shorter and cleaner i removed unnecessary parts and commented what each part does.
The part of current issue is function substricsfunction(){
<script>
$(document).ready(function() {
$('#province').on('change', function() {
var provinceID = $(this).val();
//ajax cal to return city names when state name changes (no. 2 image above)
});
});
jQuery( document ).ready( function( $ ) {
$('body').on('change', '#city', function(e){
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
var cityID = $(this).val();
var weight = ["{{$totalWeight}}"];
if(cityID) {
$.ajax({
url: '{{ url('rajaajax') }}/'+weight+'/'+encodeURI(cityID),
type: "GET",
dataType: "json",
success:function(data) {
//return data in select-box (no.4 image above)
}
});
//custom function
myfunction();
substricsfunction();
}else{
$('select[name="postchoose"]').empty().append("<option value='' selected>Pilih</option>");
}
});
});
function myfunction(){
//return some more data in select-box (no.4 image above)
};
//newpart ( we work on this now )
function substricsfunction(){
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
var hfg = $(this).val();
if(hfg) {
$.ajax({
url: '{{ url('rajaajaxsubdistrict') }}/'+encodeURI(hfg),
type: "GET",
dataType: "json",
success:function(data) {
console.log(data);
//
$('select[name="subdistrict"]').empty().append("<option value='' selected>Pilih</option>");
$.each(data.data, function(key, value) {
$.each(value.data, function(key2, value2) {
$('select[name="subdistrict"]').append('<option id="subdistrict" class="form-control" value="'+ value2.subdistrict_id +'">'+ value2.subdistrict_name +'</option>');
});
});
//
}
});
}
};
//newpart
</script>
More to know
URL {{ url('rajaajaxsubdistrict') }}/'+encodeURI(hfg) which is equal to site.trg/rajaajaxsubdistrict/27 returns data as
So my error TypeError: e.nodeName is undefined isn't about back-end whatever is wrong is just about this function.
Any idea?
Solved
I changed var hfg = $(this).val(); to var hfg = $("#city option:selected").val(); and fixes my issue
I have 2 different data they load based on each other id what I try to do is to append my results as row bootstrap 3 based something like:
So far I can get 3 sort of my data successfully, all the problem I
have and need help with is how to append data as described in image above?
code
javascript
<script>
$(document).ready(function() {
$('select[name="selectset"]').on('change', function() {
var id = $(this).val();
if(id) {
$.ajax({
url: '{{ url('admin/selectset') }}/'+encodeURI(id),
type: "GET",
dataType: "json",
success:function(result) {
$.each(result, function(key, value1) {
// second data
$.ajax({
url: '{{ url('admin/findsubspecification') }}/'+value1['id'],
type: "GET",
dataType: "json",
success:function(data) {
$.each(data, function(key, value) {
$('div#dataaa').append('<div class="row"><div class="col-md-4" id="dataparent">'+value1.title+'</div><div class="col-md-8" id="datainfo">'+value.title+'</div></div>');
});
}
});
// second data
});
}
});
}else{
$('div#dataaa').append('select set');
}
});
});
</script>
html
<div id="dataaa"></div>
This is how I'm getting my data now:
Update
Well I have made it work so far. Remained one issue, and that is I cannot get all my data I only can get my first result.
Changed code
<script>
$(document).ready(function() {
$('select[name="selectset"]').on('change', function() {
var id = $(this).val();
if(id) {
$.ajax({
url: '{{ url('admin/selectset') }}/'+encodeURI(id),
type: "GET",
dataType: "json",
success:function(result) {
$.each(result, function(key1, value1) {
// second data
$.ajax({
url: '{{ url('admin/findsubspecification') }}/'+value1['id'],
type: "GET",
dataType: "json",
success:function(data) {
// Collect data as option
var helpers = '';
$.each(data, function(key, value) {
helpers = '<option value="'+value.id+'">'+value.title+'</option>';
});
var my_row = $('<div class="row">');
var my_html = '<div class="col-md-4">'+value1.title+'</div>';
my_html += '<div class="col-md-8"><select class="form-control" id="subs" name="subs[]">'+helpers+'</select></div>';
my_row.html(my_html);
$('div#dataaa').append(my_row);
}
});
// second data
});
}
});
}else{
$('div#dataaa').append('select set');
}
});
});
</script>
Update 2
As requested here is my first select option code
{{ Form::label('selectset', 'Select Set') }}
<select class="form-control" id="selectset" name="selectset">
<option value="">Select</option>
#foreach($selectsets as $selectset)
<option value="{{ $selectset->id }}">{{ $selectset->title }}</option>
#endforeach
</select>
change
$.each(data, function(key, value) {
helpers = '<option value="'+value.id+'">'+value.title+'</option>';
});
to
$.each(data, function(key, value) {
helpers += '<option value="'+value.id+'">'+value.title+'</option>';
});
because on each iteration, it overwrite its previous result
I have some page with form, which loading some data to POST when i submit it. Then it links user to the next page. On this page I catch data from POST, and I have two dropdownlists, where the second one depends on the first. The first get's value from POST data:
echo '<script type="text/javascript">
jQuery("#markid").val("'.$GLOBALS["i"].'"); </script>';
Where $GLOBALS["i"] = id from DB, which has kept in data from POST by previous page.
But it doesn't work for the second dropdownlist which depends on it:
echo '<script type="text/javascript">
jQuery("#comm").val("'.$GLOBALS["i1"].'"); </script>';
I think it can be from the part of code, which realises depending of the second dropdown list:
<script>
jQuery(function(){
var id = jQuery(".mark").val();
jQuery.ajax({
type:"POST",
url: "wp-content/com.php",
data: {id_mark: id},
success: function(data){
jQuery(".comm").html(data);
}
});
jQuery(".mark").change(function(){
var id = jQuery(".mark").val();
if(id==0){
}
jQuery.ajax({
type:"POST",
url: "wp-content/com.php",
data: {id_mark: id},
success: function(data){
jQuery(".comm").html(data);
}
});
});
Where "mark" - first dropdownlist, "comm" - the second one.
This is the first part of my problem.
The second: I have some value on the page which depends on the value of the second dropdownlist. I tried to:
jQuery(".comm").change(function(){
var id = jQuery(".comm").val();
if(id==0){
}
jQuery.ajax({
type:"POST",
url: "wp-content/pricecar.php",
data: {id_mark: id},
success: function(data){
jQuery(".price9").html(data);
var price1 = jQuery(".price1").val();
var price2 = jQuery(".price2").val();
var price3 = jQuery(".price3").val();
var price4 = jQuery(".price4").val();
var price5 = jQuery(".price5").val();
var price6 = jQuery(".price6").val();
var price7 = jQuery(".price7").val();
var price8 = jQuery(".price8").val();
var price9 = jQuery(".price9").val();
jQuery.ajax({
type:"POST",
url: "../wp-content/price.php",
data: {price1: price1,price2: price2,price3: price3,price4: price4,price5: price5,price6: price6,price7: price7,price8: price8, price9: data},
success: function(data){
jQuery(".summPrice").html(data);
}
});
}
});
But it works only one time, and i don't know why.
I'll be glad for any offers.
I don't have a full visibility of the rendered html and of the ajax responses, but I would give a try with:
Remove this lines
echo '<script type="text/javascript">
jQuery("#markid").val("'.$GLOBALS["i"].'");
</script>';
echo '<script type="text/javascript">
jQuery("#comm").val("'.$GLOBALS["i1"].'"); </script>';
And do something like this where you print the html
...
<select id="markid" data-val="<?php echo isset($GLOBALS["i"]) ? $GLOBALS["i"] : -1;?>"></select>
<select id="comm" data-val="<?php echo isset($GLOBALS["i1"]) ? $GLOBALS["i1"] : -1;?>"></select>
And in your javascript have something like
<script>
(function ($) {
//when everything is ready
$(fillUpCommOptions);
$(watchSelectsChanges);
function fillUpCommOptions() {
var id = $('#markid').data('val') ? $('#markid').data('val') : $('#markid').val();
$('#markid').removeAttr('data-val');//remove data-val, at next change event we want the select new val
$.ajax({
type: "POST",
url: "wp-content/com.php",
data: {id_mark: id},
success: function (data) {
//assuming data is something like
// '<option value="niceValue">nice value</option>
$("#comm").html(data);
if ($("#comm").data('val')) {
//apply values from post also for the second dropdown
// assuming that data contains and option with value == $("#comm").data('val')
$("#comm").val($("#comm").data('val'));
$('#comm').removeAttr('data-val');
$("#comm").change()//trigger change after setting the value
}
}
});
}
function watchSelectsChanges() {
$('#markid')
.off('change')//just in case, could not be needed
.on('change', fillUpCommOptions);
$('#comm')
.off('change')//just in case, could not be needed
.on('change', handleDependentValues);
}
function handleDependentValues() {
var id = $("#comm").val();
if (id) {
$.ajax({
type: "POST",
url: "wp-content/pricecar.php",
data: {id_mark: id},
success: function (data) {
jQuery(".price9").html(data);
var price1 = jQuery(".price1").val();
var price2 = jQuery(".price2").val();
var price3 = jQuery(".price3").val();
var price4 = jQuery(".price4").val();
var price5 = jQuery(".price5").val();
var price6 = jQuery(".price6").val();
var price7 = jQuery(".price7").val();
var price8 = jQuery(".price8").val();
var price9 = jQuery(".price9").val();
jQuery.ajax({
type: "POST",
url: "../wp-content/price.php",
data: {
price1: price1,
price2: price2,
price3: price3,
price4: price4,
price5: price5,
price6: price6,
price7: price7,
price8: price8,
price9: data
},
success: function (data) {
jQuery(".summPrice").html(data);
}
});
}
})
}
}
})(jQuery);
I have a dropdown which gets its value from a model and is first populated. On click of that dropdown, I populate other values using AJAX. I am able to populate the dropdown but once I select an option from the dropdown, it gets reset to first value in the dropdown. What I want is the dropdown to populate once on click and then function like a normal dropdown. How do I put a condition for it?
This is the code for initially setting the dropdown value with the defined value 'field.Value'
ddlValue = "<option value="+field.Value+ " selected='selected'>" + field.Value+"</option>";
<td><select id='#String.Format("selValue{0}", field.Field)' class='ddlValue'>#Html.Raw(ddlValue)</select></td>
And this is the AJAX function which populates it.
$('body').on('click', '.ddlValue', function () {
var target = event.target.id;
var rowId = $('#' + target).closest("tr").prop("id");
var field = $('#' + rowId).find(".fieldvalue").html();
$.ajax({
cache: false,
url: '#Url.Action("PopulateDropdown", "AdvancedSearch")',
type: "POST",
data: { Field: field }
}).done(function (data) {
var listb = $('#' + target);
listb.empty();
$.each(data.value, function (index, value) {
listb.append($('<option>', {
value: value,
text: value
}, '<option/>'))
});
});
});
If you want the ajax population to happen only once, you need to remove the event listener after it has occurred. Something like so:
$('.ddlValue').on('click', function () {
$(this).off('click'); //This removes the event after it has happened once.
var target = event.target.id;
var rowId = $('#' + target).closest("tr").prop("id");
var field = $('#' + rowId).find(".fieldvalue").html();
$.ajax({
cache: false,
url: '#Url.Action("PopulateDropdown", "AdvancedSearch")',
type: "POST",
data: { Field: field }
}).done(function (data) {
var listb = $('#' + target);
listb.empty();
$.each(data.value, function (index, value) {
listb.append($('<option>', {
value: value,
text: value
}, '<option/>'))
});
});
});
Please note, the follow will not work:
$('body').on('click', '.ddlValue', function () {
$(this).off('click');
...
This seems like a silly way of doing this. You could do the same operation on loan without having any interaction with the user to populate the dropdown.
That being said to fix your solution simply add a global variable
$first = true
$('body').on('click', '.ddlValue', function () {
if($first) {
$first = false
var target = event.target.id;
var rowId = $('#' + target).closest("tr").prop("id");
var field = $('#' + rowId).find(".fieldvalue").html();
$.ajax({
cache: false,
url: '#Url.Action("PopulateDropdown", "AdvancedSearch")',
type: "POST",
data: { Field: field }
}).done(function (data) {
var listb = $('#' + target);
listb.empty();
$.each(data.value, function (index, value) {
listb.append($('<option>', {
value: value,
text: value
}, '<option/>'))
});
}
});
});
I have a jQuery dialog that needs to be opened and populated with data from a database. The dialog has in it drop downs that when in a "new" mode (not editing for re-saving) cascade.
How can I load the dialog with the values from the database, while at the same time causing the cascading to happen.
I have tied using the onfocus event of the dialog when the dialog is in "edit" mode, but the focus hit every time an element gets focus. Didn't work without being sneaky with the editing mode.
I have tried opening the dialog and using jQuery to set the dropdown, which works, but then the cascading does work.
For the cascading I am using .change on the the different dropdowns.
Not sure if the code is going to help, but will post some to itterate the jQuery functionality I am using.
The question is: How do I open a dialog, load dropdowns with information from the server and have the .change functionality work?
$('#collectDD').change(function(){
// first change the item drop down list
var collection = $('#collectDD').val();
data = "coll=" + collection + "&action=getItems&func=";
$('#addCollection').text(collection);
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
$('#itemDD').empty();
$("#itemDD").html(html);
// now update the function collection dropdown
data = "coll=" + collection + "&action=getFunction";
}
});
Collection DD HTML
<select id="collectDD" name="collectionDD">
<option>Select Collection</option>
<option>Option1</option>
</select>
This doesn't exactly match up with your tag names, and I made a little change to the data string, but I think it's in line with what you're looking for
<div id="dialogbox">
<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>
</div>
<script type="text/javascript">
$(document).ready( function() {
$( "#dialogbox" ).dialog({
open: function(event, ui) {
var s1 = $("#s1").empty();
var s2 = $("#s2").empty();
var s3 = $("#s3").empty();
s1[0].enabled = false;
s2[0].enabled = false;
s3[0].enabled = false;
//load first dropdown from the database
var data = "coll=dropdown1&val=&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s1.html(html);
s1[0].enabled = true;
}
});
//load the second DD when the first changes
s1.change( function() {
s2[0].enabled = false; //disable until after ajax load
s3[0].enabled = false;
data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s2.empty().html(html);
s2[0].enabled = true;
}
});
});
s2.change( function() {
if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
s3[0].enabled = false;
data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s3.empty().html(html);
s3[0].enabled = true;
}
});
}
});
}
});
});
</script>
UPDATE
Here is an example with change functions in their own functions
<div id="dialogbox">
<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>
</div>
<script type="text/javascript">
var s1, s2, s3, data;
$(document).ready( function() {
s1 = $("#s1").empty();
s2 = $("#s2").empty();
s3 = $("#s3").empty();
$( "#dialogbox" ).dialog({
open: function(event, ui) {
s1[0].enabled = false;
s2[0].enabled = false;
s3[0].enabled = false;
//load first dropdown from the database
data = "coll=dropdown1&val=&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s1.html(html);
s1[0].enabled = true;
}
});
//load the second DD when the first changes
s1.change( changeDD1 );
//load the third DD when the second changes
s2.change( changeDD2 );
}
});
});
function changeDD1() {
s2[0].enabled = false; //disable until after ajax load
s3[0].enabled = false;
data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s2.empty().html(html);
s2[0].enabled = true;
}
});
}
function changeDD2() {
if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
s3[0].enabled = false;
data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s3.empty().html(html);
s3[0].enabled = true;
}
});
}
}
</script>