jquery autocomplete bring value and key - php

first at all thanks for reading.
I was reading a lot of similar post but really, i dont understand how to get it working.
Here's the thing, i have a jquery autocomplete that brings an array from a php that i used json_encode. Example of the array
array('23' => 'Robert','3' => 'alaric'... and so on.
The input that is completed by the autocomplete obviously bring me the Value of that array.
But now what i need to do for other script is, in the input show the name (just the way its right now) but when i click at a button right next to that input (called it '+', "submit" buttono or doesnt matter the type) to complete a select multiple empty that is at the right, i will need to put as value the key of the array and the text of the option the Value of the array...
so here's my code of autocomplete and my input, hope you can help me
<input type="text" name="letter" placeholder="Nombre Medico..." id="search_medico"/>
$(function() {
$("#search_medico").autocomplete({
minLength: 3,
source: '<?php echo $general->full_path?>view/general/search_medico.php'
});
});
and i need to complete a select like
her ei need to add each one option

I don't get exactly what you want to do but to access value and label of a selected item in a jquery ui autocomplete, you can use the select event callback.
$(function() {
$("#search_medico").autocomplete({
minLength: 3,
source: '<?php echo $general->full_path?>view/general/search_medico.php',
select : function(event, ui) {
// ui.item.label is the displayed value
// ui.item.value is the key
// you can here put these values somewhere else in your page
}
});
});
EDIT :
Your source must be in this format :
[{value : 1977, label : "CARBALLO JACINTO"}, {value : 4527, label : "CARBALLO GAIS NATALIA"}, ... ]

Related

SQL Query creates buttons that one can click to 'hopefully' change DIV

I am failing hardcore with describing this but here it goes..
I have home.php, pretty much just:
<body>
<div id='leftColumn'>
<?php include ('includes/roomQuery.php')
</div>
</body>
Now,
roomQuery.php echos my sql column 'room_name' from table 'rooms' as follows:
echo "<td>$roomName</td>";
Any of the room links will take me to room.php and populate the page with more queries respective to $roomName via $_GET.
room.php is basically:
$get = $_GET['room'];
$query
while($row = $result->fetch_assoc()){
echo $query
This is working perfectly for what it is.
====================================
however, I am trying to make my site flow better, and have been trying out the jQuery .load function. So far I have changed roomQuery.php to:
echo "<td><button>$roomName</button></td>";
here is my jQuery to replace home.php #page with room.php #page:
$(document).ready(function(){
$("button").click(function(){
$("#page").load("room.php #page",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("Success");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
When I click any of the buttons that roomQuery.php spits out, it replaces #page perfectly but I cannot grasp how/if I can send $_GET['room'] to room.php so that when #page is loaded, the information is still respective to the room I clicked on. If I change jQuery to
$("#page").load("room.php?room=CL%20124 #page"
Then #page is populated with the data specifically respective to room CL 124. Is it possible to post the button text that is output from roomsQuery.php to room.php #page when the button is clicked?
Yes, you can pass data into the .load() call as the second parameter.
Firstly, you need to work out how to get the room ID from the DOM into your jQuery call, maybe you could use a data attribute on the button element like this:
<button data-room-id="123">Click me</button>
Then use jQuery like this:
$("button").click(function(){
// define your room ID here, however you do it
var your_room = $(this).data('room-id');
$("#page").load(
"room.php #page",
{
room: your_room
},
function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("Success");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
}
);
});
Edit: just noticed that you might actually be using the button's value as your room ID, if so, use this definition:
var your_room = $(this).val();
If you're expecting spaces or non-alpha numeric characters in this value, you might want to consider URL encoding it before you send it.

Taking input from text field and fetching data from database using ajax and jquery

I have a input text field and when user give input in text field, it should fetch the data from database with respect to user-input
<p><input type="text" name="ajax" id="ajaxtest1" ></p>
<script>
$(document).ready(function(){
$("#ajaxtest1").blur(function(){
var dt=$(this).val();
$.post("test.php", { purchase_product:dt});
<?php
$purchase_product = $_POST['purchase_product'];
$sql="SELECT SUM(purchase_quantity) as quantity FROM purchase WHERE purchase_product = '".mysql_real_escape_string($purchase_product)."'";
$f=$database->query($sql);
$found=$database->fetch_array($f);
print_r($found);
?>
});
});
</script>
My query is correct(I have tested by given exact value in .mysql_real_escape_string(myvale or string).) it is working fine.But result I am getting in above code for user input is
Array
(
[0] =>
[quantity] =>
)
Help me out
try adding a cakkback function to your ajax request.
Allow me to paste just the specific alteration on your code.
$.post("test.php",
{ purchase_product:dt},
function(data){ $('selector').html(data);}
);
the selector in this case will be the html element that you want to show the result

Pass multiple values to jQuery

I built a for each loop that pulls back several rows from the database. Each row it pulls has a link, and a hidden input box with a value of posting_id. This link will work similar to a like button on facebook in a way. The hidden input box just stores the posting_id. When you click the "like" link, it sends over the posting_id to a jQuery page and pings back a page called community to tell it the user has "liked" the post.
Here's the problem
I'm pulling several rows, and it seems that only the top row being pulled is actually sending the data to the jQuery page when you click the "like" button. If I click on any other "like" button other than the top one it will not work at all.
Jquery Page
$('.bump_link').click(function(){
var posting_id = $('.posting_id').val();
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
Foreach Loop
foreach ($result as $value) {
$group_postings .= '
<input type="text" class="posting_id" value="'.$value['posting_id'].'">
<div id="bump_icon" class="bump_link"></div>
<span id="counter"></span>
';
}
I hope I've made the issue clear, it was and is difficult to explain.
The problem is you are using a class to get the posting_id, since all the hidden fields have the same class only the first elements value is passed no matter what button you click.
i recommend using this html, without the hidden input, pass the value as a data attribute
<div id="bump_icon" class="bump_link" data-postid="'.$value['posting_id'].'">
and in this js, get the posting id from the data attribute
$('.bump_link').click(function(){
var posting_id = $(this).data('postid'); // get the posting id from data attribute
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
You are calling val() on selector you might return more then one elements, but val() will give you the value of one (first) element only. You can use map() to get all values of input having class posting_id
var posting_id_values = $('.posting_id').map(function(){
return this.value;
}).get().join(',');
Your problem is this line:
var posting_id = $('.posting_id').val();
This will return the first posting_id value every time, not the one associated with the bump_link you are clicking on.
There are lots of ways to solve this. One way is to use .prev() to select the previous element:
var posting_id = $(this).prev('.posting_id').val();
this selects the previous posting_id element from the current div. This relies on the fact that the posting_id element is before the associated bump_link div.
If you want to send just the posting_id of the clicked button, you could change your PHP/HTML code like this:
foreach ($result as $value) {
$group_postings .= '
<div id="bump_icon" class="bump_link">
<input type="text" class="posting_id" value="'.$value['posting_id'].'">
</div>
<span id="counter"></span>
';
}
And your JS code like this:
$('.bump_link').click(function(){
var posting_id = $(this).find('.posting_id').val();
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
use on delegated event since you are adding the content dynamically and
$(this).prev('.posting_id') // to get the posting data value
$(document).on('click','.bump_link',function(){
var posting_id = $(this).prev('.posting_id').val(); //<-- use $(this) reference
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});

Jquery load dymanic content with parameter

I'm trying to load div content based on the a href being clicked and pass in a parameter. For example, Link 1
Clicking on Link 1 will pass value "3" to process.php, and return back the value "apple is good for you".
However, I can't seem to be able to pass the value without having a submit button. Anyway I can pass the parameter to another php file to process, and return the value?
$(document).ready(function(){
$("#testing a").live("click", function(evt){
var id= $(this).attr('id');
$.post("process.php", { id: id },
function(data) {
alert(data);
$('#result').load(data);
});
})
});
Below is my HTML
<div id="testing">
hello
</div>
<div id="result"></div>
Appreciate your help, thanks a lot!
You shouldn't be using numbers for id values. Instead, prefix them with a letter, or consider adding them to a data- atribute on the element.
Additionally, $.live() is deprecated, and we are encouraged to use $.on() from here on out for event delegation. I've gone ahead and handled this in the code below, but the id issue remains.
Lastly, $.load() and $.html() aren't the same. If you want to load data into an element, you don't call the load method (though the name could lead to that confusion).
// Short-hand version of $(document).ready();
$(function(){
// Handle anchor clicks on #testing
$("#testing").on("click", "a", function(e){
// Prevent links from sending us away
e.preventDefault();
// POST our anchor ID to process.php, and handle the response
$.post("process.php", { 'id': $(this).attr("id") }, function(data){
// Set the response as the HTML content of #result
$("#result").html(data);
});
});
});
From your process.php file, you might have something like the following:
$msg = array(
"...chirp chirp...",
"This is response number 1",
"And I am the second guy you'll see!",
"Apples are good for you!"
);
$num = $_POST["id"] || 0;
echo $msg[ $num ];

How to send one value and display another value in text box using jquery

Is it possible to display one value and send another value at the same time in Input text field?
For example 2 is the current value shown in <input> box when i onchange the <select> box.
Now I need to send the value 3 for that <input> box but need to display 2.
Example:
<input type="text" value="2" name="test1">
should display 2 in the page and need to pass 3 to next page.
If I echo $_POST["test1"] it should print 3.
try this (if i understood your question correctly):
$('select').change(function(){
var val = this.value;
$('input.select').val(val);
})
and here is the fiddle: http://jsfiddle.net/maniator/hp8cr/
ON QUESTION UPDATE
Why not on the PHP side just add one to the post:
echo ($_POST["test1"] + 1);
If you are using jquery and ajax post, you can achieve this.
$.post("myscript.php",
{ test2: $('#test2').val(val), // Submit normally
test1: '3' // Change the value
},
function(data){
// Handle response here
});
)

Categories