I don't know which tag or event to use. But I would like some way to make jQuery do a click function or "click" a link when the page is loaded. The script is getting a specific data from the URL. If the url sais: www.domain.com/index.php?a=1&b=1234 then I would like something like this in the beginning:
<?php$a = $_GET['a'];$b = $_GET['b'];if ($a == '1') {//echo jQuery script that automatically clicks the <a> tag}?>
and then the HTML script is like this:
jQuery Click
Please help me
You'll need the .trigger method.
$('a#YOUR_ID').click();
or
$('a#YOUR_ID').trigger('click');
or
$('a.YOUR_CLASS').click();
or using href
$('a[href^="page2.php"]').click();
First one is preferred. You should make selector with your ID of CLASS belongs to that a.
NOTE: a[href="page2.php"] means a tag which href beginning exactly with page2.php
If none of above works then try:
window.location = document.location.hostname + '/' + $('a[href^="page2.php"]').attr('href');
Two open a popup try this:
var urlToOpen = document.location.hostname + '/' + $('a[href^="page2.php"]').attr('href');
window.open (urlToOpen,"mywindow","menubar=1,resizable=1,width=350,height=250");
Detail about window.open()
Do this :
$("a[href='page2.php']").click();
or prefferably use an ID
$("a#myID").click();
You can get more information in the jQuery documentation or perhaps a tutorial at jQuery.
To answer your specific question, I believe you are looking for something similar to:
$(document).ready(function() {
$('#autoclick').click();
});
My recommendation would be to apply an id in the corresponding html:
<a id="autoclick" href="/somewhere-else">This is a link</a>
Hope that helps you get started.
Note: The click() has this as a specific shortcut for trigger("click") since v1.0. Ref: jQuery click
Related
I want to access php id on the same page for this i want something like this:
href="?id='.$row["id"].'"
but i want to show popup and not want the page to get refresh so i can show my result on my popup on the same page.
href="#?id='.$row["id"].'" // using hash will not make it work.
Any help would be appreciated.
you can add a rel parameter to anchor tag and get that parameter using jquery or javascript.
<a href="javascirpt:void(0)" class="item" rel="id_$row["id"]" />
$('a.item').click(function() {
var getvalue = $(this).attr('rel');
});
I had the same issue. Use this:
<a href="javascirpt:void(0)" rel='.$row["id"].' class="showpopup">
$(".showpopup").click(function(ev)
{
var getid = $(this).attr('rel'); // get id value
alert(getid); // check to see if you are getting the value.
ev.preventDefault();
}
thats it enjoy :)
Parameter preceded by # will not reach the server-side script. That can be accessed only by Javascript.
Yes it's true, the server doesn't get the anchor part. However there is a workaround using cookies. You can find it here: http://www.stoimen.com/blog/2009/04/15/read-the-anchor-part-of-the-url-with-php/
This is my first attempt at jQuery and I'm using a basic tutorial I found here: http://papermashup.com/simple-jquery-showhide-div/#
This is my current code and how the jQuery works: http://jsfiddle.net/mZQsu/
As you can see, when you click the '+/-' it opens all 4 of the tables/DIVs.
How can I modify this code to open just the relevant secondary table/div according to the original table?
(Please note the secondary tables are generated dynamically from PHP and SQL data)
Thanks.
P.S all my code is here http://jsfiddle.net/mZQsu/ instead of clogging up this question page :)
DEMO fiddle
$('.toggler').click(function() { // had to differentiate the main togglers with a new class
var ind = $(this).parents('tr').index()-1; // could change
$(".slidingDiv").eq(ind).slideToggle();
});
$('.show_hide').click(function() { // this are the 'togglers' inside the big menus
$(this).parents(".slidingDiv").slideToggle();
});
The best solution would be if you tag each of your div's with an id. E.g.
<div class="slidingDiv" id="ip_127_0_0_1">
and then modify the equivalent links to do
$("#ip_127_0_0_1").slideToggle();
so just the associated div gets expanded.
See my updated fiddle: http://jsfiddle.net/mZQsu/1/
You can use the index of the row, and toggle only the matching row of the other table using jQuery index and eq
See the relivant docs here:
jQuery index
jQuery eq
This should work:
$('.show_hide').click(function() {
$(this).parents(".slidingDiv").slideToggle();
});
Since the slidingDiv class is a direct parent of the show_hide link, I could have used "parent" rather than "parents". The latter provides more flexibility because it traverses all ancestors looking for the class.
Here is a modified code - http://jsfiddle.net/mZQsu/3/
I have added show-hide1, show-hide2, show-hide3, show-hide4.
And clicking on it opens respectively slidingDiv1, slidingDiv2, slidingDiv3, slidingDiv4.
When you are binding to an event: You can always grab that event target and reference it.
$('.show_hide').click(function(e) {
$(e.target).parent("div.slidingDiv").slideToggle();
});
.parent() is a good place to start, but .closest() also might work. That being said, this is the preferred way to go about it.
On a side note if you ever want to do the opposite you could use .not(e.target) and all the other elements except for the one your click will be called.
Since your html is PHP-generated, it should not be a problem to include unique IDs for both +- links and sliding divs, for example:
a href="#" class="show_hide" id="show_hide2"
And
div class="slidingDiv" id="slidingDiv2"
Then in your click function you get the index of the div that you want to open:
$(.show_hide).click(function(){
var $str = $(this).attr('id');
var $index = $str.charAt( $str.length-1 );
});
Now you can use index to open the div:
var divName = "#slidingDiv" + $index;
$(divName).slideToggle();
I tried to understand - is it any method to ask browser not to refresh entire page when user clicks onto . Hash adding method is seen - I need another method, working with links without hashes.
May be any headers should be sent ? Or something another ?
I want to process GET queries returning only the part of HTML (or special js commands), not all page, and process it in AJAX-style.
You can ajaxify your links through jquery. Something like this:
$('a.ajax').click(function(ev){
ev.preventDefault();
var target=$(this).attr('data-target');
var url=$(this).attr('href');
$(target).load(url+' '+target);
}
This can be used in conduction with the following HTML:
<div id="output">
Hello World
<div>
and inside world.html you would need to have:
<div id="output">
Foo bar baz boo
</div>
In theory this should load content of the dif from "world" file into the div inside the first file, but I haven't tried it. I think it's what you need, because the regular link is still there, google will properly index this bypassing ajax and your users will be happy to see part of the page change.
you could make it 'fake' links doing something like this:
<span style="cursor:pointer;" onclick="loadPage('mypagename');">My Link</span>
The function then would be:
function loadPage(pageName){
// do ajax call here using pageName var
}
You cannot prevent navigation when a user clicks a hyperlink with a URL. Using a hash value to navigate or having your hyperlinks invoke JavaScript is generally the way to add navigation inside of a single page.
However, if you're trying to convert an existing page that's not designed this way, you would have to use JavaScript to modify hyperlinks so they invoke Ajax. For example:
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var oldUrl = links[i].getAttribute('href');
links[i].setAttribute('href', 'javascript:void(0)');
links[i].onclick = (function(url) {
return function() {
// Then you can do your AJAX code here
}
})(oldUrl);
}
I recommend that you don't do something like this, though, and rather create your page with an AJAX design in mind.
Changing the url without using hashes can be achieved with the Html5 History API: http://html5demos.com/history
Not supported by older browser though, so you must always have a fallback.
My blog has its posts links. What I need is code that will do this: when a user clicks on a post link, a parameter will be added to the link which I'll use with a get function on the other page.
This is my link - link which is visible and indexed by google:
my post link
When a user clicks on it, I need a way to add ?car=type to the link, http://www.mysite.com/post1/?car=type.
I'd like to do this with jQuery.
P.S.
I can't just add my car variable to the links in normal html, becouse Google will index them badly, the variables change every day and I'd get pages not found all over the serps.
Any idee?
Ty!
Well...
$(document).ready(function() {
$("a").click(function() {
this.href += "?car=type";
});
});
Live test case: http://jsfiddle.net/y6PrF/
If you mark the desingated links in a way such as a class (say addType):
<a href="http://www.mysite.com/post1/" class="addType" >my post link</a>
you can do something like this on document load, no need to wait for click to do it:
$(function() {
$("a.addType").attr("href",function() {return this + "?car=type";});
});
Here's a jsfiddle example: http://jsfiddle.net/nbKPu/
I have this PHP code which outputs HTML anchor elements on a page:
if(!$isOnOwnPage)
echo '<a id="message-button" class="button">Message</a>';
if($isOnOwnPage)
echo '<a id="add-img-button" class="button">Add Image';
else if(!$isFollowing)
echo '<a id="follow-button" class="button">Follow';
else
echo '<a id="follow-button" class="button">Unfollow';
echo "</a>";
When I load the web page, I get this, as expected:
...
<a id="message-button" class="button">Message</a><a id="follow-button" class="button">Unfollow</a>
...
But when I try to attach a click() function to it, the clicking doesn't work. This is the jQuery code. (It's weird because all of my other JS on the page works flawlessly."
$('.button').click(function() { alert("HEY"); }); // It doesn't work grabbing by #follow-button or #message-button either.
What did I do wrong here? I've spent an hour looking at these snippets of code to no avail.
Try this:
$('.button').live('click',function() { alert("HEY"); });
Put it in your $(document).ready function.
Gonna go out on a limb and guess that you've forgotten to wait for document.ready and that the a.button element doesn't exist when the click event is bound.
Is ajax included somehow? Because then you need to either use the live, or re-apply the function.
It should work regardless if it's PHP generated. In the end it's still HTML that gets output to the client.
I think you should make sure that the JS code gets to the part where you assign clicks to the buttons. Maybe there's not document ready or a correct one. Maybe there's a boolean IF that doesn't get passed.
All in all, if you can see the code in the View Source page, then it's a HTML/JS problem, not a PHP one.
This is an old question, but to all there who want to add listeners to dynamic content, instead of using $('a').(click(function(){}) or $('a').on('click',function(){}), you need to use instead the document as the object you want to attach the listeners, because the tag you are inserting wasn't in the DOM when the listener was assigned.
So instead you should use:
$(document).on('click','a',function(){ ... });