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.
Related
Currently I have a select tag that I want to fill in via a AJAX call every time the user clicks on that particular select tag. To do this I'm doing the following:
View class:
<label class="control-labels ">Property</label>
<select name="property" class="form-control select2 selectsearch" <?php echo (isset($read) ? $read:''); ?> required>
</select>
Ajax request:
$(document).ready(function(){
$("#property").click(function(){
var post_url = 'listings/getonClick'
$.ajax({
type: "POST",
url: post_url,
data : { "hid" : $(this).val() },
success: function(response){
$.each(response, function(value, key) {
$("#property").append("<option id="+value.id+">"+value.name+"</option>");
})
}
});
});
Controller Class:
function getonClick(){
$modelList = $this->listings_model->getProperties();
echo(json_encode($modelList));
}
Model Class:
function getProperties(){
$this->db->select("id,name");
$this->db->from("crm_project_properties");
$query = $this->db->get();
return $query->result_array() ;
}
But after doing this, I cannot get any data in my select tag before or even after clicking on it
Can ypu please try with .on("click")?
Its worked for me in past
$(document).ready(function () {
$("#property").on("click", '*:not(a)', function() {
var post_url = 'listings/getonClick'
$.ajax({
type: "POST",
url: post_url,
data : { "hid" : $(this).val() },
success: function(response){
$.each(response, function(value, key) {
$("#property").append("<option id="+value.id+">"+value.name+"</option>");
})
}
});
});
You should encode your Response to JSON Object first
$(document).ready(function(){
$("#property").click(function(){
var post_url = 'listings/getonClick'
$.ajax({
type: "POST",
url: post_url,
data : { "hid" : $(this).val() },
success: function(response){
var responseText = JSON.parse(response);
$.each(responseText , function(value, key) {
$("#property").append("<option id="+value.id+">"+value.name+"</option>");
})
}
});
});
I would like to submit a form only after checking if some of the inputs are not already existing in the database.
I use beforeSend for checking if there are some fabrics to add, if so, I create a variable with all the fabrics name, and my php script "check_fabric.php" controls if the fabrics are not already in the database.
I would like to submit the form only if the fabrics name are new.
$("#addorder").validate({
submitHandler: function(form, event) {
event.preventDefault();
var form = $("#addorder");
var id_customer = $("#id_customer").val();
$.ajax({
type: 'POST',
dataType: 'html',
url: "process.php",
data: form.serialize()+"&id_customer="+id_customer,
beforeSend: function(xhr) {
$("#submit-btn").removeClass("effet add").addClass("sending").val('Adding....').attr('disabled',true);
var nbfabric = $("#nbfabric").val();
if(nbfabric>0) {
var arrayFabric = new Array();
for (var i=0;i<nbfabric;i++) {
arrayFabric.push($('input[name="fabric_'+i+'"]').val());
}
var jsonString = JSON.stringify(arrayFabric);
$.ajax({
type: "post",
url: "check_fabric.php",
data: {data : jsonString},
success: function (data) {
if (data === "ok") {
form.submit();
} else {
alert(data);//data lists all the fabrics name already existing in the database
$("#submit-btn").removeClass("sending").addClass("effet ajout").val('Ajouter').attr('disabled',false);
event.preventDefault();
return false;
}
}
});
}
},
success: function(data) {
form.fadeOut("normal", function(){
$("#return_message").html(data).fadeIn();
});
},
}
});
}
});
Any idea ?
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 have tried just about every solution and I know my database returns values if i hard code in the php so the issues is returning the values or determining if it is actually sent as post. It gets to the success function and alerts Worked but I am getting undefined for Item ID.
$(document).ready(function() {
$('.check').click(function(){
alert("Step1");
var thisID = $(this).attr('id');
alert(thisID);
$.ajax({
type: "GET",
url: "XXX.PHP",
data: { "ID": thisID},
cache: false,
async:true,
datatype: "json",
success: function(data)
{
alert("WORKED");
alert(data.ItemID);
}
});
});
});
Here is the PHP
if(isset($_POST['ID']))
{
$ID = $_POST['ID'];
function retrieve($ID)
{
$stmt = $mysqli->query("SELECT * FROM database1.menu WHERE ItemID = $ID");
if($stmt->num_rows) //if there is an ID of this name
{
$row = $stmt->fetch_assoc();
echo $row;
print json_encode($row);
}
}
You could try something like this. Not sure if this is what you need.
$(".check").click(function(event){
event.preventDefault();
var $this = $(this);
var thisID = $this.attr('id');
$.ajax({
type: "POST",
url: base_url + "url.php",
data: {
id: thisID
},
dataType: "text",
cache:false,
success:
function(data){
alert(data);
}
});
return false;
});
$(function(){
$('.page').click(function() {
var paging = $(this).attr("name");
var dataString = 'page='+paging;
$.ajax({
type: "POST",
url: "<?php echo $backtrack; ?>shop.php",
data: dataString,
success: function(){
$('#products').load('shop.php/skateboards/ #products > *', function(){
$('#products').delay(200).fadeOut();
$('#products').delay(600).fadeIn();
});
$(".current-page").attr("class", "");
}
});
return false;
});
});
I am guessing this is not working because I am reloading the part of the page that gets the post. What I want to do is post the page number to the current page and then reload the items inside the products div, with it being the next set of items
I think you need to do something like this:
$('.page').click(function() {
$('#products').delay(200).fadeOut();
var paging = $(this).attr("name");
var dataString = 'page='+paging;
$.ajax({
type: "POST",
url: "<?php echo $backtrack; ?>shop.php",
data: dataString,
complete: function() {
$.get('shop.php/skateboards/', function(data) {
$('#products').replaceWith(data);
});
}
});
return false;
});