Hi,

I'm using ajax in views for pagination and it's work good (in default theme). But when I changed to bootstap theme, "pager" class is switched to "pagination" and ajax doesn't work. So when I click in the links all the page reload.
Do you have any ideas that helps me?
Thanks

Files: 
CommentFileSizeAuthor
#25 bootstrap-fix-ajax-pagination-on-views-1.patch596 bytesvalkum
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#19 bootstrap-pager-in-views-with-1907472-19.patch7.41 KBmarkcarver
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#19 interdiff.txt1.86 KBmarkcarver
#15 bootstrap-pager-in-views-with-1907472-15.patch2.88 KBmarkcarver
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch bootstrap-pager-in-views-with-1907472-15.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#14 bootstrap-pager-in-views-with-1907472-14.patch2.61 KBmarkcarver
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#14 interdiff.txt571 bytesmarkcarver
#8 bootstrap-pager-in-views-with-1907472-7.patch2.5 KBmarkcarver
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#7 bootstrap-1907472.patch1.92 KBmarkcarver
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Comments

Adam Wood’s picture

Category:support» bug

We've stumbled across the same problem. Bootstrap strips out the 'pager' class from the pagination UL at line 132 of pager.inc, which is what Views AJAX targets.

You'll see if you override it in your sub-theme's template.php, or quickly un-comment it, that this restores the AJAX behavior, however wrecks the styling. There's a good reason this has been done, but it's not great if you want to use AJAX views by default.

The styling is a problem for us, as we're using bare pagers, however I think this is an issue none the less.

lupus78’s picture

This is a serious issue in my opinion. However i don't have a nice solution, just a workaround:

Edit [Views module]/js/ajax_view.js file at line 88
change
this.$view.find('ul.pager > li > a, th.views-field a, .attachment .views-summary a')
to
this.$view.find('ul.pager > li > a, th.views-field a, .attachment .views-summary a, .pagination ul li a')

This way we extend the selectors used to select the ajax pager links (a tags)

We still have a js error on the console after this, to fix: in Bootstraps includes/pager.inc file, at line 83 and 110 the
'data' => '<a>…</a>',
should be replaced with
'data' => '<span>…</span>',

the empty tag breaks the views javascript code.

markcarver’s picture

Just throwing out an idea/question here: What would the implications be if we just added the .pager class back to the <ul/> list? Only thing I could think of is maybe some core styling might show up, but that should be taken care of by the higher weight .pagination class.

Adam Wood’s picture

I was trying to remember why it wasn't as simple as that, and after looking at this again, the problem is due to a clash with Bootstrap's default .pager as seen here.

As lupus78 said, his solution isn't nice.

I think the best thing to do would be to override the removal of .pager from pager.inc in your theme, then override lines 5112-5168 from bootstrap.css in your theme to fix the styling (just cancel everything out), ideally targeting

.pagination .pager {...}

in case you're using .pager elsewhere.

Should this be patched? I don't see any reason for this not to be a permanent fix, unless there's more to this...

markcarver’s picture

Version:7.x-2.0-beta2» 7.x-2.x-dev

Ah yes, I forgot about those. That is indeed a problem. I'd rather not have to worry about trying to fix the "styling" aspect of things if possible because that will be more of a headache than it's worth (as most sites are different and this issue would constantly pop up). Instead I think the right approach is to follow @lupus78's lead and replacing the offending function to include the additional selector to make it work.

It's actually very similar to what I did in #1950694: Use Bootstrap's progress bar. I was looking at where the code that @lupus78 mentions in #2 resides in ajax_view.js and found it here:

http://drupalcode.org/project/views.git/blob/refs/heads/7.x-3.x:/js/ajax_view.js#l84

It is a relatively small prototype function and we could simply overwrite it with the code above. Thoughts?

Adam Wood’s picture

That sounds like the best idea on reflection. I was referring to the editing of the views module when I meant it wasn't nice!

Overriding that function in Bootstrap should be fine. Happy to test it.

markcarver’s picture

Status:Active» Needs review
StatusFileSize
new1.92 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Try this

markcarver’s picture

StatusFileSize
new2.5 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Patch submitted by the Drush iq-submit command.

markcarver’s picture

Have you been able to test this?

lupus78’s picture

@Mark Carver
your patch seams fine, but i'm just reinstalling my machine, so i can't test it right now, but will give it a try in the coming days.

I also disagree with overriding Bootstrap css.

Adam Wood’s picture

@Mark Carver
Sorry for the delay in looking at this.

I've applied to patch to a clean installation and it's not working for me. I'm getting the following console error:

Uncaught TypeError: Cannot read property 'ajaxView' of undefined in ajax_view.js:7

markcarver’s picture

Ok. I'll submit a new patch here in a bit. TBH it was really just a concept, I didn't test it too fully myself as I haven't had the time either.

markcarver’s picture

Status:Needs review» Needs work
markcarver’s picture

Status:Needs work» Needs review
StatusFileSize
new571 bytes
new2.61 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Try this patch. I was able to get it to work locally, just had to change the JS group

markcarver’s picture

StatusFileSize
new2.88 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch bootstrap-pager-in-views-with-1907472-15.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Just caught the an extra ellipsis that needed to be converted into a <span/> tag.

markcarver’s picture

Status:Needs review» Needs work

Also, I did notice there was some jumping around with the styling when the AJAX fired. This is probably related to the pager items not having relative positioning or floating issues. Given that this is more to do with styling instead Drupal/views related overrides, it's probably something that I can tackle in #1984354: Improve LESS/CSS consistency..

Adam Wood’s picture

Thanks Mark.

Can confirm that AJAX functionality works with #15.

I'm also getting the jumping around, but only when going backwards. Like you say, it's probably a float on the 'previous'. I'll have a dig into it and see what the culprit is.

Adam Wood’s picture

The jumping of the li.prev can be solved just with:

.pagination ul > li.prev {
   float:left;
}

The only remaining problem is with the .ajax-progress throbber. We could move it either side of the <a> depending on whether it's firing on the prev or next? Or just put it underneath?

markcarver’s picture

Status:Needs work» Needs review
StatusFileSize
new1.86 KB
new7.41 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Ok, try this. I think I finally got a nice working solution :) Granted it has to override some of core's ajax throbber implementation because it likes to attach the throbber outside of the link instead of inside it.

Adam Wood’s picture

That works great, thanks, and it shouldn't be too difficult for people to override if they want a different style/location of throbber.

I might go and ajaxify the views on some old Bootstrap sites now!

markcarver’s picture

Status:Needs review» Fixed

Awesome! I took that as a RTBC and committed to dev: 05daacc.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Shevchuk’s picture

Version:7.x-2.x-dev» 7.x-3.0-rc2

Same thing on 7.x-3.0-rc2. Is reopening this ok or should it be a separate issue?

Shevchuk’s picture

Status:Closed (fixed)» Active
valkum’s picture

Issue summary:View changes
Status:Active» Needs review
StatusFileSize
new596 bytes
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
valkum’s picture

there was in typo in ajax_views.js
should be ul.pagination not .pagination ul

jthorson’s picture

Status:Needs review» Needs work

The last submitted patch, 15: bootstrap-pager-in-views-with-1907472-15.patch, failed testing.

valkum’s picture

Version:7.x-3.0-rc2» 7.x-3.x-dev
Status:Needs work» Needs review

don't test the old patch. because rc2 got an new dir structure.

Shevchuk’s picture

Confirm patch in #1907472-25: Pager in views with ajax working for RC2.

Soundvessel’s picture

Note a related issue of generating pagers with https://api.drupal.org/api/drupal/includes!pager.inc/function/theme_pager/7 Produces the wrong type of pagers since it uses the old .pager markup. I am having one of our back-end devs take a look into it and hopefully we'll have enough info for a new bug report here soon.

valkum’s picture

What do you mean? We have implemented theme_pager with bootstrap_pager and this creates valid .pagination markup.

markcarver’s picture

Status:Needs review» Fixed

Thanks @valkum!

Committed 0f67e3b to 7.x-3.x:

Issue #1907472 by valkum: Pager in views with ajax.

Soundvessel’s picture

@Valkum -- Not sure. I talked to our dev and he was using the Drupal theme_pager function. He did manage to tweak it looking at how views implemented it to get the correct output.

Status:Fixed» Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

meecect’s picture

Status:Closed (fixed)» Needs review

It looks like the patch that applied to the 3.x branch did not have all the features as the one applied to the 2.x branch. on 3.x-dev the pager works, but it does 'jump around' when the throbber is active, much like the issues reported on 2.x above. The 3.x patch seems to only have addressed the views function prototype override.

markcarver’s picture