Dom Css lost after jQuery Pagination Wordpress widget

Question

I have developed a widget for Wordpress to show portfolio, the user can choose if he wants pagination, filter categories, the number of post per page...and so on, it works all perfectly with a php pagination system i have made.

I am trying to implement an ajax jquery to this pagination in widget to make it reload without reloading the whole page. I have this code:

jQuery('.paginate a').live('click', function(e){ 
e.preventDefault(); 

var link = jQuery(this).attr('href');  
jQuery('.widget_gantry_portfolio').html('<div class="loading"></div>');
jQuery('.widget_gantry_portfolio').load(link+' .widget_gantry_portfolio .portfolio_class');

The pagination works perfectly in php, when I implement this code the pagination works but when clicked the widget losses all the user preferences(show filter, show pagination..etc), the divs also loose their calculated % width and height that was firstly present in css(seen in firebug):

element.style{width and height}

I have been several days around this and have prove instead of live, on and delegate, and so on, but none of them work, this ajax pagination is working also perfectly in posts pagination on my site but the widget does´nt reload Dom elements?

The most important thing for me are:

-Each of the elements missing width and height, that was in DOM css, firstly this width is calculated with a functions.php enqued script that goes like this for example when it has 4 columns:

var mysizes = function() {
    theWidth4 = jQuery(".mosaic-block4c img").css('width');
    jQuery(".mosaic-block4c").css('width', theWidth4);
    theHeight4 = jQuery(".mosaic-block4c img").css('height');
    jQuery(".mosaic-block4c").css('height', theHeight4);
}

I call the mysizes(); function from the widget php with a tag

-The filter of categories missing i think because, when pagination load, doesn't recognizes the user presets for widget.It recognizes it perfectly in first page but no in subsequent pages.

Link to the site with portfolio widget pagination not working properly (please click 2 page to see):

http://framecero.com/aagantrywordpress/?page_id=635

Link to a sample category with this same pagination working (pagination at the bottom of page):

http://framecero.com/aagantrywordpress/?cat=4

you mentioned a functions.php enqueued script, is it possible this is not loading when called from ajax? — roryok
quick look shows that you're at least changing HTML structure. On paginated page you have .portfolio_class twice nested while original is only once. — Jure C.
Yes! Jure C. That was the problem and that i had to use the function: ajaxComplete(); to reload averything again. Thanks — Jose Lo

brasofilo brasofilo · Accepted Answer · 2013-09-17T20:47:48

From Jure C. comment:

A quick look shows that you're at least changing HTML structure. On paginated page you have .portfolio_class twice nested while original is only once.

Dom Css lost after jQuery Pagination Wordpress widget

1 Answers