JQuery get attr value from ajax loaded page

Posted by Paolo Rossi on Stack Overflow See other posts from Stack Overflow or by Paolo Rossi
Published on 2014-06-12T14:40:17Z Indexed on 2014/06/12 15:25 UTC
Read the original article Hit count: 270

Filed under:

jQuery

|

AJAX

In my index.php I've a ajax pager that load a content page (paginator.php).

index.php

<script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='js/paginator.js'></script>
<script type='text/javascript' src='js/functions.js'></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>

<html>
<div id="content"></div>

paginator.js

$(function() {

  var pageurl = 'paginator.php';

  //Initialise the table at the first run
  $( '#content' ).load( pageurl, { pag: 1 }, function()
  {
    //animation();
  });

  //Page navigation click
  $( document ).on( 'click', 'li.goto', function() 
  {
    //Get the id of clicked li
    var pageNum = $( this ).attr( 'id' );
    $( '#content' ).load( pageurl, { pag: pageNum }, function() 
    {
        //animation();
    });
  });

}); /* END */

paginator.php

<ul><li>..etc </ul>
...
...
<a id='test' vid='123'>get the id</a>

<a id='test2' url='somepage.php'>open fancybox</a>

I would like to take a variable of the loaded page (paginator.php) in this way but unfortunately I can not.

functions.js

$(function() {

   $('#test' ).click(function(e)
   {
     var id = $('#test').attr('vid');
     alert ("vid is " + vid);
   });

}); /* END */

In this case popup not appear.

I tried with add fancybox in my functions.js. Dialog box appear but the url attr is not taken.

 var url = $('#test2').attr('url');

 $('#test').fancybox({
   'href'              : url,
   'width'             : 100,
   'height'            : 100,
   'autoScale'         : false,
   'transitionIn'      : 'none',
   'transitionOut'     : 'none',
   'type'              : 'iframe',
   'fitToView'     : true,
   'autoSize'          : false
 });

In other scenarios, without having the page loaded, I can do it, but in this case the behavior is different. How could I do this? thanks

EDIT

my goal is to open a dialog (fancybox) taking a variable from the loaded page

EDIT2

I tried in this way

paginator.php

<a id="test" vid="1234">click me</a>

paginator.js

//Initialise the table at the first run
$( '#content' ).load( pageurl, { pag: 1 }, function()
{
    hide_anim();
    popup();
});

//Page navigation click
$( document ).on( 'click', 'li.goto', function() 
{
    //Get the id of clicked li
    var pageNum = $( this ).attr( 'id' );
    $( '#content' ).load( pageurl, { pag: pageNum }, function() 
    {
        hide_anim();
        popup();
    });
})

function.js

function popup() {
  $('#test' ).click(function(e) {
  e.preventDefault();
  var vid = $('#test').attr('vid');
  alert ("vid is " + vid);
  });
}

But popup not appear...

Developer IT