Develop Reference

Refresh the page automatically if a link is clicked

I have a code but it for only a page. I want do it for all links.
$('.row').on("click",".nav_link",function(e){
e.preventDefault(); // cancel click
var page = $(this).attr('href');
$('.row').load(page);
});

Use Ajax to load the pages. You can do something like:
$(function(){
$(".nav_link").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
var ajx = $.ajax({
url: url
});
ajx.done(function(d){
$(".row").html(d);
});
});
});
HTML:
Click Me
<div class="row"></div>
Fiddle

How to load div on var hash example #index2?

Its my button:
<div id="page-wrapper"></div>
$("#index2").click(function(){
$(document).ready(function() {
$('#page-wrapper').fadeOut('fast', function(){
$('#page-wrapper').load("index2.php", function(){
$('#page-wrapper').fadeIn('fast');
});
});
});
});
Its successfully work and no problem but this does not work if the page refreshes
And that's when you refresh the page on the www.domain.com/index.php#index2 page
Now how can i load again index2.php to #page-wrapper on refresh?

It would be better approach to use hashchange event to handle # anchor changes. Try like this;
$(window).on('hashchange', function() {
var hash = window.location.hash;
var loadUrl = hash.substr(1) + ".php";
$('#page-wrapper').fadeOut('fast', function(){
$('#page-wrapper').load(loadUrl, function(){
$('#page-wrapper').fadeIn('fast');
});
});
});
To fire hashchange event at first page load you can try;
$( document ).ready(function() {
if (window.location.hash) {
$(window).trigger('hashchange')
}
});

jquery .on(click) not working

i have a link on html
Veja aqui »</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically

Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle

If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});

setting variables in javascript

I need to create on snippet of javascript that, based on an A tags id, the window will navigate to the proper html file. I've got something together that when I look at it, it should work but for some reason it doesnt. Here's what I got.
<script>
$(document).bind('pageinit', function() {
$('a').each(function (index){
var elementId = $(this).attr("id");
elementId= elementId + '.html';
$(function(){
$(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
});
});
});
});
</script>
This part is so that I can load an external html in an ios web app with out exiting the web app window
$(function(){ $(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
Did I write the variable wrong some how? Any help would be appreciated

I'll take a wild guess:
$(function(){
$('a').on('click', function(e) {
e.preventDefault();
window.location.assign(this.id + '.html');
});
});

This is a simplified version of what you have there...
<script>
$(function() {
$("a").on("click", function(e) {
e.preventDefault();
window.location.href = this.id + ".html";
});
});
</script>

jQuery changing attribute and changing it back

I want to make all links on the page unaccessible until the user clicks a button.
$('a').attr('href','#');
$("#button-yes").click(function(){
$('a').attr('href',function(){
$(this).attr('href');
});
});

How about just keeping track of state instead of rewriting all the hrefs?
var buttonClicked = false;
$('a').click(function(){
if(! buttonClicked) {
return false;
}
});
$("#button-yes").click(function(){
buttonClicked = true;
});

Have a var outside your function that says something like:
button_clicked = false;
Then use this to disable all links
$('a').click(function(){
if(!button_clicked){
return false;
}
});
Returning false will cause the link to do nothing.

The simplest example would be to hijack the click event of all links:
$('a').live('click.disable', function() {
return false;
});
$("#button-yes").click(function() {
$('a').die('click.disable');
});
(see this fiddle: http://jsfiddle.net/A6QPn/) but anyone can right-click the link and open it in new tab or something like that.
Another example would be to store the href attributes as data and restore them later:
$('a').each(function() {
var $this = $(this);
$this.data('href', $this.attr('href'));
$this.attr('href', '#');
});
$("#button-yes").click(function() {
$('a').each(function() {
var $this = $(this);
$this.attr('href', $this.data('href'));
});
});
(see this fiddle: http://jsfiddle.net/eQDdQ/) and here the links are just not working because they all point to '#' on the current page.
Another example would be to basically do the same but remove the href attribute altogether making the links look like normal text until the button is clicked:
$('a').each(function() {
var $this = $(this);
$this.data('href', $this.attr('href'));
$this.removeAttr('href');
});
$("#button-yes").click(function() {
$('a').each(function() {
var $this = $(this);
$this.attr('href', $this.data('href'));
});
});
(see this fiddle: http://jsfiddle.net/gmLTP/)

You need to stash the value of the href so that it can be recovered later. I'll stash the href value into the rel attribute.
$('a').each(function(){
$(this).attr('rel', $(this).attr('href')); //store the href values
$(this).attr('href', ''); //clear the href values
});
$("#button-yes").click(function(){
$('a').each(function(){
$(this).attr('href', $(this).attr('rel')); //recover the href values
});
});
This is a simple approach, but it leaves the address in the rel attribute. A clever user might find and use this to circumvent your button, so here's another approach as suggested by #rsp.
$('a').each(function(){
$(this).data('link', $(this).attr('href')); //store the href values
$(this).attr('href', ''); //clear the href values
});
$("#button-yes").click(function(){
$('a').each(function(){
$(this).attr('href', $(this).data('link')); //recover the href values
});
});
By storing the href using .data(), the link address is a little more obscure so users shouldn't be able to circumvent the button as easily (though disabling JavaScript will sidestep this completely).