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>
Related
I have a modal button inside the table for each row which is an edit button and inside the modal, there is the autocomplete query from the database.
Issue: The (jQuery) auto-complete works only for the first row of the table. It doesn't work for the next row and so on.
This is my script:
$(document).ready(function() {
$(document).on('keydown', '.second', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[2];
$('#' + id).autocomplete({
source: function(request, response) {
$.ajax({
url: "getDetails.php",
type: 'post',
dataType: "json",
data: {
search: request.term,
request: 1
},
success: function(data) {
response(data);
}
});
},
select: function(event, ui) {
$(this).val(ui.item.label); // display the selected text
var userid = ui.item.value; // selected id to input
$.ajax({
url: 'getDetails.php',
type: 'post',
data: { userid: userid, request: 2 },
dataType: 'json',
success: function(response) {
var id = response[0]['id'];
var biddernumber = response[0]['biddernumber'];
var fb_id = response[0]['fb_id'];
document.getElementById('fb_id_' + index).value = fb_id;
document.getElementById('biddernumber_' + index).value = biddernumber;
}
});
return false;
}
});
});
});
Everything works fine, the only thing I need is to make it work on all rows.
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/
So i have scanner and input text, if scanner get value max 9 digit, is will insert ot my database (automacly). These my coding
$(window).load(function(){
$( "#scannerinput" ).focus();
$('#scannerinput').bind("change paste keyup", function(){
var barcode = $(this).val();
var judul = $(this).attr("target-judul");
var dataString = "judul=" + judul + "&barcode=" + barcode;
if(this.value.length ==9){
$.ajax
({
type: "POST",
url: url+"ajax",
data: dataString,
cache: false,
success: function(data)
{
//window.location.href = url;
}
});
$( "#scannerinput" ).blur();
//console.log(dataString);
}
});
});
My problem is my code make insert twice or get trigger twice. How to make it just once trigger??? Any idea??
add array of exist data:
var exists_dataString_arr=[]; //array of exist data
$(window).load(function(){
$( "#scannerinput" ).focus();
$('#scannerinput').bind("change paste keyup", function(){
var barcode = $(this).val();
var judul = $(this).attr("target-judul");
var dataString = "judul=" + judul + "&barcode=" + barcode;
if((this.value.length ==9)&&(exists_dataString_arr.indexOf(ataString)<0)){ //if not in array
$.ajax
({
type: "POST",
url: url+"ajax",
data: dataString,
cache: false,
success: function(data)
{
//window.location.href = url;
exists_dataString_arr=[];
}
});
exists_dataString_arr.push(dataString); //add data in array
$( "#scannerinput" ).blur();
//console.log(dataString);
}
});
});
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 :)
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