I have very basic JS skills, so please excuse me if I'm trying to fix something what doesn't need fixing.
I use select2 dropdown. When user selects any option, it gets posted to remote file, which returns possible options (in JSON format) to be displayed in 2nd (dependent) dropdown.
1st select looks following:
<select name="restaurant_id" id="restaurant_id">my_options_go_here</select>
2nd (dependent) select looks:
<select name="division_ids_array[]" id="division_ids_array" multiple="multiple"></select>
And here's JS code:
$(function () {
function ajax_post_data_get_divisions(parameters) {
$.ajax({
method: "POST",
url: "ajax.php",
cache: false,
data: parameters,
success: function(data) {
var dropdown_options=$('#division_ids_array');
dropdown_options.empty();
var dropdown_options="";
$.each(data, function(key, val) {
dropdown_options+='<option value="'+val.division_id+'" '+val.selected+'>'+val.division_name+'</option>';
});
$(dropdown_options).appendTo("#division_ids_array");
}
});
}
$('#restaurant_id').on("change", function(e) {
parameters=$("#my_form_id").serialize();
ajax_post_data_get_divisions(parameters);
});
});
Everything works fine, but I somehow believe these lines are excessive:
var dropdown_options=$('#division_ids_array');
dropdown_options.empty();
var dropdown_options="";
Please excuse my ignorance, but it looks variable dropdown_options gets created first, then it gets set to empty, and then the same variable is created again?
Unfortunately, if I remove at least one line, nothing works. For example, if I try to simply code to:
var dropdown_options=$('#division_ids_array');
dropdown_options.empty();
dependent dropdown remains empty. Is it an error in my code?
Related
I have the following code:
var zoneListEl = $("#zones-list"),
zoneListPopupEl = $("#zones-list-popup");
$.ajax({
type: 'GET',
url: 'https://my-domain.com/api/v1/zone/get-zone-by-ip'
}).then(function (data) {
var zone = data.data.zones,
option = new Option(zone.name + ", " + zone.abbreviated_state_name, zone.id, true, true);
zoneListEl.append(option).trigger('change');
// zoneListPopupEl.append(option).trigger('change');
});
The code above works well. I mean, on the page load that ajax call happens and puts the response as an option inside the $("#zones-list") (which is a select element) as a default value.
My problem is, I have two different select elements that I want to do the same for both. When I uncomment the following line
zoneListPopupEl.append(option).trigger('change');
Then the code doesn't work (without throwing error) and I cannot see any default value (<option>) for neither selects. Why? Why when I do that for one select it works well but for two selects, it doesn't?
Update: I set that line inside setInterval like this:
setInterval(function(){ zoneListPopupEl.append(option).trigger('change'); },3000);
In this case, the default value (option) will be shown for zoneListEl on page load and after 3 sec it does away.
So I made a list of string in my c# .net application and I would like to store this list in a html dropdown. First of, I have no idea if I have done it right in my view, I have set my list but I have no idea if there are steps missing. My code is as follow :
CalendarFolder calendar = ewsconn.Calendar;
ExchangeService service = ewsconn.Service;
Calendars = ewsconn.Calendars;
foreach (var c in Calendars)
{
calendarNames.Add(c.DisplayName);
}
foreach (var s in calendarNames)
{
Response.Write(s + "<br />");
}
getCalendarList(calendarNames);
This is a list of every calendar folder names from x user in Microsoft exchange api. I need to use that list in a html dropdown to use it later on. Do I return it properly? Is there any steps I am missing along the way? My getCalendarList only returns the list I give it, it does nothing special.
In my javascript, the only value I am capable of getting is the Response.write from my code above. See code below:
$.ajax({
url: '/domain/Crm/getCalendars.aspx?email=' + useremail,
cache: false,
contentType: false,
processData: false,
type: 'POST',
dataType: "html",
success: function (data) {
alert(data);
}
});
Now I know there is a lot missing here, but I know I need to convert my c# list into an array to then use it in my html code, but how do I do it?
I have tried this from the research I made :
var array = #Html.Raw(Json.Encode(getCalendars.calendarNames));
for(var i = 0; i < array.length; i++) {
alert(array[i]); // should display "calendar1" then "calendar2" etc
but to be honest I don't know the proper syntax and I couldn't not get it to work.
Kind of a long wall of text but some help would be greatly appreciated.
Thank you!
#Html.Raw(Json.Serialize(--C# list--)) should work, if your C# list is valid. From there you can just populate the options in your select with the values.
But you can maybe make it work inside that ajax. You could add a comma after every entry, then split the response.
...
success: function (data) {
options = data.split(',')
//build the dropdown
}
...
I have the following JQuery script, but it appears not to be changing the value of the input. Ideally I would like to change the input to data but I am trying to simplify the issue as much as possible, hence using test:
$(document).ready(function() {
$.ajax({
type: 'POST',
url: 'php/individualcats.php',
data: {venueid: 4},
success: function(data) {
$('#e12').val('test');
},
})
});
This is using select2, but I have tested the input statement on its own as so, and it works correctly:
$('#e12').val('test');
If you're using select2:
$("#e12").select2("val", "test");
http://ivaynberg.github.io/select2/#documentation
$('#e12').val('test');
should work correctly for value. if you want to display it in input as text, you will need to use
$('#e12').text('test');
I am attempting to send the value of a select element as a parameter to an ajax request. However it will always send the initial value of the element on page load as opposed to the value of the current selection.
I have tried updating the variable by resetting it when the select box changes, but that didn't have any effect on the ajax request.
<select id="id_location">
<option value="1">...</option>
<option value="2">...</option>
<option value="3">...</option>
</select>
<script>
var list = $("#id_location").val();
$(document).ready(function() {
$("#id_location").change(function(){
list = $("#id_location").val();
})
$('#id_part_number').autocomplete({
serviceUrl: '/lookup',
width: 500,
params: {location: list}, // <-------- This variable is not updating
onSelect: function (suggestion) {
var request = $.ajax({
url: "/lookup",
type: "GET",
data: {"query": suggestion.data,
},
dataType: "json"
});
request.done(function(msg) {
$("#id_number").val(msg.number);
$("#id_desc").val(msg.description);
$("#id_par").val(msg.par);
})
}
});
})
</script>
I am a complete novice when it comes to javascript/jquery and haven't been able to come up with anything from googling. Any insight into solving this would be much appreciated.
Edit: The autocomplete function above is part of the external library jquery-autocomplete. It's purpose is to send the ajax request every time the element it is attached to, in my case an input field, is updated. I would like to send the current value of the #id_location element with the parameters in the request. Right now I have only been able to get it send the original value of the element when the page loaded and can't get it to update.
Found the answer.
params:{location: function(){ return $('#id_location').val()}},
I have an SVG with this code for some shapes (its a map)
onclick="top.traeDatos(evt.target.id);"
in the html file I have:
function traeDatos(region){
alert(region);
}
So, I click on a region, I have the alert window with the region name and the variable in the html file. Thats great
Now I want that the click on the map shows a popup with more information i'll get using ajax from multiple databases trough a file called, for example "getDetails.php".
Im new in js and ajax, I know how to make a standard call in ajax to get some information given an id (or name in this case), I know how to change the value of a text field to the text I get trought the ajax call...but I dont understand how to call ajax and show a tooltip from that javascript code in the SVG or the one in html.
Im not sure too of what tolltip to use, but one problem at the time ;)
Can you enlighten me a little.
Thanks!
Here's a start:
function traeDatos(region){
var domn = document.domain;
document.domain = domn;
var detURL = "http://" + domn + "/getDetails.php";
$.ajax({
url: detURL,
type: 'POST',
data: {
region: region
},
cache: false,
success: function(json){
var data = jQuery.parseJSON(json);
//using PHP's json_encode() you can return an array
//in the example below 'info' is an item in the array
$('#insert_place').val(data.info);
}
});
}
Let me know if you have some problem with that.