javascript - jquery load() on each() function working all together -


i working around ajax loading powered website . here trying load different url on different link there little bit problem facing . there used 4 links , 4 pages load each page linked on clicking link 4 pages loading .

my html is

<div class="col-md-12">     <a href="ajax/portfolio_single.php" data-content="ajax" class="ajax-call">this one</a>     <a href="ajax/portfolio_single2.php" data-content="ajax" class="ajax-call">hello</a>     <a href="ajax/portfolio_single3.php" data-content="ajax" class="ajax-call">hello</a>     <a href="ajax/portfolio_single4.php" data-content="ajax" class="ajax-call">hello</a>     <div class="ajaxshow"></div> </div>

and javascripts are

(function($){  'use strict';  var ajaxcontent = $('[data-content="ajax"]'),     pathname = window.location.pathname,     url = window.location.href,     ajaxurl;  ajaxcontent.each( function(index, el) {      $( ).append('<span class="ajax-live"></span>');      ajaxurl = $(this).attr('href');      $(this).click(function(event) {         event.preventdefault();         $( '.ajax-live' ).addclass('ajax-live-on');         $( ).after('<span class="ajax-close animated bounceinright"></span>');         $('.ajaxshow').append().load(ajaxurl);         $('.ajaxshow').addclass('animated bounceinup');         $('.ajaxshow').css('display', 'block');     });      $(document.body).on('click', '.ajax-close', function( event ){         event.preventdefault();         $( '.ajax-live' ).removeclass('ajax-live-on');         $( ).removeclass('ajax-close');         $( '.ajaxshow' ).fadeout(600).slideup();     }); });  })(jquery);

though hete each function not working doesnot working.can help?

a working example here http://orlandojoes.co.uk/website/ajaxtest.php

the problem ajaxurl variable within different closure 1 assume time clicked, fourth link.

this because first do

var ajaxcontent = $('[data-content="ajax"]'),     pathname = window.location.pathname,     url = window.location.href,     ajaxurl;

here, ajaxurl global 'each' closure. in order fix problem, remove ajaxurl declaration outside 'each' scope, , define within

var ajaxcontent = $('[data-content="ajax"]'),     pathname = window.location.pathname,     url = window.location.href;  ajaxcontent.each( function(index, el) {      $( ).append('<span class="ajax-live"></span>');      var ajaxurl = $(this).attr('href');      $(this).click(function(event) { . . .

also change 

$('.ajaxshow').append().load(ajaxurl);

to

$('.ajaxshow').load(ajaxurl);

there no need append load insert html response within ajaxshow div


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more