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>
Related
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 want to execute a php code when a user click on a given link , i've tried the following code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$.get("up.php");
return false;
}
</script>
</head>
<body>
<center>
Click Me!
</center>
</body>
</html>
where up.php is a php code that implement android GCM mechanism similer to the one in the link : GCM with PHP (Google Cloud Messaging)
but unfortunately when the link is clicked nothing happens , the php code not executed ,and only the url of the page change form *****.com/test.html to *****.com/test.html# , and by the way I've tested the php code and its works fine so it is not a problem in php code , so what i have missed here? why the code is not executed?
i found the solution , the problem that the jquery library is not included probably in my code
you are using jquery. $.get() will be something like below.
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
for further help check http://api.jquery.com/jQuery.get/
Sometimes, you may need to call some JavaScript from within a link. Normally, when user click on a link, the browser loads a new page (or refreshes the same page).
This might not always be desirable. For example, you might only want to dynamically update a form field when the user clicks a link.
To prevent the load from refreshing, you could use the JavaScript void() function and pass a parameter of 0 (zero) as below.
<a href="JavaScript:void(0);" onclick="return doSomething(); " />Click Me!</a>
Now if you want to use href="#", make sure onclick always contains return false; at the end.
OR
Use href="javascript:void(0)"
You can also use jQuery Load
function doSomething() {
$('#result').load('up.php', function() {
alert('Load was performed.');
});
}
When you are using Jquery should be :
function doSomething(){
$.get('up.php', function(data) {
$('.data').html(data);
});
}
Link
To stop page refreshing, you can use the javascript void() function and pass parameter of 0.
Click Me!
<div class="data"></div>
This div is used to display up.php result.
Ok start of by using fire bug and watch the console and network panels
Ensure the browser is trying to get something and not returning a 404 or a php error on the get
Look into prevent default http://api.jquery.com/event.preventDefault/
To stop the original link functionality working
If you still want them to move to the link use a window location or...
Look into bootstrap link buttons
http://twitter.github.com/bootstrap/base-css.html#buttons
( the link button )
I'm currently working on a website and I would like to be able to do the following:
when clicking one of the links from the sideMenu the only thing I would like to change would be the content of my contentMain div and nothing else(page layout/design/etc)
Could anybody give me some general pointers on how I could achieve this in php?
Thank You in advance :D
This is a client-side change that cannot be accomplished using PHP. PHP is evaluated on the server-side, so once the page is loaded for the user, it has no control over what the user sees (unless you use client-side code to call PHP).
To accomplish this, you will need to use Javascript and/or jQuery.
Reference: https://developer.mozilla.org/en/JavaScript/
jQuery: http://jquery.org/
iFrame, frameset or AJAX all work for your case depending on what you are actually trying to achieve.
For AJAX calls (the most modern way out of the three that relies on Javascript) you can use a library such as jQuery.
http://api.jquery.com/category/ajax/
You can use ajax for this one. Using jQuery to detect the click on the link or use normal JavaScript onClick function. Then do the things like you want.
<a href="" id="my_link">My link<a>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#my_link').click(function(){
jQuery.ajax({
url: 'ajax page need to be called',
success: function(data) {
//do your operations on success
}
});
});
});
</script>
You can get more details on :
jQuery
jQuery Ajax
Hope this helps you
I'm trying to figure out how I can pass data from page-list.php to page.php using jQuery .post() and .click().
Code in <head> of page-list.php:
<script type="text/javascript">
$(document).ready(function(){
$('button.link').click(function () {
$.post("page.php", {pageID: "1"} );
}
});
</script>
Code in <body> of page-list.php:
<button class="btn link">LINK</button>
When I click LINK, nothing happens.
I'm also not sure how to call the posted data on page.php. Should I create a variable in PHP like this?
$pageID = ($_POST['pageID']);
And then call it in the body like this?
echo $pageID;
If I understand correctly what you are trying to do is $.post() a variable to "page.php" and then redirecting to "page.php".
If that is what you are trying to do it just won't work. $_POST requests are independent of each other, i.e. using $.post, accessing $_POST['pageID'] will result in whatever value you sent but won't display anything because the browser was not sent to the new page with the variables; but redirecting and trying to access the same variable will result in "null".
It is that same reason that when you use a log in system and refresh the page right afterwards the browser confirms that you want to send the information again.
Using $_GET might be more of what you need. Another option would be to use and form to post the variables.
I hope that helps.
For one thing you are missing a couple of characters.
<script type="text/javascript">
$(document).ready(function(){
$('button.link').click(function () {
$.post("page.php", {pageID: "1"} );
}); // missing end of statement.
});
</script>
Consider the following code:
<script src="js/backgroundChanger.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.Themes').click(function(){
$('#dcontent').load('printThumbs.php');
});
});
</script>
The first script is for background changing logic and the second script gives list of thumbnails of the themes. The problem is that the first script doesn't work beacause of the second. If I don't use this AJAX technique everything works fine. Working code:
<script src="js/backgroundChanger.js" type="text/javascript"></script>
<div id="dcontent">
<?php include('printThumbs.php'); printThemesThumbs();?>
</div>
The background changing logic looks like:
$(function() {
$('.themes li a img').click(function() {//code
});
Any help will be greatly appreciated.
in your first snippet of the code you defined a click function on .Theme and in the third snippet of the code .theme, is this correct?, i mean both classes seems to be different try to use the same class name return by your php function.
You're calling $(document).ready() twice, as $() is an alias, and the second definition is overwriting the first. First you are setting the document ready callback to
function() {
$('.themes li a img').click(function() {//code
}
and then overwriting it with
function() {
$('.Themes').click(function(){
$('#dcontent').load('printThumbs.php');
});
}
you have to add your second code in a callback function. you can't bind something if it is not already in the dom. if you want to make changes to the printThumbs output you need to add a callback...
<script>
$(document).ready(function() {//this is also a callback function when document is ready
$('.Themes').click(function(){//this can be understand as a call back too... code is fired after a click
$('#dcontent').load('printThumbs.php',function(){/*your callback code here...this code will be fired after you've loaded printThumbs*/}
});
});
</script>
if you want to do some jquery or other client side stuff on the respons of an ajax call (html,xml, json or whatever) you have to specify a callback function. to make things less complicated you have to look at the callback function just as the on document ready function with the difference that the callback is applied to the respons of your ajax call. if the code is not in a callback function you can't manipulate the respons because it is not injected in the dom/it simply does not exists in your browser when the document is ready.