Need to make a HTTP request on click of a button on a webpage! , please guide me with an Example that whether using AJAX + PHP is the way out or Javascript will be able to do the same alone?
The easiest way is to bind onclick to the button
`onclick='location.href="mynewpage.html"`
AJAX is actually part of JavaScript.
For simplicity, you might want to use a library such as jQuery.
Put this in the <head> section to load jQuery...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
And to execute an AJAX request, include this too...
<script type="text/javascript">
$('#id-of-your-button').onClick(function() {
$.ajax({
url: "backend.php"
}).success(function(data) {
// do something here
});
}
</script>
For more details on this function, refer to jQuery.ajax() here.
Related
Below is my code
<a class="foot" href="<?php echo someurl.com?id;?>" >Info</a>
Iam setting a click function for the class 'foot'
$('.foot').click(function(){
alert('run some functions');
});
As you can see on the code above First it runs Jquery later on it will be passed to specified Url... But is it possible to pass to specific url then run Jquery.. ???
You have to use Ajax request if you want to call the URL without moving to another page. otherwise your javascript code won't execute.
http://api.jquery.com/jQuery.ajax/
if you are doing this for a fallback in case your client doesn't support Javascipt then you have to do it like this.
$('a').click(function(e){
e.preventDefault();
//your code
});
if you want the code to run after page load then I suggest you introduce:
$(document).ready(handler)
That way jquery runs AFTER page load.
You need to use prventDefaults and then trigger document.location.href to your clicked link.
http://api.jquery.com/event.preventDefault/
Hopefully this will solve your problem.
Why you are not using $(document).ready(handler)
<script type="text/javascript">
$(document).ready(function() {
$('.foot').click(function(){
alert('run some functions');
});
});
</script>
<a class="foot" href="hello.php" >Info</a>
I am new to jQuery AJAX function. I want to redirect my user to a webpage when he clicks a button. Please do not tell me to target the button to the webpage as I have to do some working in the php file... My current code is :-
TEST.html file :-
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test2.php");
});
});
</script>
</head>
<button>Get External Content</button>
<div id="div1"></div>
</html>
Now my test2.php file is the following :-
<?php header("Location:http://google.com"); ?>
I am a beginner in AJAX jQuery. So, please do not downvote my post although it may sound silly. My code, for obvious reasons is not working. Please help me. Thanks in advance. Any help will be appreciated.
You cant redirect with an AJAX call. You can either create a simple link or link to a PHP page which then redirects the user on. Using AJAX will only let you manipulate this page you are on.
Of course, you can always redirect with simple Javascript as well.
window.location = '/my_url.php';
EDIT: In response to your comment question, what I would do is use the .get() function with the data parameter, check what has been returned from the PHP page if server side validation is required and then if I am happy with the result, redirect.
If no server side validation is needed, there is no need for AJAX.
Look at it this way: AJAX is requesting and reading the .php file. When AJAX sees the header("Location: ...") line, it redirects the AJAX request. Put simply, AJAX can't be used for redirects.
You can use the complete callback to redirect the user after the AJAX query has completed like so:
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test2.php",
complete: function(){
window.location = 'http://new_url';
}
);
});
});
That being said if you just want to redirect a user on a button click there are better ways to do that.
$("#div1").load("test2.php");
appends the contents which are
returned from test2.php , it will not redirect. The test2.php should return a link and populate the div with the link. Then write a callback on ajax success which will
redirect using window.location = target , the target being the link which was dynamically loaded in the div1
I'm using Javascript and I need to call a PHP file to execute some stuff, but I'd like not to use window.open("filename.php"); because it usually opens a new tab or new window.
Sometime a PHP file need a few seconds to finish its job and I don't like to see an open tab or open window while it's working.
Thanks
AJAX is the solution, and with jQuery it's so simple.
Just add this line on your head section (to include jquery):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "yourPage.php"
}).done(function( data) {
alert( "Request is done" );
});
</script>
You can use ajax or dynamically create iframe.
If you use extjs library - here is example ajax request
Use Ajax! Here's a solution using JavaScript's jQuery library:
$.post('your_file.php', {parameter : some_value}, function(response){
// now you can use `response` came from your_file.php after execution
});
$.post(), $.get() are shorthand methods for $.ajax() of jQuery.
or simply use .load(),
('#test_div').load('your_file.php'); //load data from server into `#test_div`
will do job, if you want to just execute something on server-side.
I have a facebook login button in my index.php page.
<fb:login-button onlogin="OnLogIn()"></fb:login-button>
when user click on the button, it calls a function OnLogIn() in javascript.
<script type="text/javascript">
function OnLogIn() {
if(FB.getSession()!=null){
//pass some value to save.php
}
}
</script>
What should i do to let the OnLogIn() call save.php page to store some data in the database?
You will need to use some form of AJAX to make a call to the server from JavaScript. See the jQuery AJAX libraries. However, you will want to make sure this call is secured, i.e., cannot be made manually by malicious users who want to add data to your database.
The answer you need is AJAX. I recommend spending some time learning how it works here.
AJAX will allow you to call a remote page on the server and get responses from it. That remote page can do anything that any normal php script could do, including as you need, save info to the database.
This is a skeleton for you:
<script type="text/javascript">
function OnLogIn() {
if(FB.getSession()!=null){
$.ajax({
url: 'save.php'
data: { }
}).success(function(data, status, xhr) {
});
}
}
</script>
hi i need to validate the next page before printing it ...
what i did is i used i frame in the first page and called the page i needed to print
but it fired the query in the first page which should have been fire in the second page after the submission or click of the button ...
so i need to fire the php function after the button click which calls a function in javascript how should i do this?
could anybody help me...
Okay, I am not familiar with your level of PHP knowledge, so I will start with some basics:
PHP is a server-side scripting language. It compiles in real-time when a page is requested. The server processes the HTML and PHP and serves an HTML only page to the browser. You cannot execute PHP code on the client side. There is no way to get PHP code running at the time of a button press without the use of AJAX. You could use AJAZ to make a request to the server at the press of the button and fill the iFrame with the output.
Hope that helps.
so i need to fire the php function after the button click which calls a
function in javascript how should i do
this?
I am not quite clear on why you would need to do this but here it goes...
In the button click handler you want to make an AJAX call. I use jQuery but you can use whatever framework or XMLHttpRequest function you wish.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function ButtonClickHanlder( e ) {
// Prevent the button from doing something it's normal functions(ie submit form if it is a submit)
e.preventDefault();
// Make AJAX Call
$.post("test.php", { call: "callMe" },
function(data){
alert("Data Loaded: " + data);
}
);
}
$(function(){
$('#clicker').click(ButtonClickHanlder);
});
</script>
</head>
<body>
<a id="clicker" href="#">test</a>
</body>
</html>
Reference: http://docs.jquery.com/Ajax
The test.php page
<?php
if(isset($_POST['call']) && $_POST['call'] == 'callMe') {
callMe();
}
function callMe() {
echo "I am a php function. You rang?";
}
?>