We Keep Coding

Data not binding to Select on first Ajax call

EDIT:
One unusual thing that i notice is that if i select an option from parent SELECT (which fires AJAX call to bring data for binding the next SELECT ) , if i immediately try to open it it continues to show no options but if I wait for couple of seconds , I am able to see the options !
I am trying AngularJS for first time and facing a problem wherein the SELECT control is not binding on FIRST Ajax call but displays item when AJAX call is done second time. The AJAX is fired on change event of another drop down
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $window) {
$scope.singleSelect = ' ';
$scope.IsVisible = false;
$scope.GetValue = function () {
$scope.IsVisible = true;
$scope.DefaultLabel = "Loading.....";
$.ajax({
type: "POST",
url: "../ContentPages/frmManualAccess.aspx/BindDelegationLevel",
data: "{pDelegationLevel :'ALL'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
console.log(JSON.parse(msg.d));
/* Gives array of 3 objects
[{"DelegationCode":"Customer","DelegationName":"Customer"},
{"DelegationCode":"Segment","DelegationName":"Segment"},
{"DelegationCode":"SBUM","DelegationName":"Customer"}]
*/
$scope.myOptions = JSON.parse(msg.d);
$scope.defaultDelegationLevel = $scope.myOptions[0].DelegationCode;
},
error: function (xhr, errorType, exception) {
var varResponseText = jQuery.parseJSON(xhr.responseText);
alert(varResponseText.Message);
}
});
}
});
And in HTML the SELECT i am trying to bind is below
<select ng-model="defaultDelegationLevel"
ng-options="option.DelegationName as option.DelegationCode for option in myOptions" >
</select>
I dont know why its happening , please help in this issue. Also an empty option appears as first option that i am trying to remove.

Javascript works fine with a hard-coded string but not with variable

I have a problem I have bee struggling over all morning so I felt it was time to get some help! I have a javascript function which gets the value entered by a user into an autocomplete box, uses AJAX to send that value to a php script which queries the database and then populates the following box with the possible options. The problem is this all works fine when I hard-code in the selected option as so:
var selected="Ed Clancy";
but not when it pulls it from the box, as so:
var selected = this.getValue();
I have tried debugging this using an alert box and both boxes come up with the same string in them so I am completely puzzled! Any ideas? Full code below:
$(riderSelected).on('selectionchange', function(event){
var selected = this.getValue();
//var selected="Ed Clancy";
alert(selected);
$('#nap4').removeAttr('disabled');
$('#nap4').empty();
$('#nap4').append($("<option>-select-</option>"));
$.ajax({
type: "GET",
url: 'getbiketype.php',
data: { name: selected },
success: function(data) {
console.log(data);
$('#nap4').append(data);
}
});
});

Based on magicsuggest documentation - http://nicolasbize.com/magicsuggest/doc.html , you probably could do this
var selected = this.getValue()[0];
IF you do not allow multiple selection

Change your code as I have written below for you .
Code
$(riderSelected).on('change', function (event) {
var selected = this.value;
alert(selected);
$('#nap4').removeAttr('disabled');
$('#nap4').empty();
$('#nap4').append($("<option>-select-</option>"));
$.ajax({
type: "GET",
url: 'getbiketype.php',
data: {name: selected},
success: function (data) {
console.log(data);
$('#nap4').append(data);
}
});
});

dynamically assign object properties in jquery/javascript to post through ajax

i am trying to dynamically have javascript object properties to send through ajax..
Here is what i have done..
var checkBoxName = $(this).attr('name');
var postData = {
Module: ModuleID,
Group:GroupID
};
if($(this).is(":checked")){
postData.checkBoxName = 1;
}else{
postData.checkBoxName = 0;
}
$.ajax({
url: "<?php echo base_url(); ?>user_site/user_group_add_pri/updatePrivilege",
data:postData,
type: "POST",
success: function (output) {
console.log(output);
}
i have multiple checkboxes. every checkbox has different name so what i am trying to do is post data to controller with checkbox name and its value..
but instead it is sending checkBoxName for all checkboxes...
i mean CheckBoxName is a variable but when i did used it like this cuz i thought it would send its value but it is not sending,
i tried like this postData.checkBoxName = but instead of value of variable it is sending as Text??
=-=-=-=-=-=-=-=-=-=--=-=-=-=-=
Update:
The event Occurs when checkbox value is changed.
$("input[type='checkbox']").on('change',function(e){
///Above Code Inside Here
}

If I understand right, I might have an idea.
You can do a loop through all your checkboxes and check if they are checked or not. Then push it into a tab and send through ajax :
var infoCb = new Array();
$('input[type=checkbox]').each(function(){
var tempArray = {
'nameOfCb' : $(this).attr('name'),
'value' : $(this).attr('checked')
}
infoCb.push(tempArray);
});
And then send it via Ajax.

How can I capture the attribute id from a dynamically generated html?

I am pretty sure this is not so complicated but I have been for hours trying to figure out how to catch the id of this dynamically generated anchor tags.
What I do in my code is that everytime a text input changes, theres an ajax request that goes to a php file and returns me a json array with the prices then I render this results of search in buttons that will be clickable to do other types of request but so far here's where I'm stuck.
heres's the code that loops through the array and renders this buttons (NOTE:The Id of the buttons are variables rendered by the function too.
$.ajax({
type: "POST",
url: "php/get_products.php",
data: {query:prod_qry},
success: function(data){
$('#loader_s').hide();
var jsarray = JSON.parse(data);
var length = jsarray.length;
for(i=0;i<jsarray.length;i++){
var index1 = i;
var index2 = Number(i++) + 1;
var index3 = Number(i++) + 2;
$('#modal-bod').append('<a onclick="renderProds();" class="btn btn-default-item prod_sel" style="margin-top:10px;" id="'+index3+'" data-dismiss="modal">'+jsarray[index1]+' <span class="pull-right" st>lps. '+jsarray[index2]+'</span></a>');
}
}
Then here's the function renderProds()
function renderProds(){
var id = $(this).attr('id');
alert(id);
}
the alert is just to try and catch the values for testing purposes, but what really goes there is another Ajax request.
The only thing I get here is that the var Id is undefined...

You can pass object like
function renderProds(obj) {
var id = obj.id;
alert(id);
}
Pass invoker object like
onclick="renderProds(this);"

I would do :
onclick="renderProds(this);"
function renderProds(that){
var id = that.id;
alert(id);
}

You use jQuery.. so USE jQuery !
Ajax can do the JSON.parse for you with just dataType: "json".
The inline onclick is bad practice.
Move the success function to make your code more readable.
$.ajax({
type: "POST",
url: "php/get_products.php",
data: {query:prod_qry},
dataType : 'json',
success: productsUpdate
});
function renderProds(event){
var id = $(event.target).attr("id");
alert("Id is:"+id);
}
function productUpdate(data){
$('#loader_s').hide();
for(i=0;i<data.length;i++){
var link = $('<a>....</a>');
link.click(renderProds);
$('#modal-bod').append(link);
}
}
Now, this is readable.
Complete the link creation with your code, without the onclick, remove the inline css and use a real css selector and finally, check this ugly Number(i++)+ .... it looks so bad.

jquery checkbox and array help

Hi There I need to get the names and values of checkboxes that have been checked into an array name selected, I cannot for life of me get it working, below is my attempt, if someone could clrify what I am doing wrong that would be brilliant.
//Location AJAX
//var dataObject = new Object();
var selected = new Array();
$('#areas input.radio').change(function(){ // will trigger when the checked status changes
var checked = $(this).attr("checked"); // will return "checked" or false I think.
// Do whatever request you like with the checked status
if(checked == true) {
/*$("input:checked").each(function() {
selected.push($(this).attr('name')+"="+$(this).val();
});
alert(selected)*/
getQuery = $(this).attr('name')+"="+$(this).val()+"&location_submit=Next";
$.ajax({
type:"POST",
url:"/search/location",
data: getQuery,
success:function(data){
alert(getQuery);
console.log(data);
// $('body.secEmp').html(data);
}
});
} else {
//do something to remove the content here
alert("Remove");
}
});

You're missing the closing parantheses on the call to selected.push. It should be:
selected.push($(this).attr('name')+"="+$(this).val());
Otherwise, it looks fine.
Another, possibly simpler, way to do the same thing is to use map instead of each:
var selected = $('input:checked').map(function() {
return $(this).attr('name')+"="+$(this).val();
}).get();