We Keep Coding

jquery append refusing to assign value to select

so i have an mvc project using php/js/oracle db on the backend and this one thing is completely stumping me.
i have a select that im trying to fill with and array of values received from an ajax call. but when i try to append.() the values to the select nothing happens, no errors that i can see, nothing. it just doesnt assign the values like how i think it should work. this is the block of code
`$("#newuserModal #bscid").focusout(function () {
var based_url = $('#base_url').text();
var bscidlong = $('#newuserModal #bscid').val();
$.ajax({
type: 'POST',
url: based_url + '/user_data/get_roles',
data: {bsc_id: bscidlong},
cache: false,
success: function (data) {
var prole = JSON.parse(data);
var $option = $("<option>");
$option.val("");
$option.text("Select a location type.");
$select.append($option);
if (prole != undefined && prole.length > 0) {
prole.map(function (d, i) {
$('#newuserModal #f_process_role').append(new Option(d.p_role, d.p_role_id));
})
}
}
})
});`
stepping through as the focusout executes the ajax is fine, i get the array of data i expect, hits the if statement loops through without issue but when it gets to the append literally nothing happens and the event ends and the values are not assigned, front end dev really isnt my thing so im stumped as to what is wrong.

You seem to have a typo which is causing the issue:
<select class="form-control col-md-7" id="f_process_role" name="f_process_role" style=" height: 32px;">
the id is "f_process_role" while in your js code you are checking for an id of #f_p_role
$('#newuserModal #f_p_role').append(new Option(d.p_role, d.p_role_id));
You can choose to update the select to match your id as thus:
<select class="form-control col-md-7" id="f_p_role" name="f_p_role" style=" height: 32px;">

How can I check if a string equals an array entry in Javascript?

I'm trying to verify if the typed game title exists on an array, the response from ajax brings all the game titles inside the database.
So if the user types a game that exists, an message should be displayed.
Here's what I've tried:
<script type='text/javascript'>
function gameTitleValidation(str) {
$.ajax({
type: 'GET',
url: '/getAjaxData',
success: function (data) {
if ($.inArray(str, $.each(data.game_titles))){
alert("Game exists");
}
}
});
}
And the HTML:
<div class="form-group form-group-game">
<label>Game title:</label><br>
<input type="text" name="game_title" onkeyup="gameTitleValidation(this.value)"required>
</div>
It never enters the condition, what is it that I am doing wrong?
Thanks in advance.

Looks like you have few options here.
If you know that what is returned by the backend is an array:
data.game_titles.some(title => title === str)
$.inArray(str, data.game_titles) >= 0 as the second argument in $.inArray should be array an itself
If what is returned by the backed is a string (for exanple coma separated values):
data.game_titles.indexOf(str) >= 0

Jquery calling the action on change event and then reflecting the value in a div form

I have a sj:select drop down. On change event of that drop down. I am trying to invoke a action.
$.ajax({
type : 'POST',
url : 'getAttributeTypeForUpdate',
data : param,
success : function(data) {
//alert(JSON.stringify(data));
alert(data.attributeTypeObj.typeName)
},
async : false
});
In the action I am returning attributeTypeObj. Below is just the annotation I am Using.
#SkipValidation
#Action(value="getAttributeTypeForUpdate",
results={
#Result(name = SUCCESS, type = JSON, params = {
"ignoreHierarchy", "false",
"includeProperties", "attributeTypeObj\\..*, actionMessages\\[\\d+\\]"
})
})
I am able to get the data in alert box of action class. But the div form which I am using to reflect the values is not displaying.
<div id="updateAttributeType" class="updateAttributeType"
style="width: 900px;" align="center">
<div class=table-row>
<div class="col3">
<b><s:label id="lb20">Type Name:</s:label></b>
</div>
<div class="col3">
<s:textfield name="typeName" id="typeName"
cssStyle="width: 250px;" labelposition="left"
value="%{#attributeTypeObj.typeName}"></s:textfield>
</div>
I have used the following publish "$.publish("updateAttributeType"); " after the ajax call. The value is empty still.
%{#attributeTypeObj.typeName}

I was expecting value="%{#attributeTypeObj.typeName}" to populate on ajax call. But later realized that its part of DOM. I need to refresh whole page or write the html value instead. I have opted the second choice and wrote values of the tags on the jquery like:
$('#uptypeName').val(data.attributeTypeObj.typeName);

Passing parameters to on click jquery event from dynamic list of anchor tags

I'm working on a list of elements in my asp.net mvc project. Each element is part of a ul, and the list elements are generated based on a list in my model.
I'm trying to add a delete button to each of these elements, but I'm struggelig a bit with how to make these elements unique, for jquery to pass the correct parameters to my action later on.
Each element has its own guid, but I can't figure out how to pass these along to the .on('click') jquery handler.
Here's the relevant part of my razor view:
<ul class="panel-tasks ui-sortable">
#foreach (RunModel run in Model.PlannedRuns)
{
<li>
<label>
<i class="fa fa-edit"></i>
<!--<i class="fa fa-ellipsis-v icon-dragtask"></i>-->
<span class="task-description">#run.Name</span>
<span class="sl-task-details">#run.RunTask</span>
<span class="sl-task-unit">#run.ConveyanceId</span>
<span class="sl-task-location">#run.Operation.WellContract.Location, #run.Operation.WellContract.Name</span>
</label>
<div class="options">
</i>
</div>
</li>
}
</ul>
And here's my javascript:
<script type="text/javascript">
$("#del").on("click", function (runId) {
$.ajax({
url: "#Url.Action("DeleteRun", "Planning")",
type: "GET",
dataType: "json",
data: { runId: runId },
error: function (msg) {
// Error handling
},
success: function (msg) {
// Success handling
}
});
});
</script>
I do realize I could add onClick to the anchor tag passing along the id as a parameter there, but I was hoping using jquery would do the trick, like mentioned above. Also, is there a recommended approach for doing tasks like this when several html elements use the same method?

You can use a data-* parameter on the delete button specific to that instance which you can then retrieve on click. You also need to make the delete button use a class attribute, otherwise they will be duplicated in the loop. Try this:
<div class="options">
<i class="fa fa-trash-o"></i>
</div>
$(".del").on("click", function (e) {
e.preventDefault();
var runid = $(this).data('runid');
$.ajax({
url: "#Url.Action("DeleteRun", "Planning")",
type: "GET",
dataType: "json",
data: { runId: runId },
error: function (msg) {
// Error handling
},
success: function (msg) {
// Success handling
}
});
});

The answers using data- attributes are elegant and do the job. However, I would like to propose a (slightly) different approach:
#foreach (RunModel run in Model.PlannedRuns)
{
<li id="#run.Id">
...........
</li>
}
Inside the a elements, set your del id as class.
$(".del").on("click", function () {
var runid = $(this).parent().id;
//..............
});
The advantages of this solution:
Your li elements have an id which can be used by other JavaScript functions as well
No need to play around with attributes (be careful as Firefox is very picky with data- attributes)
Additionally, your delete a elements won't have duplicate ids.

You can access the item clicked with $(this) in a click event (and most events).
$(".del").on("click", function () {
var runId = $(this).data("runId");
$.ajax({
url: "#Url.Action("DeleteRun", "Planning")",
type: "GET",
dataType: "json",
data: { runId: runId },
error: function (msg) {
// Error handling
},
success: function (msg) {
// Success handling
}
});
});
and insert the id as data-runId= in the HTML:
<i class="fa fa-trash-o"></i>
As the delete button is a boookmark only (#) the only effect it may have is to move the page to the top. To stop that add an event parameter and call preventdefault() on it. (or simply return false from the event handler).
$(".del").on("click", function (e) {
e.preventDefault();
And as Rory McCrossan points out, you should not have duplicate ids on your delete buttons (use a class). Dupe ids will actually work on most browsers, but are considered a bad thing :)

Selecting a value on a dynamically populated dropdown list after the list has been populated

So I have a problem where my code tries to select a value on the dropdown list before the list is populated. Basically it calls a javascript function that does an AJAX post to get the dropdown values from php. Then its supposed to select a value on the list, however it does this before the list is populated, so it doesn't find the value. Any idea on how to fix this?
Heres my code
This is where I get the values for the dropdown list
function getProjects(id, proj_select_class)
{
custID = id.options[id.selectedIndex].value;
$.ajax({
type: "POST",
url: "index.php/home/projectlist",
data: {custID : custID},
dataType: "json",
success:function (result){
var ddl = $(proj_select_class);
ddl.children('option:not(:first)').remove();
for (var key in result) {
if (result.hasOwnProperty(key)) {
ddl.append('<option value=' + key + '>' + result[key] + '</option>');
}
}
}
});
}
And heres where I set the values.
AddNew() adds a new row to my table. This is also inside an ajax call.
for (var row in result) {
AddNew();
client_field = document.getElementById('clients'+id);
project_field = document.getElementById('projects'+id);
client_value = $.trim(result[row].client_id);
project_value = $.trim(result[row].project_id);
//set client
client_field.value = client_value;
getProjects(client_field, project_field, client_value);
project_field.value = project_value;
}

Maybe try using a custom event binding to know when your code should fetch the value from the list. To bind to a custom event, you would do something like:
$(document).bind("listpopulated", function(){ /*find value, call AddNew() */ });
and in your ajax success function trigger the "listpopulated" event like so:
$(document).trigger("listpopulated");
References:
http://api.jquery.com/bind/
http://api.jquery.com/trigger/

Fixed it by waiting til the ajax finished running by doing this
$(document).ajaxComplete(function(){ set_values(result); });
set_values is another function that I just loops through all my results and sets all the dropdown values