Concatenate Ajax success function result set with a Dynamic Column Name - javascript

I have a form with several form inputs with the following definition:
<input type="text" name="aname" id="aname" class="form-control dataaccess" data-field="GID" />
<input type="text" name="sname" id="sname" class="form-control dataaccess" data-field="LID" />
Then i have an ajax function whose success function returns a resultset from the controller to display in the page. This is my code
$.ajax({
type: "POST",
url: "controller/method",
data: "id="+data,
success: function(data){
$(".dataaccess").each(function(){
var field=data[0].($(this).data("field"));
$("#"+$(this).attr("id")).val(field);
});
});
However, my resultset is not getting concatenated with the fieldname i get from the respective input data-field attribute. Where am i getting it wrong? Thank you
Data returned by data:
[{"ID":"GR02","Name":"Admins","Valid":"30","Block":"No ","Descr":"Description"}]

For dynamic properties, you shouldn't use property accessor(.), you can use as index notation
$.ajax({
type: "POST",
url: "controller/method",
data: "id="+data,
success: function(data){
$(".dataaccess").each(function(){
var self = this;
var field=data[0][$(self).data("field")];
$("#"+$(self).attr("id")).val(field);
});
});
Define a reference to this as self outside the ajax call, so this can be available when ajax executes.

Try this :
success: function(data){
$(".dataaccess").each(function(){
var field=data[0].($(this).data("field"));
console.log(field);
$(this).val(field);
});
});

In JavaScript or JQuery + Operator used for concatenation:
var field=data[0]+($(this).data("field"));

Related

POST multiple inputs using ajax

I have two input fields (user-name and lguser) and i want to send all field values to php page, i can just send user-name value. Please help
<script>
// AJAX call for autocomplete
$(document).ready(function(){
$("#user-name").keyup(function(){
$.ajax({
type: "POST",
url: "myphppage.php",
data:'keyword='+$(this).val(),
beforeSend: function(){
$("#user-name").css("background","#FFF url(../assets/media/image/loadings.gif) no-repeat 165px");
},
success: function(data){
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#user-name").css("background","#FFF");
}
});
});
});
//To select country name
function selectCountry(val) {
$("#user-name").val(val);
$("#suggesstion-box").hide();
}
</script>
<input type="text" class="form-control" id="user-name" name="user-name" >
<input type="hidden" value="lguser" id="lguser">
Please try
data:'keyword='+$(this).val()+'&lguser='+$('#lguser').val(),
Here you use data:'keyword='+$(this).val()
here (this) get value form ** $("#user-name").keyup(function(){**
means get value only user-name
You can grab the values of both inputs and store them in an object. Then assign that object as the data property of the $.ajax(). jQuery will send that data as JSON, which you'll have to deserialize on the PHP side.
$.ajax({
data: {
keyword: $('#user-name').val(),
lguser: $('#lguser').val(),
}
})
Alternatively, put your inputs in a <form> element and use jquery.serialize() to serialize all inputs into a query string, with the name property of each element as key.
const formData = $('#the-form').serialize()
$.ajax({
data: {
url: `myphppage.php?${formData}`
}
})
you can send data in ajax request like this
data: {'username': $('#user-name'.val()), 'userid': $('#lguser').val()}

How to get the attribute id from JQuery AJAX generated HTML data? JavaScript

Is it possible to get the attribute id from JQuery AJAX generated HTML data?
I have these in my index.php
<script>
$(document).ready(function () {
function viewRooms()
{
$.ajax({
url:"rooms.php",
method:"POST",
success:function(data){
$('#rooms').html(data);
}
});
}
viewRooms();
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
});
</script>
<div id="rooms"></div>
and inside rooms.php
<input type="text" id="room_number" />
<input type="text" id="room_type" />
<button id="save" > </button>
The function save button doesn't work from index.php. also with the id attributed to it.
Please help me if it is possible to do that? Thank's a lot.
Wrap save click handler call in a function something like this.
function saveClick() {
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
}
and call this function in ajax success.

Calling value in PHP from a jQuery serialized array doesn't work

I have an ajax call that sends data from serialized checkboxes (among other) to a php file:
$("#button1").click(function(e) {
var category_id = {};
category_id['datumanf'] = $("#datumanf").datepicker().val();
category_id['checkboxvalue'] = $('.checkboxes').serialize();
console.log($('.checkboxes').serialize());
$.ajax({
type: "POST",
url: "allgemein.php
dataType: "html",
data: category_id,
success: function(response) {
$("#resulttable").show().html(response);
}
});
});
The html checkboxes look like this (they contain bits of SQL):
<input type="checkbox" class="checkboxes" name="checkb[]" value="SYSTEM LIKE '%system%'">
When I try to call their name via POST in php like
echo $_POST['checkb'];
it's always empty. I tried variations like $_POST['checkb[1]']; or $_POST['checkb[]']; it's always empty.
However when i call the whole array echo $_POST['checkboxvalues']; I get the same as console.log.
I need the values singularily however. How can I do that?

pass data($post) to php file using javascript without callback

I need to pass data from HTML page to PHP page But without data callback ....
i'm used two method but One of them did not succeed
1)
$.ajax({
type: "POST",
url: 'phpexample.php',
data: {voteid: x },
success: function(data)
{
alert("success! X:" + data);
}
});
2)
$.post("getClassStudent.php",
{
},
function(data){
$("#div_id.php").html(data);
}
);
as i can understand, you just want to send info to a php script and don't need the response, is that right?
try this
$.post("phpexample.php", {voteid:x});
or simply remove the "succes" function from the equation if you feel more confortable using $.ajax instead of $.post
$.ajax({
type: "POST",
url: 'phpexample.php',
data: {voteid: x }
});
your fisrt example is correct, the second is not well formed.
more info:
http://api.jquery.com/jquery.post/
EDIT: to help you some more :)
<button type="button" id="element-id">click</button>
<button type="button" class="class-name">Click</button>
$(document).ready(function(){
//if you are marking ans element by class use '.class-name'
$(".class-name").click(function(){
$.post("getClassStudent.php");
});
//if marking by id element use '#id-name'
$("#element-id").click(function(){
$.post("getClassStudent.php");
});
});
be carefful with the markings, for debuggin try to use "console.log()" or "alert()" so you can see where is the problem and where the code crushes.
var formData = {
'voteid' : 'x',
};
$.ajax({
type : 'POST',
url : 'phpexample.php',
data : formData, // our data object
dataType : 'json',
encode : true
}).done(function(data) {
console.log(data);
});

How to add post parameters to $.ajax and $.ajaxSubmit

I used the ajax method of jquery for my forms. but now I need to add a field to the function.
how can I have my forms fields and my new post parameter.
var frm = $(n);
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
//contentType:frm.attr('enctype'),
data: frm.serialize(),
success: function (data) {
$(dataform).html(data);
$(des).html('');
$("button[type='submit']").attr('disabled',null);
}
});
the data parameter should be like this:
data: frm.serialize() + {'foo':'bar'}
thanks in advance.
.serialize() returns a string of parameters like you'd see in a querystring, so just add on + "&foo=bar"
try something like this
data: frm.serialize()+'&foo=bar',

Categories

Resources