i'm very frustrated, because i can't find the answer how can i show tooltip with ajax dinamic content. If i use static contet it works, but it doesn7t work with dinamic contect. Can you please help me?
Here is my tooltipster script:
<script type="text/javascript">
$(document).ready(function () {
$('.pomoctools').tooltipster({
multiple: true,
content: 'Loading...',
functionBefore: function (origin, continueTooltip) {
continueTooltip();
// next, we want to check if our data has already been cached
//if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'person/index_person_test.php',
success: function (data) {
// update our tooltip content with our returned data and cache it
origin.tooltipster('content', $(data)).data('ajax', 'cached');
}
});
}
});
});
Then I have this php page (here is just the code for displaying the data of person: person/index_person_test.php) :
$person_id = $_GET['person_id'];//person id
//find person's data
$sql = mysql_query("SELECT * FROM person WHERE person_id='$person_id'");
$row = mysql_fetch_array($sql);
$titleText = stripslashes($row[person_name]);
$sql = mysql_query("SELECT user FROM `users` WHERE id='$row[user_id_updt]'");
$user_name_updt = mysql_fetch_array($sql);
echo $person_id;
I want to show the tooltipster on my other php page, let's call it cast.php, here is just the part for tooltipster:
echo '</td>
<td width="100%" valign="top">'.$row[person_name].'</div>';
So my problem is that the toltipster does not show data when hovering on the link in cast.php.
If i change in person_index_test.php to:
$person_id = $_POST['person_id']; //person id
it does not help.
If i go to "person/index_person_test&person_id=56774"
the data is displayed correctly and if i echo the person id, i get the correct value:
echo $person_id;
I know i need to change things in javacript to fetch my mysql data correctly, but i can't find the answer. I have tried also adding to my jaascript after
url: 'person/index_person_test.php',
data: person_id,
or
data: 'person_id'
or
data: { 'person_id': person_id},
I have tried everything but it doesn't work.
If i cange in my javascript to static person_id then the tooltipster shows the content, but of course on hover the data is always the same. So for static i have changed this:
$.ajax({
type: 'POST',
url: '**?main=person/index_person_test&person_id=56774**',
success: function(data) {
would you please help me? I have read all the tooltipster questions here on ostackoverflow, but i can't find the answer...
Thanks! Misko
Related
I have a drop down on php form, I want to populate guest names in it, which has been done, now I want to load data from table on the basis of value from this drop down and without page refresh/ button submission. How do I do this? I want simple code that could achieve it in one page rather than doing it through multiple pages. The examples I have seen so far are too complicated and when I merge them in my code, they no longer work.
Here is the function which im using onchange of dropdown:
$("#guestname").change(function()
{
var id = $(this).find(":selected").val();
var dataString = 'action='+ id;
$.ajax
({
url: 'billing.php',
data: dataString,
cache: false,
success: function(r)
{
$("#display").html(r);
}
});
})
Here is my billing.php code, it loads values on the basis of first selected value, if I again select value from drop down,it doesn't show the updated record.
<?php
include('config.php');
$action = $_REQUEST['action'];
$stmt=$dbcon->prepare('SELECT discount FROM table_name WHERE name=:name
ORDER BY name');
$stmt->execute(array(':name'=>$action));
}
?>
<div class="row">
<?php
if($stmt->rowCount() > 0){
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
?>
You can do it without page refresh but you gonna need another php file, let's name it query.php to get you the result.
On your current page
<select>
<option value='bob'>Bob
<option value='jane'>Jane
</select>
<div id='output'></div>
<script>
$('select').change(function(){
let name = $(this).val();
$.ajax({
url: 'query.php',
method: 'POST',
data: {username: name},
success: function(response){
$('#output').html(response);
}
});
})
In query.php
$username = $_POST['username'];
//query database to get your result
echo json_encode($result);
I am working on a search box in PHP that will get results from a database. Since I want the search to be live, I'm using an Ajax script to get the results.
This is the javascript:
$(function() {
$('#search').keyup(function() {
var txt = $(this).val();
if (txt != '' && txt.length >= 6) {
$.ajax({
method: 'POST',
url: '{{ path_for('search.post') }}',
success: function(data) {
console.log(data);// Do stuff with data.
}
});
} else {
$('#search_results').html('');
}
});
});
path_for('search.post') calls a PHP function (using Slim 3). This function is:
$queryString = "SELECT displayName
FROM guests
INNER JOIN shows ON guests.showId = shows.showId
WHERE (displayName LIKE :search OR talk_title LIKE :search) AND shows.active = 1 AND guests.active = 1
ORDER BY gLastName";
$searchQuery = $this->c->db->prepare($queryString);
$searchText = '%'.$request->getParam('search').'%';
$searchQuery->bindValue(':search', $searchText, PDO::PARAM_STR);
$searchQuery->execute();
$results = $searchQuery->fetchAll(PDO::FETCH_ASSOC);
$jsonResults = json_encode($results);
echo $jsonResults;
If I run the PHP directly, I get a json string with the record(s) I searched for (usually one or two depending on what I search). However, if I let the Ajax run, I get back every single record in the database. I don't understand why this is.
If have tested that the ajax is calling the right PHP by changing to echo 'yes'. When I did this, I received the string 'yes' back.
Is there something I need to change in the Ajax call?
I just realised what the error is.
$request->getParam('search') only works when I run the PHP directly, but not with Ajax since the parameter is not being posted.
Once I changed the ajax call to this:
$.ajax({
method: 'POST',
url: '{{ path_for('search.post') }}',
data: {search:txt},
dataType: 'text',
success: function(data) {
console.log(data);// Do stuff with data.
}
});
it worked.
Basically what I'm trying to do is post comments to a page without having to refresh the entire page. Just the Comments DIV so it looks like it posted and refreshed smoothly.
The form submits to the same page it's on. Everything I've found shows me how to refresh content constantly using intervals. I just want the comments DIV to refresh when someone posts a comment.
I can't find the correct ajax code to do this the way I want.
Here is my code:
var submit_button = $('#submit_button');
submit_button.click(function() {
var commentSubmitted= $('commentSubmitted').val();
var update_div = $('#update_div');
$.ajax({
type: 'POST',
url: '/blog/',
data: data,
success:function(html){
update_div.html(html);
}
});
});
in the same PHP file, I have the post to DB:
if($_POST[commentSubmitted])
{
$query="INSERT INTO comments (commentSubmitted) VALUES ('$commentSubmitted')";
mysql_query($query);
}
The HTML is for the form:
<form id="flow" method='post' action='/blog/'>
<textarea name='commentSubmitted' ></textarea>
<input type='submit' value='Post'/>
The DIV containing all comments looks like so:
<DIV id='AllComments'>
// comments displayed here
</DIV>
So after submitting the form, I would like the 'AllComments' DIV to reload.
The best would be to use jQuery to make the ajax call to the server and retrieve the data you want.
You have two ways of retrieving the data. Either retrieve the additional comments to show in a json array and handle it with javascript, or create the html on the server side and append/replace the html in the comments section.
Using Json
$.ajax({
url: "the_ajax_url_here",
type: "post",
data: {paramTitle: "paramValue", paramTitle1: "paramValue1"},
dataType: "json"
success: function(response) {
// handle the response
}
});
Retrieving Html
$.ajax({
url: "the_ajax_url_here",
type: "post",
data: {paramTitle: "paramValue", paramTitle1: "paramValue1"},
dataType: "html"
success: function(response) {
// set the html of comments section to the newly retrieved html
$("comments_section_selector").html(response);
}
});
What I would do is retrieve the newly added comment in a json array and then using javascript append it to the comments section.
edit:
After seeing your code I have some comments that might help you.
I would personally prefer the code that handles the ajax request in a separate file.
In that file you can store the new comment and create the html to display that comment.
Then in the success function just append the new html to the comment section like so:
success: function(response) {
$('#AllComments').append(response);
}
You can also make new comment appear on top using prepend
$('#AllComments').prepend(response);
Simple as that hope you are upto it
submit_button.click(function() {
var commentSubmitted= $('commentSubmitted').val();
var update_div = $('#update_div');
$.ajax({
type: 'POST',
url: '/blog/',
data: data,
success:function(html){
update_div.html(html);
}
});
});
Then you go to insert data
if($_POST[commentSubmitted])
{
$query="INSERT INTO comments (commentSubmitted) VALUES ('$commentSubmitted')";
mysql_query($query);
//After Inserting data retrieve back all the comments from db
$sql = "select * from comments";//any query and execute it
$query = mysql_query($sql);
while($data = mysql_fetch_array($query)){
echo $data["comments"];//Echo your commenets here
}
exit;
}
Thats it
I know this has been asked so many times by now you all are probably sick of it. I'm just stuck and have already spent about 4 hours on this. I've read through many suggestions already about the
cache:false,
option and adding certain "content-types", but when I do this, it no longer works in any browser.
I followed the tutorial as found here: http://www.x-developer.com/php-scripts/loading-drop-downs-with-ajax-php-and-fetching-values-from-database-without-refreshing-the-page
and I modified it of course to my needs, mostly just the mysql and identifiers.
This is what I have in my head section:
<script type="text/javascript">
function get_cities(country)
{
$.ajax({
type: "POST",
url: "/cities.php",
cache: false,
beforeSend: function () {
$("#state").html("<option>Loading ...</option>");
},
data: "country="+country,
success: function(msg){
$("#state").html(msg);
}
});
}
</script>
In IE, it gets to the Loading.... part, and does nothing, it doesn't populate the option field as it does in Chrome and FF.
Do you see anything in the tutorial that he may have left out that is crucial for the operation in IE?
Thanks,
Try setting the data object as a key value pair..
Instead of
data: "country="+country,
try
data: { "country" : country },
assuming your $("#state") is already a dropdown list.
in cities.php, you'll need to remove the <select> tag.
<?php
// Code for cities.php
$country_id = $_REQUEST['country_id'];
$sql_city = "SELECT * FROM CITY WHERE country_id = '".$country_id."'";
$result_city = mysql_query($sql_city);
// REMOVE THIS LINE
//echo "<select name='city'>";
while($row_city = mysql_fetch_array($result_city))
{
echo "<option value='".$row_city['id']."'>".$row_city['city']."</option>";
}
// AND REMOVE THIS LINE
// echo "</select>";
?>
I have a simple AJAX function to send an id of an object to a php page
My function looks like this:
$(function(){
$("a.vote").click(function(){
//get the id
the_id = $(this).attr('id');
alert(the_id);
//ajax post
$.ajax({
type: "POST",
data: "?id="+the_id,
url: "vote.php",
success: function(msg)
{
$("span#message"+the_id).html(msg);
}
});
});
});
My vote.php looks like this:
session_start();
if(isset($_SESSION['user'])) {
// db setup removed
// insert vote into db
$q = "UPDATE votes SET vote = vote + 1 WHERE id = " . $_POST['id'];
mysql_query($q);
echo "You sent " . $_POST['id'];
}
When I execute my AJAX function, it appears that the vote.php is never run
I know that my AJAX function is being called correctly, because alert(the_id); is popping up with the correct ID.
I know my vote.php is functioning correctly because I can run an HTML method="post" with a textbox named "id", and it will update the database correctly.
Can anyone see what's wrong?
Thank you
You're trying to send your variables in the URL, not as POST variables. Should be something like:
$(function(){
$("a.vote").click(function(){
//get the id
var the_id = $(this).attr('id');
alert(the_id);
//ajax post
$.ajax({
type: "POST",
data: {id:the_id},
url: "vote.php",
success: function(msg)
{
$("span#message"+the_id).html(msg);
}
});
});
});
Your data should be as included as an object, not as a string URL. Check out the examples on the jquery API page for more info on this!
The principal thing I see in your code that doesn't look right is data: "?id="+the_id,. The ? is unnecessary, and illogical for a post request. Do the following instead:
data: {
id: the_id
}
This lets jQuery do the URL-encoding for you.
As an additional point, you do $(this).attr(id). This is very inefficient. Do this.id instead, for exactly the same effect hundreds of times quicker at least 20 times quicker.
Your data value shouldn't need a question mark at the beginning.