JQuery add event to anchor and get url - javascript

I am trying to get the childBrowser plugin to work on links by adding the code at runtime to links.
Normally, if I was adding to code manually to the links, this is how it would look:
<a href="#" window.plugins.childBrowser.showWebPage('http://www.google.com');>click me</a>
Now, because I need to do it at runtime I've got this together:
$('a').on('click', function () {
window.plugins.childBrowser.showWebPage('http://www.google.com');
});
But the problem is that all links might have a different url so I need to somehow use the code about but with the link that it comes with and not a hardcoded url as above.
Links would initially look like below.
click me
How could I do this?

Use this.href
$('a').on('click', function () {
window.plugins.childBrowser.showWebPage(this.href);
return false;
});

Try this
$('a').on('click', function () {
window.plugins.childBrowser.showWebPage($(this).attr('href'));
});

Related

The onclick function not work in safari

Please help me on this how can i use hash function to go to another tab or id without location.reload();.
it should be needed to go to the download tab or id without needing to refresh the page.
here is my code
<script>
function Download() {
window.location.hash = "#Download";
location.reload();
}
</script>
Do you actually need to use JavaScript for this? What about just using #href attributes to go to another <a> link on the page?
Something like this:
<a id='first' href='#second'>Go to Second Link.</a>
<a id='second' href='#first'>Return to First Link.</a>
See this fiddle for example: https://jsfiddle.net/3axqpr1x/1/
you can try this one;
<script>
function Download() {
window.location.hash = "#Download";
location.reload();
}
</script>
Please refer this page Javascript reload the page with hash value

Hash link disables relative link in HTML

I'm building a webapp that basically its an one-page webapp so to link to another part of the app is like this:
This is possible because I used JavaScript that contains animations and different stuff, the problem is that somehow, this method disables the possibility to link like this:
How can I have both links, without disabling the hash links?
EDIT: To be honest I dont know which part of the js its causing this behaviour because I took a template, but here is the js:
https://github.com/gomobile/template-list-view/blob/master/www/lib/appframework/appframework.ui.min.js
I believe you have a code like this
$('a').on('click', function(e) {
e.preventDefault();
});
You need to have an if like
if ($(this).attr('href').indexOf('#') == 0) {
e.preventDefault();
}
OR better change the selector to:
$("a[href^=#]").on('click', function(e) {
e.preventDefault();
// your animation here.
});
This code will just apply to anchor elements that have the href starting with #
------- update --------
You added a minified js :).
If you don't have the problem in your code, you can fix it with a hack like this:
$('a:not([href^=#])').on('click', function(e) {
window.location.href = $(this).attr('href');
});
But you should really find the issue, not fix it like this :)

Small riddle: Why this isn't working on Chrome?

Any ideas on why the following code perfectly 'posts' when using FF (I can see the DB updated) but fails on Chrome?
$("a").click(function() {
$.post("ajax/update_count.php", {site: 'http://mysite.com'});
});
Tip: jQuery version is jquery-1.4.3.min.js
Update
The issue seems to be that when the link is clicked, a new page is loaded, which seems to be stopping the post in Chrome... Is that a possible explanation? If so, what can I do?
You need to prevent the default behavior of an <a>. Use this:
$("a").click(function (e) {
e.preventDefault();
// Your code
});
or, if you actually want the link to load the new page, you could try:
$("a").click(function (e) {
e.preventDefault();
var href = this.href;
// Might want to put a "loading" spinner on the page here
$.post("whatever", {}, function () {
window.location.href = href;
});
});
Might have to change it a little - maybe use $(this).attr("href") or $(this).prop("href"), not this.href...the differences those evaluate to may or may not work with window.location.href (I'm sure both do).

Ajax inserted content not accessible in DOM

I am working on a pure jquery/js site, mostly to practice some jquery. I am using a load statement to load a menu from a file of common html, like so:
$('#categoryListing').load('../common.html #categoryLinksUL');
which loads:
<ul id="categoryLinksUL">
<li>Anklets</li>
<li>Bracelets</li>
</ul>
The problem is where I am using it now I need to alter the href of the above links, but they are not part of the dom. In previous instances I was able to use .live(click... But not here. Is there a way I can accomplish this?
Specifically I need to load the links and change the href from #anklets to ?category=anklets
What about the following?
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('li a[href^="#"']').each(function () {
this.href = '?category=' + this.href.substr(1);
});
});
In my example, after the load is completed, the anonymous function is called. It takes every anchor with a hash HREF and replaces it with an HREF based on your description.
Thank you Dimitry, you solution basically worked. I finally used:
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('#categoryListing li a').each(function () {
var hashPos=this.href.indexOf("#");
var tCategory = this.href.substr(hashPos+1,this.href.length );
});
});
So why did jQuery recognize categoryListing there? I tried moving the each function outside of the load function and categoryListing did not contain any links. Is it because maybe the load was not completed when it tried to get categoryListing links? Seems like that is possible.
Thanks,
Todd

Add javascript action to all links on a webpage

Good morning, I would like to know if is possible add automaticalliy a javascript action to all links (or classes) on a webpage, for example I wanna add the following javascript action: "PlayFlashSound();", so the links on my web page should be:
<a onmouseover="PlayFlashSound();" href="#">Link Text</a>"
The problem adding manually the javascript action is that I'm using Joomla, and I don't know how to do it.
Thanks.
with jQuery you could do it like this.
$(document).ready(function() {
$('a').click(function() {
PlayFlashSound();
return false
});
});
Something like this could easily be accomplished using jQuery:
$('a').mouseover(function()
{
PlayFlashSound();
});
Example available here.
I assume since one of this question tags is "joomla" the author would like to accomplish what's needed using Mootool that is included into Joomla CMS. The code could be, for instance, like this one:
window.addEvent("domready",
function() {
$$('a').each(function(item, index) {
item.addEvent('click', PlayFlashSound);
});
})
Keep in mind that if you wish to block the default actions of those links the PlayFlashSound function must return "false";

Categories