JQuery get attr value from ajax loaded page
- by Paolo Rossi
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...
