I want to refresh the data of my div when I click on link that shows the div.
I could not find answer, even though there were a lot of similar answers.
So what I have:
I have several divs, that got shown by click on links.
I have the main page, I have:
<div id="#id">
<select id="list">
<?php inlucde('getlist.php'); //basically retrieves the options
</select>
</div>
in my php file:
<?php
//basically getting connected to mysql,
//and retrieve data from a table;
echo "<option> data </option>";
echo "<option> data </option>";
...
?>
The problem here is, the data I want to show is updated in another
div, I am updating the data in mysql, since the both divs are on the same page, The updated data is not shown in the list, when I refresh the page, it shows.
So what I want, is when I click the link to show the list, I would like to refresh the list before showing it.
How can I do it? Thanks.
What you want is refreshing the data upon change which can only be done (without page refresh) with the use of AJAX. Since you have tagged jquery I would suggest reading about $.ajax().
Long story short:
var request = $.ajax({
url: "script.php", // your server script that will reply to your request.
type: "POST", // method used for your request.
data: { id : menuId }, // data to pass to your server script.
dataType: "html" // the response type you expect from your server
});
request.done(function( msg ) { // executed when you get a successful reply
alert(msg); // your reply is inside msg variable
});
request.fail(function( jqXHR, textStatus ) { // in case of an error this is being executed
alert( "Request failed: " + textStatus );
});
request.always(function() { // will always be executed after success or failure
alert( "Request completed." )
});
Use mine
formData = {
id: $("#id");
}
$.ajax({
type: 'GET',
contentType: 'application/json',
url: "getlist.php",
dataType: "json",
data: formData,
success: function(data) {
//success handling
},
error: function(data) {
//error handling
}
});
Related
i need help because i'm stuck and don't know what's wrong ,i try to send user clicked button "id" to php to get related data from database in the same page
$(".button_class").on("click", function() {
ToEditId = $(this).attr('id');
console.log(ToEditId ); //to check clicked id is Ok
$.ajax({
type: "POST",
url: same/php/page/path,
data: {
ToEditId: ToEditId
},
success: function(res, data) {
console.log(res, data);
},
error: function(err) {
alert(err);
}
});
});
the ajax print success in console log ,here is php code to get the value if clicked id
<?php
if(isset($_POST['ToEditId'])){
$to_edit_id=$_POST['ToEditId'];
var_dump($to_edit_id);
}
but nothing happen in php file !!
Which is the expected behaviour.
PHP is not dynamic. It doesn't "update".
PHP only runs once. This means that once your page is rendered, you cannot use PHP to change it again. You actually would have to use javascript to change the page, like so;
PHP side:
<?php
if(isset($_POST['ToEditId'])){
echo $_POST['ToEditId'];
$to_edit_id=$_POST['ToEditId'];
var_dump($to_edit_id);
die(); // prevent entire page from re-rendering again.
}
JS side:
$(".button_class").on("click", function() {
ToEditId = $(this).attr('id');
console.log(ToEditId ); //to check clicked id is Ok
$.ajax({
type: "POST",
url: same/php/page/path,
data: {
ToEditId: ToEditId
},
success: function(res, data) {
//Add your PHP file's response to the body through javascript.
$('body').append(res);
},
error: function(err) {
alert(err);
}
});
});
As #IncredibleHat mentioned, you should make sure your page doesn't render any of its usual HTML, so it won't return the entire page back to your ajax call. So put the PHP all the way above your html!
I have a datatable from which I want to take the text from a clicked cell and use it as a variable in PHP, so that I use that variable to query mysql. My codes so far as follows:
<script type="text/javascript">
$(document).ready( function () {
$('#priority tbody').on('click', 'tr', function() {
var celldat = $(this).find('td:first').text(); //gets the text from the first column when a row is clicked.
$.ajax({
url: 'prioritize.php', //my url
method: "POST",
async: 'false',
data: {variable:celldat},
success: function(data) {
alert(celldat); //The alert is perfect. It returns the text from the first column.
window.location.reload(true);
}
})
});
});
</script>
In my PHP I am trying to echo the same value:
<?php
$selected=$_POST['variable'];
echo $selected;
?>
But it is not working. Essentially I want to use the $selected in mysql select query to populate another table.
in data: try to make it like this : "data: {variable:"+celldat"}"
Try to do this $_POST['data'] this will give you all data sent from the ajax request
Following the comments, you need to modify your jQuery
success: function(data){ alert(celldat); }
to
success: function(html){ alert(html); }
PHP side
<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
$selected = $_POST['variable'];
echo"$selected";
?>
You need to do something with the response, as, upon success, with the code you showed first, you just send the page to itself: update a div or table cell...
Ajax let you use the data sent back from PHP without refresh, why would you reload then ?
example of udating a div with PHP response:
success: function(html){ // 'html' is PHP response
$("#responsediv").html(''+html+''); // update a div with ID 'responsediv'
// as ID have to be unique, it makes sure you have the proper data in the correct div
},
error: function (request, status, error) { // handle error
alert(request.responseText);
}
The Ajax function below sends data from a page to the same page where it is interpreted by PHP.
Using Firebug we can see that the data is sent, however it is not received by the PHP page. If we change it to a $.get function and $_GET the data in PHP then it works.
Why does it not work with $.post and $_POST
$.ajax({
type: "POST",
url: 'http://www.example.com/page-in-question',
data: obj,
success: function(data){ alert(data)},
dataType: 'json'
});
if there is a problem, it probably in your php page.
Try to browse the php page directly in the browser and check what is your output.
If you need some inputs from post just change it to the GET in order to debug
try this
var sname = $("#sname").val();
var lname = $("#lname").val();
var html = $.ajax({
type: "POST",
url: "ajax.class.php",
data: "sname=" + sname +"&lname="+ lname ,
async: false
}).responseText;
if(html)
{
alert(html);
return false;
}
else
{
alert(html);
return true;
}
alax.class.php
<php
echo $_REQUEST['sname'];
echo $_REQUEST['sname'];
?>
Ajax on same page will not work to show data via POST etc because, PHP has already run that's why you would typically use the external page to process your data and then use ajax to grab the response.
example
success: function(){
$('#responseDiv').text(data);
}
You are posting the data... Check if the target is returning some data or not.
if it returns some data then only you can see the data otherwise not.
add both success and error.. so that you can get what exactly
success: function( data,textStatus,jqXHR ){
console.log(data);//if it returns any data
console.log(textStatus);//or alert(textStatus);
}
error: function( jqXHR,textStatus,errorThrown ){
console.log("There is some error");
console.log(errorThrown);
}
I have a javascript function which I'm using to change the action field of a form and then submit it. Here's the function
function printmulti(){
form=document.forms['form2'];
form.action="http://localhost/output_sample1.php/";
form.target = "_blank"; // Open in a new window
form.submit();
form.action="http://localhost/output_sample2.php/";
form.target = "_blank";
form.submit();
return true; }
But somehow only output_sample2.php is being shown. Why isn't the first part of the code being executed?
you cant submit to multiple forms like that, you need to use something like ajax and make the requests that way. Currently you are starting the submit for the first and then starting the second right after so the second one stops the first one from submitting.
Ajax Tutorial
Use ajax like this:
$.ajax({
type: 'POST',
url: 'http://localhost/output_sample1.php/',
data: 'var1='+var1+'&var2=var2', //your variables sent as post at output_sample1.php
success: function( data ) {
//do success stuff
},
error: function(xhr, status, error) {
alert(status); //if any error
},
dataType: 'text'
});
$.ajax({
type: 'POST',
url: 'http://localhost/output_sample2.php/',
data: 'var1='+var1+'&var2=var2', //your variables sent as post at output_sample2.php
success: function( data ) {
//do success stuff
},
error: function(xhr, status, error) {
alert(status); //if any error
},
dataType: 'text'
});
Hope will give you some idea to start your work. For more info visit this link ajax example
I've posted the same question before, but I didn't get any feedback!However, I still can't solve this problem.
So I have an index.php which displays users in my database. I'm using a jquery UI dialog form to add new user.The problem is that I want to display a message when a new user is added and show it in the table that displays the user. I succeeded to add records to the database, but I have to refresh the entire page to make the new items added visible in the table. Here is my table :
<div id="users">
<tr>
<td>//users's informations</td>
</tr>
</div>
the jquery code that adds the users :
//some vars
dataString = //dataString
$.ajax({
type: "POST",
url: "create.php",
data: dataString,
success: function () {
$(#users).load("index.php", function () {
display_message("user added");)
};
}
});
$(this).dialog("close");
return false;
So when I click to create a new user ;it just shows me a blank page of index.php loading. Please help, thank you.
you have forgotten to place " around the selector
success: function() {
$("#users").load("index.php", function() {
-------------------^
display_message("user added");
)};
}
EDIT:
but I have to refresh the entire page to make the new items added visible in the table.
if you want to refresh the whole page either in the success callback or after the dialog close put this line
location.reload(true);
Assuming you are retreiving user's info from your ajax's request:
success: function(userinfos) {
$("#users").append($('<tr><td>'+userinfos+'</td></tr>'))
display_message("user added");
}
In your create.php, format the div with html. Make sure this html is printed in the page and not stored in a variable.
This is the format which you want to show in index.php. Then on your success function write it in the below way.
$.ajax({
type: "POST",
url: "create.php",
data: dataString,
success: function (data) {
$("#users tr td").html(data);
}
});