I am having a problem. Below is my code:
$(function() {
$('#find').on("click",function(){
name = $('#q_name').text();
location = $('#q_location').text();
city = $('#q_city').text();
alert("Clicked");
});
});
When this anchor tag whose id is find is clicked the alert "Clicked" appears then the whole page is reloaded. I am getting name, location and city values from p tags separately.
Also when I keep only one assignment and discard other two then page reloading stops and only alert occurs. This is the beginning as I have to send this collected data to via AJAX to controller function but first I want to stop reloading the page. What am I doing wrong?
P.S: I'm very new to jQuery and only know few of its basics. Please help.
You need to stop the default behaviour of the link (ie. changing the URL) by using event.preventDefault, try this:
$('#find').on("click", function(e){
e.preventDefault();
name = $('#q_name').text();
location = $('#q_location').text();
city = $('#q_city').text();
alert("Clicked");
});
Rename your location variable to location1.
i think it refer to browser location.
To stop the page reload and navigation behavior of anchor tag, you can use javascript:void(0) or event.preventDefault()
Click
Or
$(function() {
$('#find').on("click",function(e){
e.preventDefault()
name = $('#q_name').text();
location = $('#q_location').text();
city = $('#q_city').text();
alert("Clicked");
});
});
Now your page will not reload on click on this anchor tag.
try this. simple and easy
Modify the href attribute as given below
<a href="javascript:void(0)" onclick="whateverFunction()" >
Related
I want a javascript to check if there is a button in the webpage that is being visited with the class detail-w-button act_watchlink like the following:
<a href="link" class="detail-w-button act_watchlink">
And if that button exists, I want to store in a variable the href.
How can I do this automatically when the page loads?
Update:
I don't know if it helps, but I know that the page has the following code to listen to the button:
$('.act_watchlink').on('click', function(){...});
I think it would be fine to just triggering that action automatically.
How to check if a node exists with jQuery:
if($('a.detail-w-button.act_watchlink').length > 0)
alert("I found it!");
else
alert("There is no such button");
Get href of this button:
var href = $('a.detail-w-button.act_watchlink').attr('href');
If you want to improve performance, store the button in a local variable instead of searching it each time you need it.
Update: If it is possible to encounter more than one such button on a page, you should address a specific item in the array of found objects. Like this:
var href = $('a.detail-w-button.act_watchlink').first().attr('href');
// note the first()
var href = $('a.detail-w-button.act_watchlink').eq(2).attr('href');
// note the eq(2)
$('.act_watchlink').trigger('click');
We have a link on our page of which we want to track the usage. Currently, it's not really a link. It's a <div> tag with a data attribute containing the destination and a click handler bound to it.
When clicked, we send data to Google Analytics, and then trigger a page load with window.location = url after a short delay, so that we're sure that the data has gone through.
This approach works, but it has a major flaw: the clickable element is not actually a link, and behaves like one only in part. For example, I can't use my mouse wheel to click on it and have the link open in a separate tab (as you'd expect), or I can't right click on it and get a menu that is contextual to the link (because it's not a link).
Is there a way to use an <a> tag and get the behavior of a real link, intercept the click event, interact with Google Analytics and then follow the link normally after a small delay (to make sure the data goes through), without having to redirect ourselves and without having to lose functionality?
You can use event.preventDefault() to prevent the link from being followed:
$('a').click(function(e){
e.preventDefault();
var href = this.href;
setTimeout(function(){
window.location = href;
}, 2000)
});
With new HTML5 standards, couldn't you wrap your <div> in an <a> tag? Then you could do:
Inline:
<a href="yourawesomewebsite.com" id="gaEvent" target="_blank" onclick="_gaq.push(['_set', 'hitCallback', function(){window.location = this.href;}]); _gaq.push(['_trackEvent','category','action','label']);">
<div id ="blah"></div>
</a>
jQuery:
$('gaEvent').on('click', function(){
_gaq.push(['_set', 'hitCallback', function(){
window.location = url; // you'll still have to define this somewhere
}]);
_gaq.push(['_trackEvent','category','action','label']);
});
I totally referenced this SO post - Track event in google analytics upon clicking form submit
I have an div and inside that div I have a link as
<a href="#" onclick="Edit_popup();" >edit</a>
When I click on this link the whole page is getting refreshed. But I need only this div to be refreshed not whole page. I am calling this as :
function Edit_popup(){
var criteria=prompt("Please enter id");
if (id=="Login" || id=="login")
{
$("#criteria").load("page2.html");
}
Try with
<a href="#" onclick="Edit_popup(); return false;" >edit</a>
The reason the whole page is getting refreshed is because you have clicked on a link and the link's default behavior is to send you to it's href. (If you look at your browser's address line, you'll notice the URL ends in /#.)
The correct way to prevent this is to pass the event to the function
onclick="Edit_popup(e);"
and then stop the event's (in this case, the click's) default behavior:
function Edit_popup (e) {
var criteria=prompt("Please enter id");
e.preventDefault(); // this line cancels the link
if (id=="Login" || id=="login") {
$("#criteria").load("page2.html");
}
}
You can try using e.preventDefault(); inside your function so that you can do whatever you want then use e.preventDefault(); that 'll prevent the browser from performing the default action for that link.
kindly check this link to understand the difference between return false; and e.preventDefault(); return-false-and-prevent-default
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/
Sometimes it makes sense to have a link within a fancybox to launch another fancybox (or load content within the current one).
Say, you have a fancybox error message on login. You also have a "email me my password" widget that works via a fancybox. You may want to combine the two to say (in a fancybox):
Bad password!
Forgot my password!
Unfortunately, this will not work. I considered adding the following js:
$('#fancybox-content a').live('click', function(){
$(this).fancybox();
});
Surprisingly, this sort of worked: You have to click on the link twice and then the right thing happens. Ugh.
Finally, I found a hacky ugly work-around (it works!):
$('#fancybox-content a').live('click', function(){
var href = $(this).attr('href'); //assume there is a selector inside href
$.fancybox($(href).html()); //find the html manually and load
});
What is the right way to accomplish this?
This is i how i solved this problem in my projects:
$('a.fancybox').live("click",function(event) {
event.preventDefault();
var href = $(this).attr('href');
$.fancybox({href: href})
});
In this way you can add fancybox to any current un future A elements with .fancybox class so you don't have to define new events after opening fancybox.
Version 2 is already using "live", so using class names - `$(".fancybox").fancybox();' - would also work on elements loaded using ajax
You should be telling elements to open a Fancybox from within your plugin.
Somewhere you have the following ->
$(document).ready(function(){
$("#my_element").fancybox();
});
That's a very basic function to open a Fancybox, and not only that, but it will also what to open based on the href of the element. You don't need to do any leg work here.
So if you have ->
Forgot my password!
Simply add an ID, such as 'x' for simplicity ->
<a id="x" href="#forgot-password">Forgot my password!</a>
Then, enable the Fancybox plugin for this element.
$(document).ready(function(){
$("#my_element").fancybox();
//this is for our new container to fire
$("#x").fancybox();
});
That should be all you need.