Develop Reference

ajax load method and the title of the page

I'm big newbie to ajax
I followed some tutorials and this was my result
(function(){
$('#nav li a').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
$('#content').load(href+' #content');
$('title').load(href+' title');
$('#nav').load(href+' #nav');
});
})();
the output of title for this code is
<title><title>About Us!</title></title>
and this was the output for the nav code
<ul id="nav"><ul id="nav">
<li>Index</li>
<li>about</li>
<li>portfolio</li>
<li>contact</li>
<li>terms</li>
</ul></ul>
and there is a better way to load more than element, title and navbar and content?

(function(){
$('#nav li a').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
$.ajax({
url: href,
dataType: 'html'
}).done(function(html){
var $html = $(html);
$('#content').replaceWith($html.find('#content'));
$('title').html($html.filter('title').text());
$('#nav').replaceWith($html.find('#nav'));
});
});
})();
using replaceWith will remove the two times or tags
As per comment I dont know why on or live will not work on it...
but as an alternative you can do this...
(function(){
function test(e){
e.preventDefault();
var href = $(this).attr('href');
$.ajax({
url: href,
dataType: 'html'
}).done(function(html){
var $html = $(html);
$('#content').replaceWith($html.find('#content'));
$('title').html($html.filter('title').text());
$('#nav').replaceWith($html.find('#nav'));
$('#nav li a').on('click',test );
});
}
$('#nav li a').on('click',test );
})();

In this case you are loading the resource three times
(function(){
$('#nav li a').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
$.ajax({
url: href,
dataType: 'html'
}).done(function(html){
var $html = $(html);
$('#content').html($html.find('#content').unwrap());
$('title').html($html.find('title').unwrap());
$('#nav').html($html.find('#nav').unwrap());
});
});
})();

JQuery delete an appended li fom ul

I am having problems deleting a list item li from it's parent ul. Normally I would do the following:
$(this).closest('li').remove();
or
$(this).parent().remove();
As the list items are appended to the page via a form I think there is a problem with the this usage.
My code that appends the li is as follows:
$(document).on('click', '.add_section', function(){
var section_title=$('.section').val();
var menu_type=$('.menu_type_sel').val();
var rest_id=$('body').data('rest_id');
var menu_id=$('body').data('menu_id');
var error=false;
if(section_title=="")
{
$('.error_box13').eq(2).html("<p>Please Add a Section Title</p>");
$('.error_box13').eq(2).show(300);
error=true;
return;
}
var data="section="+section_title+"&rest_id="+rest_id+"&menu_id="+menu_id+"&menu_type="+menu_type;
$.ajax({
type:"POST",
url:"includes/write_section.php",
data:data,
success:function(html){
if(html!="x")
{
var app_section="";
app_section="<li class='hover' id='menu_"+html+"'>"+section_title+" <a href='javascript:void(0);' class='delete_section' data-id='"+html+"'>[x]</a></li>";
$(app_section).appendTo('#sortme');
$('.section').val("");
}
}
});//end ajax
});
To remove the li so far I have:
$(document).on('click', '.delete_section', function(){
var delete_id=$(this).data('id');
var data="id="+delete_id;
alert(data);
$.ajax({
type:"POST",
url:"includes/delete_section",
data:data,
context:this,
success:function(html){
if(html!="X")
{
$(this).closest('li').remove();
return false;
}
}
});//end ajax
});
I have added the context: bit as a trial but this still does not delete the li.

Try the old var that = this trick.
$(document).on('click', '.delete_section', function(){
var delete_id=$(this).data('id');
var data="id="+delete_id;
var that = this;
$.ajax({
type:"POST",
url:"includes/delete_section",
data:data,
context:this,
success:function(html){
if(html!="X")
{
$(that).closest('li').remove();
return false;
}
}
});//end ajax
});

Just noticed my stupid error:
The url is missing its .php therefore there is no returned code.

jquery how to fade out and fade in images when changing attr src with json

I am stuck as to how fade in and out images when changing the attr src using jquery and json. I have got the image changing correctly but would like to add the fading transition.
Any help and suggestions would be very appreciated.
Below is my code
function(){
$j(".screenshots ul li#screen1").show();
$j(".items div a").click(function (event) {
var id = $j(this).attr("href");
//$j(".screenshots ul li img").fadeOut();
$j.ajax({
url: "/?func=square_images/get_json&IMAGE_ID="+id,
dataType: "json",
success: function(data) {
$j("#screen1 img").attr("src", data.medium_medium_src);
}
});
event.preventDefault();
});
}

You can try this within you success function
success: function(data) {
$j("#screen1 img").fadeOut(100, function() {
$(this).attr('src', data.medium_medium_src).load(function() {
$(this).fadeIn();
});
})
}

Using multiple tab-blocks on the same page (jQuery)

$('.tabbed-block .tab-content:first').show();
$('.tabbed-block ol li:first').addClass('active');
$('.tabbed-block ol li a').click(function () {
$('.tabbed-block ol li').removeClass('active');
$(this).parent().addClass('active');
var a = $(this).attr('href');
$('.tabbed-block .tab-content').hide();
$(a).show();
return false;
});
.. works great, but not if used more than once of the same page, interferes with each other. What should I change?
Thanks!

This should work. Although, why aren't you just using jQuery UI Tabs?
$('.tabbed-block').each(function(){
var $block = $(this);
$block.find('.tab-content:first').show();
$block.find('ol li:first').addClass('active');
$block.find('ol li a').click(function () {
var $link = $(this);
$link.closest('ol').find('li a').removeClass('active');
$link.parent().addClass('active');
var a = $link.attr('href');
$link.closest('.tabbed-block').find('.tab-content').hide();
$(a).show();
return false;
});
});

How can I implement this Ajax script?

This is a script that, when a link is clicked, will pull a page from somewhere
and insert it in a div in the current page. Pretty simple, yes, but being the
thick head I seem to be, I can't figure out how to implement it.
i.e. how can I formulate the link so that it will point the script to the page
I want to load in the div I want?
The script:
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
The instructions specify the following:
We want to target the links within the navigation menu and run a function when they are clicked:
$('#nav li a').click(function() {
// function here
});
We need to define what page to get the data from when a link is clicked on:
var toLoad = $(this).attr('href')+' #content';
The loadContent function calls the requested page:
function loadContent() {
$('#content').load(toLoad,'',showNewContent)
}
It's very likely that the above is all that's needed to run the script as intended
but only if you know how to do it, which I don't.
PS: The tutorial all this comes from is here.

Basically intercept all link clicks and make an AJAX request instead... Remember to return false at the end of the click callback function.
$('a').click(function () {
var href = $(this).attr('href');
$.ajax({
url: href,
success: function (res) {
$(res).appendTo('#target'); // add the requested HTML to #target
}
});
return false; // important
});