Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment | File | Size | Author |
---|---|---|---|
#25 | bootstrap-fix-ajax-pagination-on-views-1.patch | 596 bytes | valkum |
#19 | bootstrap-pager-in-views-with-1907472-19.patch | 7.41 KB | markhalliwell |
#19 | interdiff.txt | 1.86 KB | markhalliwell |
#15 | bootstrap-pager-in-views-with-1907472-15.patch | 2.88 KB | markhalliwell |
#14 | bootstrap-pager-in-views-with-1907472-14.patch | 2.61 KB | markhalliwell |
Comments
Comment #1
Adam Wood CreditAttribution: Adam Wood commentedWe'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.
Comment #2
lupus78 CreditAttribution: lupus78 commentedThis 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.
Comment #3
markhalliwellJust 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.Comment #4
Adam Wood CreditAttribution: Adam Wood commentedI 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...
Comment #5
markhalliwellAh 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?
Comment #6
Adam Wood CreditAttribution: Adam Wood commentedThat 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.
Comment #7
markhalliwellTry this
Comment #8
markhalliwellPatch submitted by the Drush iq-submit command.
Comment #9
markhalliwellHave you been able to test this?
Comment #10
lupus78 CreditAttribution: lupus78 commented@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.
Comment #11
Adam Wood CreditAttribution: Adam Wood commented@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
Comment #12
markhalliwellOk. 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.
Comment #13
markhalliwellComment #14
markhalliwellTry this patch. I was able to get it to work locally, just had to change the JS group
Comment #15
markhalliwellJust caught the an extra ellipsis that needed to be converted into a
<span/>
tag.Comment #16
markhalliwellAlso, 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..
Comment #17
Adam Wood CreditAttribution: Adam Wood commentedThanks 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.
Comment #18
Adam Wood CreditAttribution: Adam Wood commentedThe jumping of the
li.prev
can be solved just with: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?Comment #19
markhalliwellOk, 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.
Comment #20
Adam Wood CreditAttribution: Adam Wood commentedThat 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!
Comment #21
markhalliwellAwesome! I took that as a RTBC and committed to dev: 05daacc.
Comment #23
Shevchuk CreditAttribution: Shevchuk commentedSame thing on 7.x-3.0-rc2. Is reopening this ok or should it be a separate issue?
Comment #24
Shevchuk CreditAttribution: Shevchuk commentedComment #25
valkum CreditAttribution: valkum commentedComment #26
valkum CreditAttribution: valkum commentedthere was in typo in ajax_views.js
should be ul.pagination not .pagination ul
Comment #27
jthorson CreditAttribution: jthorson commented15: bootstrap-pager-in-views-with-1907472-15.patch queued for re-testing.
Comment #29
valkum CreditAttribution: valkum commenteddon't test the old patch. because rc2 got an new dir structure.
Comment #30
Shevchuk CreditAttribution: Shevchuk commentedConfirm patch in #1907472-25: Pager in views with ajax working for RC2.
Comment #31
Soundvessel CreditAttribution: Soundvessel commentedNote 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.
Comment #32
valkum CreditAttribution: valkum commentedWhat do you mean? We have implemented theme_pager with bootstrap_pager and this creates valid .pagination markup.
Comment #33
markhalliwellThanks @valkum!
Committed 0f67e3b to 7.x-3.x:
Comment #34
Soundvessel CreditAttribution: Soundvessel commented@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.
Comment #36
meecect CreditAttribution: meecect commentedIt 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.
Comment #37
markhalliwellhttps://drupal.org/node/add/project-issue/bootstrap#creating_new_issues