JQuery : How to add list of objects in Ajax - javascript

It's one of my first time I using JQuery/AJAX and I would like to get your help in order to give a list of objects in my dropdown field.
I have this function :
function get_sub_method_options(keep_cur) {
var sel_option = $('select#id_method-group').find("option:selected");
var sel_val = sel_option.val();
console.log(sel_val);
if (sel_val === '') {
console.log('none sorting group');
$("select#id_method-sub_method").empty();
$("select#id_method-sub_method").append('<option value=""> test </option>'); //here add list of all submethods
return;
}
data = {
'test_method': $('select#id_method-test_method').find("option:selected").val(),
'group': sel_val
};
$.ajax({
method: "GET",
url: '{% url 'ajax_method_submethod' %}',
data: data
}).done(function (result) {
reset_select('id_method-sub_method');
for (var i = 0; i < result['results'].length; i++) {
if (keep_cur > 0 & keep_cur == result['results'][i].id)
$("select#id_method-sub_method").append('<option value="' + result['results'][i].id + '" selected>' + result['results'][i].text + '</option>');
else
$("select#id_method-sub_method").append('<option value="' + result['results'][i].id + '">' + result['results'][i].text + '</option>');
}
;
});
}
And I have a Python/Django function :
def ajax_method_submethod(request):
test_method_id = request.GET.get("test_method", "")
group_id = request.GET.get("group", "")
sub_methods_all = SubMethod.objects.all()
sub_methods = Method.objects.filter(test_method_id=test_method_id).filter(
group_id=group_id
)
results2 = []
for item in sub_methods_all:
results2.append({'id': item.id, 'text': item.name})
print(results2)
results = []
for item in sub_methods:
results.append({'id': item.sub_method.id, 'text': item.sub_method.name})
return HttpResponse(json.dumps({'err': 'nil', 'results': results, 'results2': results2}), content_type='application/json')
I would like to import into my dropdown field values from results2 (python file) when I have sel_val is empty :
if (sel_val === '') {
...
}
So how I could rewrite this part :
if (sel_val === '') {
console.log('none sorting group');
$("select#id_method-sub_method").empty();
$("select#id_method-sub_method").append('<option value=""> test </option>'); //here add list of all submethods
return;
}
Like this :
if (sel_val === '') {
$("select#id_method-sub_method").empty();
for (var i = 0; i < result['results2'].length; i++) {
$("select#id_method-sub_method").append('<option value="' + result['results2'][i].id + '">' + result['results2'][i].text + '</option>'); //here add list of all submethods
}
return;
}
with for loop and append all elements from results2 to my dropdown field ? The issue is actually with result['results2']
Hopfully it's readable and understandable.
Thank you !
EDIT :
As #Darren Crabb said, it's a possible out of scope.
So I rewrote my JS like this :
if (!sel_val) {
reset_select('id_method-sub_method');
$("select#id_method-sub_method").empty();
var all = "{{ results2 }}";
for (var i = 0; i < all.length; i++) {
$("select#id_method-sub_method").append('<option value="' + all[i].id + '">' + all[i].text + '</option>'); //here add list of all submethods
}
return;
}
And I defined in my python file : context['results2'] = SubMethod.objects.all()
I get this :

Related

How to set a variable to fulfill a condition outside a for loop cycle?

problem:
I created a search form where the user is asked to insert a string into an input form. The string is the name of the city and if it matches one of the 50 cities I have included into a JSON file some function is called.
We may have three conditions:
1) The input form is left empty ------> an error log appears.
2) The input form is not empty and the string matches one of the 50 strings in the JSON file ------> a table is displayed.
3) The input form is not empty but the string doesn’t match any of the 50 strings in the JSON file ------> a modal window is displayed
My problem is how and where to write the command:
$(‘#Modal#).show()
In other terms, how and where should I show the modal window whenever the city inserted doesn’t match with any of those included in my JSON file?
I have a cycle for: here the values of the strings in the JSON file are being checked; I wouldn’t put the command into there, otherwise the modal will be called 49 times: since I have 50 cities, one of them matches the string inserted in the input form but the other 49 don't.
I suppose I should create a new variable with a function outside the for loop cycle, setting the condition : "the string matches one and only one of the strings in the JSON file"; then the condition may be true inside the for loop (and then I display the table), whereas it's false outside the for loop (i.e. "if the number of cities found is 0" and then I show the modal window).
The code I wrote so far is the following:
function validateCitta() {
let text = $('#inlineFormInputCitta').val();
if (text === "") {
$("#errorLog").show();
} else {
$("#errorLog").hide();
$.ajax({
url: "https://nominatim.openstreetmap.org/search?q=" + encodeURIComponent($("#inlineFormInputCity").val()) + "&format=geocodejson",
dataType: "json",
success: function(data) {
for (let i = 0; i < data.features.length; i++) {
let typeCity = data.features[i].properties.geocoding.type;
if (typeCity === "city") {
let nameCity = data.features[i].properties.geocoding.name;
for (let i = 0; i < json.tappe.length; i++) {
let tappa = json.tappe[i];
let city = json.tappe[i].city;
if (city === nameCity) {
console.log("JSON file has been activated");
$("#tbody").append("<tr><td>" + tappa.name + "</td><td>" + tappa.state + "</td><td>" + tappa.region + "</td><td>" + tappa.city + "</td></tr>");
$("#tabella").show();
};
};
}
}
}
})
}
};
How may I set the new variable to fulfill the third 3) condition above?
OR ALTERNATIVELY, would you have any other suggestion to show the modal window if the condition (3) is fulfilled?
-E D I T E D - - - -
I edited the snippet as in the following:
function validateCitta() {
let text = $('#inlineFormInputCitta').val();
var check = false;
if (text === "") {
$("#errorLog").show();
} else {
$("#errorLog").hide();
$.ajax({
url: "https://nominatim.openstreetmap.org/search?q=" + encodeURIComponent($("#inlineFormInputCitta").val()) + "&format=geocodejson",
dataType: "json",
success: function (data) {
for (let i = 0; i < data.features.length; i++) {
let typeCity = data.features[i].properties.geocoding.type;
if (typeCity === "city") {
let nameCity = data.features[i].properties.geocoding.name;
for (let i = 0; i < json.tappe.length; i++) {
let tappa = json.tappe[i];
let city = json.tappe[i].city;
if (city === nameCity) {
var check = true;
$("#tbody").append("<tr><td>" + tappa.name + "</td><td>" + tappa.state + "</td><td>" + tappa.region + "</td><td>" + tappa.city + "</td></tr>");
$("#tabella").show();
}
;
}
;
}
}
}
})
if (check) {
$('#myModal').show();
}
}
};
But it doesn't work.
On the other hand, If I write
if (!check) {
$('#myModal').show();
the modal is displayed also when the condition 2) is fulfilled...
-E D I T E D 2 - - - -
I wrote the following code. It works, but I don't understand completely the role of the boolean flag check and the way its value changes inside and outside the for loop:
function validateCitta() {
let text = $('#inlineFormInputCitta').val();
if (text === "") {
$("#errorLog").show();
} //condition 1: no strings, no problem
else {
$.ajax({
url: "https://nominatim.openstreetmap.org/search?q=" + encodeURIComponent($("#inlineFormInputCitta").val()) + "&format=geocodejson",
dataType: "json",
success: function (data) {
var check = false; //I set the flag variable outside the cycle
for (let i = 0; i < data.features.length; i++) {
let typeCity = data.features[i].properties.geocoding.type;
if (typeCity === "city") {
let nameCity = data.features[i].properties.geocoding.name;
for (let i = 0; i < json.tappe.length; i++) {
let tappa = json.tappe[i];
let city = json.tappe[i].city;
if (city === nameCity) {
check = true;
//conditon 3 is fullfilled: strings matches
$("#tbody").append("<tr><td>" + tappa.name + "</td><td>" + tappa.state + "</td><td>" + tappa.region + "</td><td>" + tappa.city + "</td></tr>");
$("#tabella").show();
}
;
}
;
}
}
if (!check) { //does !check means that the value of 'check' is opposite to the one set at the beginning?
$('#myModal').show(); }
}
})
}
};
Does var check = false means that everything is written after it (the for loop in this case) is false?
Does !check means that var check = false isn't true, i.e. check === true?
If so, why should I specify check = true inside the for loop? Isn't check = true the same as !check? In other terms, what is the check telling me?
You can use a flag that tells if a city was found.
In example :
if (typeCity === "city") {
let nameCity = data.features[i].properties.geocoding.name;
let IsCityFound = false; // <------------------------------- not found by default
for (let i = 0; i < json.tappe.length; i++) {
let tappa = json.tappe[i];
let city = json.tappe[i].city;
if (city === nameCity) {
IsCityFound = true; // <---------------------------- Now found
console.log("JSON file has been activated");
$("#tbody").append("<tr><td>" + tappa.name + "</td><td>" + tappa.state + "</td><td>" + tappa.region + "</td><td>" + tappa.city + "</td></tr>");
$("#tabella").show();
}
}
if (!IsCityFound) { // <------------------------------------ Was it NOT found ?
$('#Modal').show();
}
}
The idea is to use a boolean variable as a flag and then outside the loop check if the value changed.
function validateCitta() {
let text = $('#inlineFormInputCitta').val();
let check = false;
if (text === "") {
$("#errorLog").show();
} else {
$("#errorLog").hide();
$.ajax({
url: "https://nominatim.openstreetmap.org/search?q=" + encodeURIComponent($("#inlineFormInputCity").val()) + "&format=geocodejson",
dataType: "json",
success: function(data) {
for (let i = 0; i < data.features.length; i++) {
let typeCity = data.features[i].properties.geocoding.type;
if (typeCity === "city") {
let nameCity = data.features[i].properties.geocoding.name;
for (let i = 0; i < json.tappe.length; i++) {
let tappa = json.tappe[i];
let city = json.tappe[i].city;
if (city === nameCity) {
check = true;
};
};
}
}
}
})
}
//check if you need to display the modal
if (check)
{
console.log("JSON file has been activated");
$("#tbody").append("<tr><td>" + tappa.name + "</td><td>" + tappa.state + "</td><td>" + tappa.region + "</td><td>" + tappa.city + "</td></tr>");
$("#tabella").show();
}
};

How to set the order of dropdown list items according to their ID numbers in GeoJSON properties

It is my fiddle: http://jsfiddle.net/anton9ov/d8yga33f/
I need to organize an order of items in my selector according to the ID numbers in the GeoJSON file. It is a part of my code where the items appear in the list:
map.on("layeradd", function(e) {
if(!e.layer.options) {
return;
}
if((e.layer.options.id != "markerLayer1") && (e.layer.options.id != "markerLayer2")) {
return;
}
var markers = e.layer.getLayers();
var mySelector = $("#mySelector");
for(var i = 0; i < markers.length; i++) {
mySelector.append("<option value='" + L.stamp(markers[i]) + "'>" + markers[i].feature.properties.name + "</option>");
}
});
Try using Array.prototype.sort():
map.on("layeradd", function(e) {
// ...
var markers = e.layer.getLayers();
// Get the dropdown
var mySelector = $("#mySelector");
markers.sort(function(a,b) {
// get the ids, and parse them as int
var aId = parseInt(a.feature.properties.id,10),
bId = parseInt(b.feature.properties.id,10);
return aId < bId ? -1 : aId > bId ? 1 : 0
}).forEach(function(marker) {
mySelector.append("<option value='"
+ L.stamp(marker) + "'>"
+ marker.feature.properties.id // I added the marker id
+ '. '
+ marker.feature.properties.name
+ "</option>");
})
});
See forked fiddle

Ajax call work slow.Can make it fast?

I'm filling "ReportToadd" dropdownlist form "ddlLanguage" dropdownlist when select index change through JavaScript and ajax in asp.net mvc.This work fine but take much time to fill child dropdownlis"ReportToadd".it take 4 to 5 second to fill second dropdownlist.How can make it fast.please help and thanks in advance
JavaScript code:
$(function () {
$('select#ddlLanguage').change(function () {
var languageId = $(this).val();
var projectType ='#(TempData["projectType"])';
$.ajax({
url: "/SEI/Report/FillReport",
type: 'POST',
data: JSON.stringify({ languageId: languageId, projectType: projectType }),
dataType: 'json',
contentType: 'application/json',
success: function (data) {
$("#ReportToAdd").html("");
$.each(data, function (key, result) {
$('select#ReportToAdd').append(
'<option value="' + result.Value + '">'
+ result.Text +
'</option>');
});
}
});
});
});
and dropdownlist are:
string projectType = "SEI_ADULT";
#Html.DropDownList("ddlLanguage", SixSeconds.Utils.SelectList<SixSeconds.Models.Language>("Name", ""), new { #id = "ddlLanguage", style = "width:300px;" }) <br />
TempData["projectType"] = projectType;
#Html.DropDownList("ReportToAdd", Enumerable.Empty<SelectListItem>(), new { #id = "ReportToAdd", style = "width:300px;" })
and Json method is like
public JsonResult FillReport(int languageId,string projectType,string selectedValue, bool showCredits = true)
{
DataAccessObject<ReportType> dao = new DataAccessObject<ReportType>();
DataAccessObject<Language> ldao = new DataAccessObject<Language>();
//IEnumerable<ReportType> list = criteria != null ? dao.Filter(criteria) : dao.All().ToList();
IEnumerable<ReportType> list = dao.All().ToList();
IEnumerable<Language> Llist = ldao.All().ToList();
list = list.Where(a => a.ProjectType.ToString() == projectType).ToList();
list = list.OrderBy(r => r.CustomOrder);
List<SelectListItem> result = new List<SelectListItem>();
result.Add(new SelectListItem() { Value = "", Text = "" });
foreach (ReportType t in list)
{
foreach (Language l in t.Languages.Where(a=>a.Id==languageId).ToList())
{
string displayText = t.Name + " (" + l.Name + ")" + (showCredits ? " - " + (t.Code == "BTP" ? 10 : t.Credits) + " " + App_GlobalResources.FieldLabels.Credits : "");
string value = t.Id + "-" + l.Id + "-" + (t.Code == "BTP" ? 10 : t.Credits) + "-" + t.Code + "-" + l.Code.Replace("-", "_");
result.Add(new SelectListItem() { Selected = (selectedValue == value), Value = value, Text = displayText });
}
}
return Json(result);
}
One way of updating your db query is to not use All and pass down the Where.
Also, Llist is never used so you are getting all the Languages from the db for nothing.
try:-
//IEnumerable<Language> Llist = ldao.All().ToList();
IEnumerable<ReportType> list = dao.Where(a => a.ProjectType.ToString() == projectType)
.OrderBy(r => r.CustomOrder).ToList();
instead of :-
IEnumerable<ReportType> list = dao.All().ToList();
IEnumerable<Language> Llist = ldao.All().ToList();
list = list.Where(a => a.ProjectType.ToString() == projectType).ToList();
list = list.OrderBy(r => r.CustomOrder);
This will pass the where and order by to the db instead of doing it in code.

Retrieve multiple elements with "getElementById"?

I've tried using the techniques mentioned in these questions, but I haven't had any luck. I'm trying to adjust a JavaScript function to retrieve multiple divs using the getElementById method.
Here is the current line of code within the function which retrieves the div #cat1:
var elem = document.getElementById(cat1);
Moving forward, I need this function to also retrieve the div #cat2.
jQuery can be loaded if there's a better method to accomplish this using their library?
Here is the full function (reference Line 3):
function getCategories(initial) {
var i;
var elem = document.getElementById('cat1');
if (initial == 1) {
jsonGroups = "";
jsonGroups = '{ xml: [], "pin": [] ';
for (i = 0; i < elem.childNodes.length; i++) {
if (elem.childNodes[i].nodeName == "LI") {
jsonGroups = jsonGroups + ', "' + elem.childNodes[i].attributes.getNamedItem("id").value + '": [] ';
}
}
jsonGroups = jsonGroups + "}";
markerGroups = eval('(' + jsonGroups + ')');
for (i = 0; i < elem.childNodes.length; i++) {
if (elem.childNodes[i].nodeName == "LI") {
var elemID = elem.childNodes[i].attributes.getNamedItem("id").value;
if (elemID != "user") {
elem.childNodes[i].innerHTML = "<a onclick='" + 'toggleGroup("' + elemID + '")' + "'>" + elem.childNodes[i].innerHTML + "</a>";
} else {
elem.childNodes[i].innerHTML = '<form id="userPOIForm" action="#" onsubmit="userPOIFind(this.userPOI.value); return false"><input id="userPOITxt" size="20" name="userPOI" value="' + elem.childNodes[i].innerHTML + '" type="text"><input id="userPOIButton" value="Go" type="submit"> </form>';
}
if (hasClass(elem.childNodes[i], "hidden") !== null) {
elem.childNodes[i].setAttribute("caption", "hidden");
} else {
elem.childNodes[i].setAttribute("caption", "");
}
if (elem.childNodes[i].attributes.getNamedItem("caption").value != "hidden") {
classAdder = document.getElementById(elemID);
addClass(classAdder, "visibleLayer");
}
}
}
}
for (i = 0; i < elem.childNodes.length; i++) {
if (elem.childNodes[i].nodeName == "LI") {
var catType = elem.childNodes[i].attributes.getNamedItem("id").value;
result = doSearch(elem.childNodes[i].attributes.getNamedItem("title").value, elem.childNodes[i].attributes.getNamedItem("id").value);
}
}
}
If you are trying to select all elements with an id that starts with cat, you can do this in jQuery like this:
$("[id^=cat]")
jQuery: Attributes Starts With Selector
Just make categoriesList be another parameter, and call the function twice.

Cannot get the substring of a String in JavaScript

I am trying to get the substring from a variable when the content length is longer than 120 chars.
$.ajax({
url: url,
dataType: 'json',
async: false,
success: function(data){
$.each(data, function(i, item) {
var name = item.name;
var itemId = item.itemId;
if(name.length >= 120) {
selectHTML += '<option value=' + itemId + '>' + name.substr(0, 120) + '</option>';
} else {
selectHTML += '<option value=' + itemId + '>' + name + '</option>';
}
});
}
});
But as a result, I always get this:
name is undefined
When I do it without substring(), it works without problems. Any suggestions?
Edit:
Error is thrown on this line:
if(name.length >= 120) {
Try changing if (name.length >= 120) to if (name && name.length >= 120)
The error means that one of the items does not contain a name.
Use console.log(data) to figure out what you actually receive - nothing is wrong with your JavaScript code.
If you cannot change the server-side code, you could fallback to an empty name:
var name = item.name || '';

Categories

Resources