I have an index.php file. My wish is that, when clicking on a button (which is in index.php) an AJAX request should load about.php and include it inside a div tag in index.php.
Below is my code. But this is not working:
index.php:
<a href=javascript:onClick('about.php')>About</a>
<div id='dynamo'>
<?php
if($_POST){
$page=$_POST['page'];
include $page;
}
?>
</div>
PageSelect.js
function onClick(text){
$.ajax({
type:"POST",
url:"index.php",
datastring:'page='+text
});
}
You need something like this (with Jquery):
HTML:
About
<div id="render"></div>
JS:
$(document).ready(function () {
$('#click').click(function () {
$.ajax({
url: "about.php",
success: function (response) {
$('#render').html(response);
}
});
});
});
JSFiddle
Related
There are many stackoverflow entries about div refresh. I tryed some codes but I dont get it to work.
In my DIV I want to call a php function (get current database entries). What should I change? Is it even possible to reload a div to make a new php function call?
my index_design.php:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script>
<body onload="startTime()">
<div id="ajaxcontainer">
<div>
<?php $mycontroller->getEntries(); ?>
</div>
<div>
<?php $mycontroller->getEntries2(); ?>
</div>
</div>
</body>
<script type="text/javascript" src="js/javascript.js"></script>
<script type="text/javascript" src="js/javascript_document_ready.js"></script>
my javascript_document_ready.js:
$(document).ready(function () {
function loadlink(){
$('#ajaxcontainer').load('index_design.php',function () {
$(this).unwrap();
});
}
loadlink();
setInterval(function(){
loadlink()
}, 10000);
}
Projectfolder:
index_design.php
Folder (JS) -> javascript.js
Folder (JS) -> javascript_document_ready.js
Try to use AJAX.
setInterval(_ => {
$.ajax({
url: "index_design.php",
type: "GET",
dataType: "html",
success: html => {
$("#ajaxcontainer").html(html);
}
});
}, 10000);
Page1.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<input type="hidden" value="valuetest" id="idinput">
<div onclick="myfunction()" style="height: 30px;width: 30px;background: gray;">
<div id="receive"></div>
</div>
<script type="text/javascript">
function myfunction() {
$.ajax({
type: "POST",
url: "page2.php",
data: {
sendpost: $('#idinput').val()
},
success: function(data) {
$('#receive').html(data);
}
});
function myfunction2(){
}
}
</script>
</body>
</html>
Page2.php
<?php
$var = $_POST['sendpost']; //This line is not in use
echo "return";
?>
This code is working perfectly! Page1 sends the value valuetest to page2 without the need to refresh the page. The echo of page2 returns the value return to page1 inserting this into div="receive". So far so good. I want instead of having a div="receive" receive a value, it triggers the function myfunction2 or any other method that allows me to style the page1 (css).
In short: the return of page2 should only serve to call a method of page1.
You can just pass your function as a success callback.
<script type="text/javascript">
function myfunction() {
$.ajax({
type: "POST",
url: "page2.php",
data: {
sendpost: $('#idinput').val()
},
success: myfunction2
});
function myfunction2(){
}
}
</script>
And if you want to return a string that trigger a function, you can return the name of the function and pass it to the eval() function which evaluate a string.
// In your php
<?php
$var = $_POST['sendpost']; //This line is not in use
echo "myfunction2()";
// In your js
success: function(data) {
eval(data); // Call the function returned by your PHP
}
I want to increment count field in database when a link is clicked in php file.
So, I've added the following jquery part to my .php file. But still, it doesn't work. Please help!
<body>
click here
<script>
$(function ()
{
$('#click').click(function()
{
var request = $.ajax(
{
type: "POST",
url: "code.php"
});
});
}
</script>
</body>
code.php:
<?php
$conn=mysqli_connect("localhost","root","","sample");
mysqli_query($conn,"UPDATE e set count=(count+1) WHERE sid='1'");
mysqli_close($connection);
?>
You made a several mistakes in your code.
Update
You can send your SID input type text from ajax with data and you can get the value in your php file with the $sid = $_POST['sid'].
<body>
click here
<input type="text" value="" name="sid" id="sid">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(e){
$('#click').click(function(event)
{
var sidvalue = $("#sid").val(); /*from here you get value of your sid input box*/
event.preventDefault();
var request = $.ajax(
{
type: "POST",
url: "code.php",
data: 'sid='+sidvalue ,
success: function() {
window.location.href = 'https://www.google.com/';
}
});
});
});
</script>
After the ajax success response you can make redirect to your desire location.
Code.php
<?php
$conn=mysqli_connect("localhost","root","","sample");
$sid = $_POST['sid']; // use this variable at anywhere you want.
mysqli_query($conn,"UPDATE e set count=(count+1) WHERE sid='1'");
mysqli_close($conn);
?>
in code.php in mysqli_close you should use $conn not $connection.
Go with this code. It might help you. I have just tested all the things in localhost. This is working perfect.
use preventDefault() when click event is called.check jquery :
<body>
click here
<script>
$(function ()
{
$('#click').click(function(e)
{
e.preventDefault();
var request = $.ajax(
{
type: "POST",
url: "code.php"
});
});
}
</script>
</body>
Redirect your link on ajax success. Like this -
<body>
click here
<script>
$(function ()
{
$('#click').click(function()
{
var request = $.ajax(
{
type: "POST",
url: "code.php",
success: function(response){
window.location="http://www.google.com";
}
});
});
}
</script>
I have a problem that my Js file is not recognizing a php variable built by ajax.
Here is an example:
index.php:
<script src="js.js">
</script>
<?
include('build.php');
<div id="brand">
<?
echo $brandinput;
?>
</div>
//....more code
?>
build.php:
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
crossOrigin: true,
dataType: "jsonp",
type: "GET",
url: "getBrand.php",
data: info,
success: function(data){
$("#result").html(data);
}
});
</script>
<?php $brandinput='<div id="result"></div>';
?>
js.js:
$(document).ready(function(){
//dosomething with div's in index.php
}
So, I'll try to explain this in the easiest way. My index.php includes a build.php which as you can see calls ajax to retrieve data from another server. This data is located in a php variable ($brandinput) which will contain many <div>,<input>,... etc. Then index.php echo $brandinput, showing all the content of the variable. But I have a js.js which change appearances in div's, input's, etc.. and is this js which is not recognizing the content of the variable $brandinput.
I'd like to know if you have more ideas or what am I doing wrong...
All the code is working well, I tested many times (except for what I said before)
The ajax call work well and Index.php displays $braninput correctly.
p.s. $brandinput is something like this:
<div id='BlackBerry'><img src='..\/images\/supporteddevices\/blackberry-logo.jpg' alt='blackberry-logo' width='75'><br><input class='adjustRadio' type='radio'
and yeah it works well too.
Actually this is how it supposed to be working, what you need to do is to wait for the ajax request to finish first before executing the functions in js.js
try this way
// in build.php
$(document).ready(function () {
var promise = $.ajax({
crossOrigin: true,
dataType: "jsonp",
type: "GET",
url: "getBrand.php",
data: info,
success: function (data) {
$("#result").html(data);
//dosomething with div's in index.php
}
});
});
or (assuming js.js is loaded after the script within build.php, or js.js has to be loaded after it)
// in build.php
$(document).ready(function () {
var promise = $.ajax({
crossOrigin: true,
dataType: "jsonp",
type: "GET",
url: "getBrand.php",
data: info,
success: function (data) {
$("#result").html(data);
}
});
});
// in js.js
$(document).ready(function () {
promise.then(function (data) {
//dosomething with div's in index.php
});
});
P.S
$brandinput just hold the string whatever assigned to, and will never be changed with ajax request, where ajax success handler just manipulate the rendered DOM directly in the client side.
You can try moving your <script> tag to after your php codes like this:
<? include('build.php'); ?>
<div id="brand">
<? echo $brandinput; ?>
</div>
<script src="js.js"></script>
//....more code
On a slightly different note, you should consider avoid embedding/intermixing PHP codes with HTML and Javascript. Take a look at this post for better ways way "passing data from PHP to Javascript".
So I have a page which, when requested, updates my database. For example when I go to database_update.php it just updates the database and doesn't show anything.
Index.php shows user database content.
So I have function in JavaScript called update which must use AJAX to run this page and after the page loads (after all queries run successfully) it must load index.php and show updated page to the user (reload the page without refresh effect).
My code is like:
$.get('ajax_update_table.php', {
// The following is important because page saves to another table
// users nick which call update:
update: UserLogin
}, function (output) {
// The following is unimportant:
$(myDiv).html(output).show();
});
Two suggestions:
Return a "success" or "error" code from your database_update script. Returning a JSON string is very easy. For example:
echo '{"success":"success"}';
Use the $.ajax function. Then add the success, error, and complete parameters. You can call any javascript function(s) when the AJAX request is complete.
$.ajax({
url: 'update_database.php',
dataType: 'json',
success: function (data) {successFunction(data)},
error: function () { error(); },
complete: function () { complete(); }
});
function successFunction(data) {
if ('success' in data) {
// Do success stuff here.
} else {
// Show errors here
}
}
// .... etc
I might be missing something, but I'll try to answer your question.
I would setup a blank page that on loading it sends the index.php to a div on that page. For example, make a page titled blank.php.
blank.php would have the following:
function Index(){
$.ajax({
url:"index.php",
type: "GET",
success:function(result){
$("#web-content").html(result);
}
});
}
<script type="text/javascript">Index();</script>
<div id="web-content"></div>
You would then have your index execute the Index function to update the web-content div with the index.php data without reloading the blank.php page.
Got it to work!
my index.php
<html>
<head>
<script type="text/javascript" language="Javascript" SRC="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="Javascript">
function update_and_replace()
{
$.ajax({
url: 'ajax_update_table.php',
dataType: 'json',
success: function (data) {successFunction(data)},
error: function () { error(); },
complete: function () { complete(); }
});
}
function successFunction(data) {
if ('success' in data) {
$("#content").load("index.php");
}
}
</script>
</head>
<body>
<div id='content'>
Now is: <?php echo date("Y-m-d, H:i:s");?>
<br/><br/><br/><br/>
Aktualizuj
</div>
</body>
</html>
Ajax_update_table.php
<?php echo '{"success":"success"}'; ?>
Thank You all for your help.
I know that my English is bad but with your help I made it!