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);
Related
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 have two .cshtml webforms, in one webform I have Bootstrap header and in other webform I have one div containg form. Now I want to implement such thing like when I click any of links available in Header that time Jquery function will be called and it should get desired page and load it into defined div block.
My code is seems as bellow (header.cshtml) :
<html>
<head>
<script type="text/javascript" src="../assest/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
function myFunction(str) {
$(document).ready(function () {
//alert(str);
$.ajax({
type: "GET",
url: str + ".cshtml",
dataType: "html",
success: function (data) {
$("#form_load").html(data);
},
error: function (data) {
alert(data);
}
})
});
}
</script>
</head>
<body>
<div>
<a id="nav_link" onclick="myFunction(this.name)" name="farmer_master">Farmer</a>
</div>
<div id="form_load"></div>
</body>
</html>
other webform (farmer_master.cshtml) :
<div>
Hi I shoud be called !
</div>
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
I need to add polling mechanism to call a web service through my web page. For that I am trying to use an ajax call inside a javascript page. I am very new to ajax and javascript. I wrote the below code.
<html>
<head>
<script language="JavaScript" type="text/javascript">
function pollServerForNewMail() {
setTimeout(function(){
$.ajax({ url: "server", success: function(data){
alert("TEST");
poll();
}, dataType: "json"});
}, 10000);
</script>
</head>
<body>
</body>
</html>
What I need is to fire the alert TEST in every 10 seconds. Anybody please help me on this.
I will edit the post with my two jsp files.
index.jsp file
<html>
<table style="width:100%;text-align:center;'">
<tr>
<td style="text-align:center;width:100%">
<img src="images/import.png" />
</td>
</tr>
</table>
</html>
polling.jsp file
<html>
<head>
<script language="JavaScript" type="text/javascript">
function pollServerForNewMail() {
setTimeout(function(){
$.ajax({ url: "server", success: function(data){
alert("TEST");
poll();
}, dataType: "json"});
}, 10000);
}
pollServerForNewMail() ;
</script>
</head>
<body>
</body>
</html>
Thanks
setTimeout will fire a timer only once.
Use setInterval to execute code every X seconds:
function pollServerForNewMail() {
setInterval(function(){
// Code in this function will run every 10 seconds
$.ajax({ url: "server", success: function(data){
alert("TEST");
poll();
}, dataType: "json"});
}, 10000);
}
I solved my problem by changing polling.jsp file as below. I will add my solution.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var set_delay = 5000,
callout = function () {
$.ajax({
/* blah */
})
.done(function (response) {
alert("TEST");
})
.always(function () {
setTimeout(callout, set_delay);
});
};
callout();
</script>
</head>
<body>
</body>
</html>
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!