I know it's possible using jQuery to load/run an external web page. In the past I've used something like:
$.ajax({ url : 'test.php'})
What's I'm looking to do now is when a user click the 'GO' button an external PHP is called. Whilst it's running the main page should show 'please wait' and once the external script has finished the main page should update to show completed.
The php page I'm calling is actually running a shell script and I get no feedback from it. However the page runs and completes fine.
Is there anyway I can tell if it's still running and then update the main page ?
I'd be grateful if some one could point me in the right direction.
Thanks
UPDATE based on answer below.
<script type="text/javascript">
$(document).ready(function() {
$("#update").click(function() {
$("#status").html("<p>Please Wait!</p>");
$.ajax({ url : 'test.php' }).done(function() { $("#status").html("Completed"); });
});
});
</script>
<span id="status"><span>
<input type="button" id="update" value="Check for Update" />
Lets take an example:
you have this html:
<script type="text/javascript">
function updatecheck()
{
//Shows Please Wait in Status
$("#status").html("<p>Please Wait!</p>");
$.ajax({ url : 'test.php'})
.done(function() {
//Hides Status
$("#status").html("");
}
</script>
<span id="status"><span>
<input type="button" onclick="updatecheck()" value="Check for Update" />
.done will be triggered when the ajax request will be completed and it will hide the value.
In case you want to show completed instead of hiding value just use:
$("#status").html("Completed");
$.ajax({
url:"test.php",
beforeSend: function(){
//show the loading!
},
success:function(){
//hide the loading
}
})
you should also make shure that your server side script runs correctly! and response with a status ok!
Related
I have website that every page is being loaded using ajax both back to previous page, but the problem am facing now is submitting a form using ajax post. I try cache a form data with ajax and is working very fine except when i back to index.php and load same page again it will submit multiple time. And the more i back and load same page again it will submit how many time i loaded it.
What i really mean is, when i click on Open Page One from index page, and submit a form it will work at first browser reload. But when i use my ajax back button to navigate to index page and load that same Open Page One without reloading browser, it will submit two times and if i repeat same process again again, it will keep submitting based on how many time i click back and enter the page again.
Please can anyone help me i have also tried making the form id unique but it only work fine for different page ID.
INDEX.PHP
<div id="ShowPageContent">
Open Page One
Open Page Two
Open Page Three
</div>
<script>
$(function(){
"use strict";
$(document).on('click', '.loadwithajax', function(e){
var targetUrl = e.target.href;
var prevUrl = $(this).attr('data-page-link');
$.ajax({
type: "POST",
url: targetUrl,
data: {targetUrl : targetUrl, prevUrl : prevUrl},
async: false,
beforeSend: function(){},
success: function(htmlBlock){
$('#ShowPageContent').html(htmlBlock);
}
});
e.preventDefault();
});
});
</script>
OPENPAGE.PHP
<?php
$validateForm = 'validate-form-'.md5($_GET['targetUrl']);
?>
Back To Main Page
<form action="" method="post" class="<?php echo $validateForm;?>">
<input type="text" value=""/>
<input type="submit" value="Send"/>
</form>
<script>
$(function(){
"use strict";
$(document).on('submit', '.<?php echo $validateForm;?>', function(e){
$.ajax({
type: "POST",
url: ajax_appserver('shop', 'update_product.php'),
data: $(self).serialize(),
beforeSend: function(){},
success: function(data){
console.log(data);
}
});
e.preventDefault();
});
});
</script>
The problem happens because every time you load the page you attach an onsubmit handler to the document. Loading that page multiple times and document will have multiple copies of the same handler attached to it.
Adding $(document).off('submit', '.<?php echo $validateForm;?>') before $(document).on('submit'... will remove the previously attached handlers before adding a new one, and will solve your problem.
I have created a button in a view in Php codeignter.
View
<div id=div_signup>
<input id="btnRegisterID" name="btnRegister" style="margin-right: 5px;" value="Register" type="button" class="btn btn-success"/>
</div
Controller
public function register()
{
$this->load->view('MAIN\view_Register');
}
On click of this button I am making an ajax call and On success I am re-binding same view within a signup div again.
Which means after first event now button is reloaded by view.
Ajax call:
$(document).ready(function()
{
$("#btnRegisterID").on("click", function()
{
$.ajax({
type:'POST',
url:'http://localhost/Voyager/Main/register',
data:{},
success:function(){
$("#div_signup").load('http://localhost/Voyager/Main/register');
},
failure:function(){
alert("nooo");
}
});
});
});
On first click it works fine, ajax call is successful.
But on second click nothing is happening.
There is no error in browser console.
Can someone help with this.
Am I missing here something?
Update:
On success on ajax call I changed above code to location.reload(). Still issue isn't resolved.
success:function(){
location.reload();
},
Change you button click event to like this
$(document).on('click', '#btnRegisterID', function () {
// You ajax Code
})
TRY THIS
IN SUCCESS REMOVE
$("#div_signup").load('http://localhost/Voyager/Main/register');
REPLACE
location.reload();
Try window.location.reload() instead of location.reload();
Taking button outside that Panel worked for me partially.
However there was issue with my architecture in view. It is not possible to partially load a view in jquery without complete page refresh keeping data uptodate.
Thank you for all your help.
Entry level user here. I've seen countless AJAX\PHP examples with data being passed via POST or GET and modified one of their examples. When clicking the button (id="clickMe) I want it to execute advertise.php and nothing more (no variables need to be passed) without refreshing the page and a notification that says success. When I click the button with my current code nothing happens.
<button type="button" id="clickMe">CLICK ME TO RUN PHP</button>
<script type="text/javascript">
$(document).ready(function(){
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({
url: 'advertise.php',
data: {
'ajax': true
},
success: function(data) {
$('#data').text(data);
}
});
});
});
</script>
Updated, but still isn't executing.
Here is your editted version code:
$(document).ready(function(){
$('#clickMe').click(function(){
$.post("PHP_FILE.php",{ajax: true},function(data, status){
alert(data);
});
});
});
2 things - you need a document ready handler and to prevent the default click action.
$(document).ready(function() {
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({ // remainder of code...
});
When loading jQuery scripts at the top of the page you need to make sure they do not run until the DOM has loaded, that is what the document ready handler is for. The you capture the click event by including it as an argument for your click's callback function and handle the click with the preventDefault() method.
Since this request is "simple" you may want to consider using one of the shorthand methods, like $.post()
I am trying to create a button on my chat that will allow someone to print the conversation. So I made the button that runs a PHP script that creates a new file, writes the conversation to file, and also writes the following jQuery.
jQuery AJAX Call
function OnBeforeUnLoad () {
$.ajax({
type: 'GET',
url: 'deleteFile.php',
data: {
pageName: ".$pageName."
},
dataType: 'text',
success: function(data){alert('Good bye 1!');}
});
return;
}
HTML Put into page
<br/><br/><form method="get" action="deleteFile.php"> <input type="submit" value="Close this Window"/>
<input type="text" value="'.$pageName.'" name="pageName" style="visibility:hidden"/></form>
deleteFile.php
<?php
$pageName = $_GET['pageName'];
$fullURL = 'PrintPage'.$pageName.'.php';
unlink($fullURL);
echo '<script>window.close();</script>';
?>
When the page shows up and I click the "Close this Window" button it does exactly what I want. It deletes the file and closes the window. But I do not get the same results when I close the window (aka OnBeforeUnLoad()). I even tried triggering submit by giving the form an id of deleteFiles and then doing $('#deleteFiles').submit() and it still didn't work.
How do I get the AJAX to work within the OnBeforeUnLoad function?
The form calls the data pageName but the ajax calls it url.
You probably don't want to prefix and suffix the value with . characters either.
Feel like a dummy.... After making all those changes... I found out all I needed to do was add
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to the header.
Because I was dynamically creating the page in php, I forgot I needed to readd the jQuery.
Always the small things.. Thanks everyone for the help.
I am trying to run this tutorial
i did not implement the validation part yet, but my problem shouldn't be based on this. Here is my code:
<script type="text/javascript">
$("#submitbutton").click(function () {
var content = $.("#contentarea").val();
$.ajax({
type: "POST",
url: "addArticle.php",
data: content,
success: $.("#addArticle").append("<p>ok</p>")
});
return false;
})
</script>
As seen in the demo, it should not refresh the page because of the return false statement and also should do a post instead of get. But neither it does. It will continue to reload the page and also append the given content to the url as an argument. How do i prevent this / where is my failure?
Here is the whole thing
The tutorial you have followed is incorrect. There are more ways to submit a form than just clicking on its submit button (for example, you can press return while in a text field). You need to bind your code to the form's submit() event instead of the button's click() event.
Once you have done this, use your in-browser debugger to check whether the code is actually being run when you submit the form.
Also, the success parameter needs to be a function:
submit: function() { $("#addArticle").append("<p>ok</p>") }
EDIT : also, you have written $.( instead of $( several times. This will cause a runtime error, which may cause the code that blocks the submission to fail.
Well well well...
A few less nerves later, it works.
I decided to use the jquery form plugin
But, and i bet you'll love that, i have no idea why it is working:
<script>
$(document).ready(function() {
$('#addForm').ajaxForm(function() {
alert("ok");
});
});
</script>
<div id="addArticle">
<form id="addForm" method="post" action="addArticle.php">
<textarea id="contentarea" required="required" name="content"> </textarea>
<br />
<input type="submit" id="submitbutton">
</form>
</div>
I guess the author has done pretty good work, just wanted to tell my solution to that future guy who is searching on google for that problem.