Develop Reference

How to stop href inside on the same html

I want to stop href to a div on the same page i tried this but not working for the same page but is working for other page.
<a href="#tab2" data-toggle="tab" aria-expanded="false" class="surveydata">
This is my function
$("a.surveydata").click(function(event) {
event.preventDefault();
});
But always go to my div with id tab2

You could try to remove the href attribute from the tag when the page load, like this:
$('a.surveydata').first().removeAttr('href');

try this:
$("a").click(function(e){
e.preventDefault();
})

Click event on <a> tag inside <span> tag in jquery

Im trying something simple, i am quite noob in jquery and i don´t know how to make an click event when you click in an a tag that is inside a span tag, this is my code.
<span>
<a class="paginate_button current" aria-controls="table_id" data-dt-idx="1" tabindex="0">1</a>
<a class="paginate_button " aria-controls="table_id" data-dt-idx="2" tabindex="0">2</a>
<a class="paginate_button " aria-controls="table_id" data-dt-idx="3" tabindex="0">3</a>
<a class="paginate_button " aria-controls="table_id" data-dt-idx="4" tabindex="0">4</a>
</span>
I tried this but it doesn't work
$("#table_id_paginate > span > a.paginate_button").click(function() {
alert("Handler for .click() called.");});

The markup you provided does not have an element with the ID "table_id_paginate". So jQuery is selecting the links because it is looking for a elements with the class paginate_button who are direct descendants of a span that is a direct descendant of an element with that ID.
So if you change your code to how Tim Lewis commented: $(".paginate_button").click(...) the code works.

Just making this change will make it work, basically you want that any <a> tag with .paginate_button class should work on click.
<script>
$("span > a.paginate_button").click(function() {
alert("Handler for .click() called.");});
</script>
Edit :
How to go about these :
Figure out the target element, then keep going up towards the parent and
that becomes your target.

$("a.paginate_button").on("click", function () {
//your code here
})

How to change a word in a h2 when certain page is clicked on

I'm trying to change a certain word in the title of a page dynamically with javascript depending on which link in the nav is clicked on. So for instance, if the "Asia" link is clicked I want the h2 to display: "You are in Asia" or if the "Europe link is clicked I want the h2 to say: "You are in Europe."
The html for the nav bar:
<div id="zone-nav">
<a href="" id="surge-btn"</a>
<a href="" id="latin-btn"</a>
<a href="" id="africa-btn"</a>
<a href="" id="asia-btn"</a>
</div>
The html I have thus far for the title that needs to be changed: `
<h2 id="zoneName">You are in<span id="zoneName"></span></h2>`
I know I need to write a function to determine what link is pressed, but I am a little confused on how to approach this.

if you add some extra markup to your html, you can use a single jQuery event handler:
<div id="zone-nav">
<a class="zone-select" href="" id="surge-btn">Surge?</a>
<a class="zone-select" href="" id="latin-btn">Latin</a>
<a class="zone-select" href="" id="africa-btn">Africa</a>
<a class="zone-select" href="" id="asia-btn">Asia</a>
</div>
now the event handler:
$(document).ready(function() {
$(".zone-select").on("click", function() {
$("#zoneName").html($(this).html());
};
});

Firstly you need to deal with your duplicate id here:
<h2 id="zoneName">You are in<span id="zoneName"></span></h2>
Note we cannot have the same id otherwise we don't know how to get an element by it's id. So remove the uneeded one on the h2:
<h2>You are in <span id="zoneName"></span></h2>
Then add event's to your a tags:
<div id="zone-nav">
<a onclick="update('Surge')" id="surge-btn" >item1</a>
<a onclick="update('Latin')" id="latin-btn" >item2</a>
<a onclick="update('Africa')" id="africa-btn" >item3</a>
<a onclick="update('Asia')" id="asia-btn" >item4</a>
</div>
Note: This can be done purely in JavaScript or be done easily in jQuery. But since you did not mention it I will not be using jQuery. We could iterate through by ClassName and have the links be a class, but that's no more simple then the way above.
For the JavaScript we need to return false to prevent the default behavior of a anchor tag:
function update(text) {
document.getElementById("zoneName").innerHTML = text;
return false;
}
Here is a working Fiddle
Would there be a way to keep the updated text in the even if the page reloads?
Yes there is a way to do this without having to use a server-sided language. What I will do is use HTML 5 web storage, note this will only work for browsers that support HTML 5 (which is all of the modern ones), you can use cookies if you need support for older browsers that work similarly for the following example. In this case I will be using sessionStorage which saves the information even until the browser is closed.
I will emulate a href to the same page for the <a> tags, we need to do this because we need to save out information before we move to a new page. After I save I will call location.reload() that will act as a refresh. Note that you could make this move to an entirely new page as well, just include the script on the new page and use window.location.href = "newPageUrl" ( jsfiddle prevents me from moving to a new page ).
The HTML will be the same but the JavaScript will be updated as followed:
window.onload = function() { // When the page loads
if(sessionStorage.zoneName) { // Check if the session exist
// update the page with the session info
document.getElementById("zoneName").innerHTML = sessionStorage.zoneName;
}
}
function update(text) {
sessionStorage.zoneName = text; // store the text into a session called "zoneName"
location.reload(); // reload the page
return;
}
Here is a working Fiddle

Here's an example of what you could do for the africa-btn (this will require jQuery, I hope that's alright):
$(document).ready(function() {
$("#africa-btn").on("click", function() {
$("#zoneName").html("Africa");
};
// Other buttons here
});
What this is doing is attaching an action to the "click" event of the africa-btn anchor tag. When it's clicked it should update the span's html as described above. You can add further click events in a similar way.
Using $("#africa-btn") to bind the click event is a way to do it specifically for that one button, so you'll have to do it for each id.

This would update the selected zone in the dom
<div id="zone-nav">
<a id="africa-btn" onclick="updateZone('africa'); return false;"> </a>
<a id="asia-btn" onclick="updateZone('asia'); return false;"> </a>
</div>
function updateZone(countryName){
document.getElementById('zoneName').innerText = countryName;
return false;
}

are you looking for something like this :
Simple html and javascript only:
http://jsfiddle.net/q9L37c32/
Asia

on dom ready remove existing html attribute and add mine

My generated portion of page source is
<a target="_blank" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
and I need on page load to replace this a target with a rel so above link should be
<a rel="lightbox" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
I trid with after </body>
<script>
$(function() {
$('a[_blank]').removeAttr('_blank').attr("rel=","lightbox");
});
</script>

You need to use the attribute equals selector - you need to use the attribute name along with attribute value, also to remove you need to use the attribute name not value.
$('a[target="_blank"]').removeAttr('target').attr("rel","lightbox");
Your code looks for an anchor element with attribute _blank and then removes it, a anchor element like <a _blank href="/img/image001.png">
Also as #PaulDraper suggested move the script inside the body element

$(document).ready({
$('a[target=_blank]').attr('rel', 'lightbox');
})

Fancybox2: Amending call for multiple galleries

I am generating an HTML page containing multiple galleries from information held in a MySQL database and I need to amend the Fancybox2 call as follows
$(document).ready(function() {
$("a[rel=gall24],a[rel=gall30], etc, etc etc").fancybox({ ... });
});
How do I add the element references to the call? That is, I need to add a variable number of a[rel=XXX], to the call.
Do I create a variable with the values and reference that in the call? If so I am not sure of the syntax and would appreciate an example.

You may use a single script like:
$(document).ready(function() {
$("a.fancybox").fancybox();
});
Then, when you create your galleries just add a different rel attribute for each gallery but the same class="fancybox", e.g.:
<!--gallery 01 -->
<a class="fancybox" href="images/01.jpg" rel="gallery01">image 01</a>
<a class="fancybox" href="images/02.jpg" rel="gallery01">image 02</a>
<a class="fancybox" href="images/03.jpg" rel="gallery01">image 03</a>
<!--gallery 02 -->
<a class="fancybox" href="images/04.jpg" rel="gallery02">image 04</a>
<a class="fancybox" href="images/05.jpg" rel="gallery02">image 05</a>
<a class="fancybox" href="images/06.jpg" rel="gallery02">image 06</a>
When you click on any image (image 01 for instance) it will show in the (Fancybox) gallery only those elements with the same rel attribute (image 02 and 03 as in the example above + image 01 of course)
With fancybox v2.x you don't need to use jQuery live() as suggested by #sczizzo since fancybox v2.x already supports both existing and dynamically added elements
One last note: don't use ID's for more than a single element. ID's should be unique and you shouldn't use the same ID twice or more times in the same html document.
Check http://fancyapps.com/fancybox/#support FAQ's No.6 for more

Why don't you just call fancybox() multiple times? You can save the options you pass in and use them later.
On the other hand, you might also use a class instead of the a[rel=XYZ] selectors, which is what I would do:
$('a.gallery').fancybox({ ... });
If the content is being loaded in dynamically (e.g. via Ajax), you might do something similar using jQuery's live().