ajax load method and the title of the page - javascript

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());
});
});
})();

Related

JQuery not working with ajax page load

I am using ajax to load the page. But when my page load I have jQuery on the loaded page template that is not working . If i refresh the page then it start working.
I am using ready function as:
jQuery(document).ready(function() {
jQuery('#tabs li a:not(:first)').addClass('inactive');
jQuery('.tab-content').hide();
jQuery('.tab-content:first').show();
jQuery('#tabs li a').click(function() {
var t = jQuery(this).attr('id');
if (jQuery(this).hasClass('inactive')) {
jQuery('#tabs li a').addClass('inactive');
jQuery(this).removeClass('inactive');
jQuery('.tab-content').hide();
jQuery('#' + t + 'C').fadeIn('slow');
}
});
});
But it not showing any alert when i click on the page link and page is loaded using ajax without refresh.
How i can make the jquery workable please help
I have to load two function at the success of the ajax call only one of them is wokring not both of them at the same time:
$.ajax({
url: url,
success:
function(data){
$('#tabs li a:not(:first)').addClass('inactive');
$('.tab-content').hide();
$('.tab-content:first').show();
$('#tabs li a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')){
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.tab-content').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
}
function(data, textStatus, jqXHR){
alert("working");
},
error: function(jqXHR, textStatus, errorThrown){
document.location.href = url;
return false;
}
How it could be possible?
Please use the success function to find whether the functionality is executing successfully or not,
$(document).ready(function (){
$.ajax({
jQuery('#tabs li a:not(:first)').addClass('inactive');
jQuery('.tab-content').hide();
jQuery('.tab-content:first').show();
jQuery('#tabs li a').click(function() {
var t = jQuery(this).attr('id');
if (jQuery(this).hasClass('inactive')) {
jQuery('#tabs li a').addClass('inactive');
jQuery(this).removeClass('inactive');
jQuery('.tab-content').hide();
jQuery('#' + t + 'C').fadeIn('slow');
}
});
success: function(this) {
alert(this);
}
});
});
I got is i have laoded my Jquery in a new function on ajaxSuccess as follows and it works perfectly
jQuery(document).ready(function(){
jQuery(document).ajaxSuccess(function() {
jQuery('#tabs li a:not(:first)').addClass('inactive');
jQuery('.tab-content').hide();
jQuery('.tab-content:first').show();
jQuery('#tabs li a').click(function(){
var t = jQuery(this).attr('id');
if(jQuery(this).hasClass('inactive')){
jQuery('#tabs li a').addClass('inactive');
jQuery(this).removeClass('inactive');
jQuery('.tab-content').hide();
jQuery('#'+ t + 'C').fadeIn('slow');
}
});
});

Adjust JS to work on content after it's been dynamically loaded through AJAX?

I'm having an issue where, after dynamically attempting to load content in through AJAX, the content isn't responsive to the JS code that it used to be.
Here's a jsfiddle of this navigation bar working before trying to dynamically loading it using AJAX... http://jsfiddle.net/neowot/m107L4mh/
But now it's just nonresponsive. I asked for similar help before and attempted to add proper event handlers, but clearly I'm still struggling.
Please help if you can.
Thank you.
init.js
$(document).ready(function() {
var nav, content, fetchAndInsert;
nav = $('nav#main');
content = $('section#content');
//Fetches and inserts content into the container
fetchAndInsert = function(href) {
$.ajax({
url: 'http://localhost/TTValid/content/' + href.split('/').pop(),
method: 'GET',
cache: false,
success: function(data){
content.html(data);
}
});
};
//User goes back/forward
$(window).on('popstate', function() {
fetchAndInsert(location.pathname);
});
nav.find('a').on('click', function(e) {
var href = $(this).attr('href');
//Manipulate history
history.pushState(null, null, href);
//Fetch and insert content
fetchAndInsert(href);
e.preventDefault();
});
});
page1.js
$(function () {
var container = $('.navbar');
$(document).on('click', '.navbar ul li a', function(event) {
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
$('.navbar ul li.gone').removeClass("gone");
$(event.target).closest("li").addClass("gone");
});
$(document).on('mouseenter', '.navbar > li', function(event) {
$(this).find('ul').removeClass('hidden');
});
$(document).on('click', '.ActiveListItem', function(event) {
$('.navbar li ul').slideToggle(300);
});
$(document).mouseup(function (e) {
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('.navbar li ul').slideUp(300);
}
});
});
page1.php
<?php
require 'views/TTheader.php';
?>
<section id="content">
<?php require 'content/TTpage1.php'; ?>
</section>
<?php
require 'views/TTfooter.php';
?>
content/page1.php
<div id="navbarcontainer">
<ul class="navbar cf">
<li>
Category
<ul>
<li>Music</li>
<li>Movie</li>
<li>Book</li>
<li>TV</li>
<li>Game</li>
<li>Activity</li>
<li>Misc</li>
</ul>
</li>
</ul>
</div>

Activate or add class active on menu tab link when clicking the menu link with Jquery

I want to Activate or add class active on menu tab link when clicking the menu link with Jquery and:
I have HTML
<div id="top" class="shadow">
<ul class="gprc">
<li>Home</li>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
</div>
And i found the following script for doing so.
JQuery
$( document).ready(function (){
$( function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace( /\/$/,'' ) + "$" );
$('a').each( function(){
if(urlRegExp.test(this .href.replace(/\/$/, ''))){
$( this).addClass('active' );
}
});
});
});
JUST that it does it for the entire web page, how could i do it only for the specified menu that i posted in HTML.
You can do this:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
Adding the active class to only the proper link inside div with the ID as top, using the proper selector $('#top a'), instead of implementing it on all the links on the page.
You can specify that you want for that to work only if it is a anchor element inside 'gprc' ul element like that:
$('.gprc a').each( function(){
if(urlRegExp.test(this .href.replace(/\/$/, ''))){
$( this).addClass('active' );
}
});
Try scoping your selector to only anchor tags within your menu's div.
e.g.:
$( document).ready(function (){
$( function(){
var url = window.location.pathname, urlRegExp = new RegExp(url.replace( /\/$/,'' ) + "$" );
$('#top a').each( function(){
if(urlRegExp.test(this .href.replace(/\/$/, ''))){
$( this).addClass('active' );
}
});
});
});

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.

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
});

Categories

Resources