Develop Reference

Trying To Add Onclick To Links, But Can't With .onclick

So I'm trying to use ajax to put content into a div, and trying to have it change all internal links before it adds the content so that they will use the funciton and load with ajax instead of navigating to another page. My function is supposed to get the data with ajax, change the href and onclick attributes of the link, then put it into the div... However, all it's doing is changing the href and not adding an onclick attribute at all. Here's what I was using so far:
function loadHTML(url, destination) {
$.get(url, function(data){
html = $(data);
$('a', html).each(function(){
if ( $.isUrlInternal( this.href )){
this.onclick = loadHTML(this.href,"forum_frame"); // I've tried using both a string and just putting the function here, neither seem to work.
this.href = "javascript:void(0)";
}
});
$(destination).html(html);
});
};
Also, I'm using jquery-urlinternal. Just thought that was relevant.

You can get the effect you want with less effort by doing this on your destination element ahead of time:
$(destination).on("click", "A", function(e) {
if ($.isUrlInternal(this.href)) {
e.preventDefault();
loadHTML(this.href, "forum_frame");
}
});
Now any <a> that ends up inside the destination container will be handled automatically, even content added in the future by DOM manipulations.

When setting a function to onclick through js it will not show on the markup as an attribute. However in this case it is not working because the function is not being set correctly. Easy approach to make it work,
....
var theHref=this.href;
this.onclick = function(){loadHTML(theHref,"forum_frame");}
....
simple demo http://jsbin.com/culoviro/1/edit

How to pass `this` object to function through anchor link and convert it to jQuery object?

I'm having trouble with something that I'm trying to simplify. When a link is clicked, I want its CSS to be updated via jQuery. My main question is, how can I take Javascript's this object and convert it to a jQuery object for easier handling?
Here is what my code looks like:
<!-- HTML -->
load some page
load other page
// JS
function load(url, linkObj) {
loadPageWithURL(url);
$(linkObj).css('text-decoration', 'underline');
}
However, this does not work. Obviously I'm doing more than an underline when a link is selected, but you get the idea. Am I using this wrong or is it just a matter of converting the raw JS object to an object recognized by jQuery?

That function would work fine ($(linkObj) is correct), but you have your script in the href instead of on onclick attribute. So it won't ever execute.
Change:
load some page
load other page
To:
load some page
load other page

Don't use inline events! Use jQuery to bind them.
<a class="load" href="page.php">load some page</a>
<a class="load" href="other.php">load other page</a>
Then in JavaScript
$(function(){
$('.load').click(function(e){
e.preventDefault();
loadPageWithURL(this.href);
$(this).css('text-decoration', 'underline');
});
});
UPDATE: If new links are being added after the page is loaded, you need to use:
$(function(){
$(document).on('click', '.load', function(e){
e.preventDefault();
loadPageWithURL(this.href);
$(this).css('text-decoration', 'underline');
});
});

One of the advantages of using jQuery is that you can easily write unobtrusive JavaScript, it mean that you don't need to mix HTML with JavaScript. You can improve and achieve you requirements by refactoring your code as follows.
The HTML:
load some page
load other page
And your JavaScript code in one place:
jQuery(function($) {
$(document).on('click', 'a', function() {
var $link = $(this);
load($link.attr('href'), $link);
return false;
});
});
Note: The previous code will catch all links, if you want don't want to do this, you can add particular class name. Suppose the class name is load then the code should be rewritten as follows:
The HTML:
<a class="load" href="page.php">load some page</a>
<a class="load" href="other.php">load other page</a>
And your JavaScript:
jQuery(function($) {
$(document).on('click', '.load', function() {
var $link = $(this);
load($link.attr('href'), $link);
return false;
});
});
If you have any particular related to the code provided, put it on the comments.

How to get Anchor Links to work in Jquery Mobile?

Jquery Mobile has decided to treat anchor links as page requests of sort. However, this isn't good if you have a load of blog posts which have anchor links to the same page (ie href="#specs").
Is there a way to disable jquery mobile's anchor link usage on a specific page which I know I won't be using it on so I can use anchor links as they were intended, to drop down to a part of the page?
I only need a solution for anchor links on the same page (ie: href="#specs").
thanks

You could try adding a data-ajax="false" on the anchor tag.
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Reference - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

If you are like me, converting an existing site and you don't want to go through every page right now. You can add one line of code to your header and all of your header and all of your existing internal anchor links will get the data-ajax="false" tag added.
Of course, this assumes you are including your own javascript file up in the header already. If you are not you would have to touch every page anyway. But I have a single javascript file that is included in every page already so I added this line...
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
This goes in your $(document).ready() block. If you don't have that block yet, here is the entire block.
$(document).ready(function() {
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
});
Hope this helps. It is the same solution user700284 offers but in an automated way.

You can add the following code to the end of your page:
<script type="text/javascript">
$('a.native-anchor').bind('click', function(ev) {
var target = $( $(this).attr('href') ).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});
</script>
And add the class "native-anchor" to your anchor links.
It is not a total sollution, because the back button of your browser will move you to the previous page and not to the position of the link, but it is better than the links not working at all.
I found this sollution here: jQuery Mobile Anchor Linking

$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});

First you have to place this code into a custom.js file
$(document).bind('mobileinit', function () {
$.mobile.loader.prototype.options.disabled = true;
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.loadingMessage = false;
});
Then add this file into your webpage before the jquery mobile js is loaded. becuase 'mobilinit' event is triggered immediately

Thank you
this solution worked for me
<script>
$(document).ready(function() {
$("a").each(function() {
if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false);
});
});
</script>
I replaced # with index.php which is my document root.
But, it doesn't work for form button i.e input type="submit"

// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all 'a' tags
$('a[href*="#component"]').each(function () {
// then set data-ajax to false,
$(this).attr("data-ajax", false);
// at this point you can add the class to your target a tags.
// You can do it elsewhere but because for this example my
// 'a' tags are automatically generated so I just add the class here
$(this).addClass('in-pagelink');
// then target the class and bind to a click event
$('a.in-pagelink').bind('click', function (ev) {
// here I redirect the page with window.location.assign
// as opposed to window.location.href. I find that it works better
window.location.assign(this.href);
// then I close my navigation menu
closeAll();
});
});

jQuery Image Change - Gallery View

I have a large image in a gallery that needs to change when one of the thumbnails is clicked within a unordered list below. The images are coming in dynamically so the jquery script needs to be able to take the src of the thumbnail, remove "-thumb" from the filename, and then replace the large image with the new source.
Please let me know what is my best approach to a gallery like this.
Thanks in advance.
-B

Something like:
$('img.thumb').click(function() {
var src = $(this).attr('src');
$('#bigImage').attr('src', src.replace(/-thumb/,''));
});
The below examples apply if your thumbs are being loaded in via ajax:
(1) Using Events/live:
$('img.thumb').live("click", function() {
var src = $(this).attr('src');
$('#bigImage').attr('src', src.replace(/-thumb/,''));
});
(2) As a callback to one of jQuery's ajax methods (e.g.):
function initThumbs()
{
$('img.thumb').click(function() {
var src = $(this).attr('src');
$('#bigImage').attr('src', src.replace(/-thumb/,''));
});
}
$('#thumbsDiv').load('thumbs.php?p=2', initThumbs);

karim79's answer could be shortened slightly:
$('img.thumb').click(function() {
$('#bigImage').attr('src', $(this).attr('src').replace(/-thumb/,''));
});
But otherwise, good answer!

The only addition to karim79's is:
In a case the thumbnails are placed within same parent binding an event on that parent would be much better (elegant?) solution that binding events on all thumbnails. The event is propagated, so you can find thumbnails by checking event target.

$().ready(function() {
//get all images from unordered list and apply click function
$('ul#myList img').each(function() {
$(this).click(function() {
$('#mainImage').attr('src', $(this).attr('src').replace('-thumb', ''));
});
});
});

Adding an anchor to generated URLs

I have tried finding a simialr example and using that to answer my problem, but I can't seem to get it to work, so apologies if this sounds similar to other problems.
Basically, I am using Terminal Four's Site Manager CMS system to build my websites. This tool allows you to generate navigation elements to use through out your site.
I need to add a custom bit of JS to append to these links an anchor.
The links generated are similar to this:
<ul id="tab-menu">
<li>test link, can i rewrite and add an anchor!!!</li>
</ul>
I can edit the css properties of the link, but I can't figure out how to add an anchor.
The JQuery I am using is as follows:
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").each(function() {
$(this).children("a").css({color:"red"});
});
});
</script>
Thanks in advance for any help.
Paddy

sort of duplicate of this:
How to change the href for a hyperlink using jQuery
just copy the old href and add anchor to it and paste that back
var link = $(this).children("a").attr("href");
$(this).children("a").attr("href", link+ "your own stuff");

A nice jQuery-based method is to use the .get(index) method to access the raw DOM element within your each() function. This then gives you access to the JavaScript link object, which has a property called 'hash' that represents the anchor part of a url. So amending your code slightly:
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").children("a").each(function() {
$(this).css({color:"red"}).get(0).hash = "boom";
});
});
Would change all the links in "#tab_menu li" to red, and attach "#boom" to the end.
Hope this helps!

I can now target the html by using the following:
$(this).children("a").html("it works");
I assumed that:
$(this).children("a").href("something");
would edit the href but I am wrong.
Paddy

I am not sure for the answer, I dint try
$("#tab-menu").children("li").children("a").each(function() {
// $(this).css({color:"red"}).get(0).hash = "boom";
var temp_url = $(this).href +'#an_anchor';//or var temp_url = $(this).attr('href');
$(this).attr('href', temp_url);
});