I am unable to display data in the set of DIVs from MySQL database.
The data is showing only in last DIV, below is my code:
$(document).ready(function (){
var n = 9;
for(var i=0;i<n;i++){
var div = document.createElement('div');
div.className = "d5";
div.id=i+1;
document.getElementById('container').appendChild(div);
$.ajax({
url: 'myapi.php', //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var Name = data[2]; //get id
//var vname = data[1]; //get name
$('#'+div.id).html(""+Name);
}
});
}
});
Add one more property when you make ajax request, async:false. Hope you get your result
$.ajax({
url: 'myapi.php', //the script to call to get data
data: "",
async:false , //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var Name = data[2]; //get id
//var vname = data[1]; //get name
$('#'+div.id).html(""+Name);
}
});
set ajax async:false
$(document).ready(function (){
var n = 9;
for(var i=0;i<n;i++){
var div = document.createElement('div');
div.className = "d5";
div.id=i+1;
document.getElementById('container').appendChild(div);
$.ajax({
async: false,
url: 'myapi.php', //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var Name = data[2]; //get id
//var vname = data[1]; //get name
$('#'+div.id).html(""+Name);
}
});
}
});
You can close your Ajax call in an anonymous function:
(function(div.id){
$.ajax({
url: 'myapi.php',
data: "",
dataType: 'json',
success: function(data)
{
var Name = data[2];
//var vname = data[1];
$('#'+div.id).html(""+Name);
}
});
})(div.id);
Because the Ajax call is async, the value of div.id has changed before the Ajax call returns Reference
If myapi.php always returns the same data and you want to display it in multiple divs
$(document).ready(function() {
$.ajax({
url: 'myapi.php', //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var n = 9;
for (var i = 0; i < n; i++) {
var div = document.createElement('div');
div.className = "d5";
div.id = i + 1;
document.getElementById('container').appendChild(div);
var Name = data[2]; //get id
//var vname = data[1]; //get name
$('#' + div.id).html("" + Name);
}
}
});
});
If myapi.php returns different data for each request we might have multiple solutions
One of them is just setting the async attribute to false
The other one is passing the ID of the div to the server and return it with the response
$(document).ready(function() {
var n = 9;
for (var i = 0; i < n; i++) {
var div = document.createElement('div');
div.className = "d5";
div.id = i + 1;
document.getElementById('container').appendChild(div);
$.ajax({
url: 'myapi.php?id=' + div.id, //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var Name = data[2]; //get id
//var vname = data[1]; //get name
var divId = data[3];
$('#' + divId).html("" + Name);
}
});
}
});
The problem with you is that the div.id value is updated before you receive the response and the latest div get filled because the loop will be faster than the request
One more solution can be defining a function and pass the container id to it
function loadContentInto(divId) {
$.ajax({
url: 'myapi.php', //the script to call to get data
data: "",
async: false, //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var Name = data[2]; //get id
//var vname = data[1]; //get name
$('#' + divId).html("" + Name);
}
});
}
and call this method from your loop
for (var i = 0; i < n; i++) {
var div = document.createElement('div');
div.className = "d5";
div.id = i + 1;
document.getElementById('container').appendChild(div);
loadContentInto(div.id);
}
I hope that can help :)
Related
I'm trying to update a database column once an input field has changed.
however the code below just isn't doing it and am puzzled.
<script>
$("#addline1").change(function() {
var itemVal = $("#addline1").val();
var dataString = "companyid=" + companyid + "&addline1=" + itemVal;
processChange(dataString);
});
function processChange(dataString){
$.ajax({
type: "POST",
url: "../inc/dataforms/test.php",
data: dataString,
complete: function(data) {
var Resp = data.responseText;
console.log(Resp);
}
});
};
</script>
companyid is already defined elsewhere on the page.
I've tried change, onchange...
My PHP code is:
mysqli_query($dbc,"UPDATE `comp_companies` SET `regoffice1` = '$_POST[addline1]'
WHERE `company_id` = '$_POST[companyid]'");
Saying unexpected token (
somewhere in here
$("#addline1").change(function() {
var itemVal = $.("#addline1").val();
var dataString = "companyid=" + companyid + "&addline1=" + itemVal;
processChange(dataString)
});
I suggest you to use an object instead of a string... To pass the data, as the method used is POST.
(Assuming companyid is defined...)
<script>
$("#addline1").change(function() {
var itemVal = $("#addline1").val(); // Remove the extra dot that was here
// var dataString = "companyid=" + companyid + "&addline1=" + itemVal;
// I suggest the following:
var dataObj = {companyid:companyid, addline1:itemVal};
processChange(dataObj);
});
function processChange(dataObj){
$.ajax({
type: "POST",
url: "../inc/dataforms/test.php",
data: dataObj,
dataType: "json", // If you expect a json as a response
complete: function(data) {
var Resp = data.responseText;
console.log(Resp);
});
});
});
</script>
I want to fetch data from database using PHP and Ajax, which is first encoded into JSON.
But data is not printed properly on the screen. It shows elements of four rows in single line separated by comma.
$(document).ready(function() {
$(function()
{
$.ajax({
url: 'demo2.php',
data: "",
dataType: 'json',
success: function(data)
{
var name = data[0];
var email = data[1];
var msg = data[2];
var date1 = data[3];
$('#output').html("<div id='container'>" + name + " " + email + " " + msg + " " + date1 + "</div><br>");
}
});
});
});
Try this:
$(document).ready(function() {
$(function()
{
$.ajax({
url: 'demo2.php',
data: "",
dataType: 'json',
success: function(data)
{
console.log(JSON.stringify(data));
var obj = JSON.parse(data);
// Iterate object:
my_text=''
$.each(obj, function(index, value) {
console.log(value);
my_text += value
});
// var obj = JSON.parse('{ "name":"John", "email":"email#domain.com", "msg":"Hello"}');
$('#output').html("<div id='container'>" + my_text + "</div><br>");
}
});
});
});
Fiddle:
https://jsfiddle.net/fks3j500/
I have multiple drop down box, it is a result on a loop.
foreach($Transs as $Trans){
<select data-id="'.$Trans->coursetitle.'" name = "Schedule" id = "Schedule" class = "form-control" '.$disabled.'>
<option></option>
</select>
}
Everytime i want to click a select box, it will populate a data from php and display as option in the clicked box.
Here my ajax
<script>
$(document).on("click", "#Schedule", function () {
var subid = $(this).data('id');
var dataString = 'id=' + subid;
$.ajax({
type: "POST",
url: "../class/formschedule.class.php",
data: dataString,
cache: false,
dataType: 'json',
success: function (data) {
var len = data.length;
$("#Schedule").empty();
for( var i = 0; i<len; i++){
var id = data[i]['id'];
var name = data[i]['name'];
$("#Schedule").append("<option value='"+id+"'>"+name+"</option>");
}
}
});
});
</script>
But what happens is that only the first drop down box is populated not what i clicked.
HTML Page must contain unique id. You are giving same id to multiple select that's why only first id event done. Change your id to class then perform action
foreach($Transs as $Trans){
echo '<select data-id="'.$Trans->coursetitle.'" name = "Schedule" class = "form-control Schedule" '.$disabled.'>
<option></option>
</select>';
}
Ajax:
<script>
$(document).on("click", ".Schedule", function () {
var subid = $(this).data('id');
var dataString = 'id=' + subid;
var attr = $(this);
$.ajax({
type: "POST",
url: "../class/formschedule.class.php",
data: dataString,
cache: false,
dataType: 'json',
success: function (data) {
var len = data.length;
$(attr).empty();
for( var i = 0; i<len; i++){
var id = data[i]['id'];
var name = data[i]['name'];
$(attr).append("<option value='"+id+"'>"+name+"</option>");
}
}
});
});
</script>
I just want to know how to get the json data in phtml file. Below is my php controller.
foreach($result AS $row) {
$arrValues[] = array("firstname"=>$row['firstname'],
"emailid"=>$row['emailid'],
"lastname"=>$row['lastname']);
}
header("Content-type: application/json", true);
echo json_encode(array('rows'=>$arrValues));
This is my phtml file.
var emailid=$(this).data('emailid');
//alert(emailid);
$.ajax({
url: 'http://localhost/feedback/public/index/email/',
type: 'POST',
data: {emaildata: emailid },
dataType: 'json',
success: function(data) {
var emailid = data[0];
var vname = data[1];
var vlaname=data[2];
var w = window.open('', 'Feedback', 'width=400,height=400,resizeable,scrollbars');
w.document.write("FirstName"+data[0]);
}
});
Im trying to write those values in apop up window.But it says object.Could you please help me how to get the json data and write that in to popwindow.
success: function(data) {
var emailid = data.rows[0].emailid;
var vname = data.rows[0].firstname;
var vlaname=data.rows[0].lastname;
var w = window.open('', 'Feedback', 'width=400,height=400,resizeable,scrollbars');
w.document.write("FirstName"+data.rows[0].firstname);
}
I have a program that sends a user id through AJAX and to a php program that searches a table for all records that match that user id. The problem is that it's only returning one row and I need for it to return all the rows that match. Any ideas on how to do this?
MySQL statement in php:
$id=$_POST["id"];
$sql = mysql_query("SELECT * FROM crime_map WHERE user_id = '$id'");
while($row = mysql_fetch_assoc($sql))
$output[]=$row;
echo json_encode($output);
JS code:
function submitform() {
var id = document.getElementById('id').value;
var datastr = 'id=' + id;
alert(datastr);
$.ajax({
type: "POST",
url: 'api.php',
data: datastr,
dataType: 'json',
success: function(data){
var user_id = data[0];
alert(user_id);
}
})
}
function submitform() {
var id = document.getElementById('id').value;
var datastr = 'id=' + id;
//alert(datastr);
$.ajax({
type: "POST",
url: 'api.php',
data: datastr,
dataType: 'json',
success: function(data){
//var user_id = data[0];
//alert(user_id);
if(data.length > 0)
{
for(i=0; i<data.length; i++)
{
alert("User: " + data[i].user_id);
// here you have the user_id and any other fields from the table e.g. lat/long
}
}
}
})
}
Have a look at the Google Maps Polyline reference for how to plot the points:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Polyline