Attaching modal event handler after initial load #70
Comments
|
Hi there, Are you binding using the data api or via JavaScript? |
|
Using the data api |
|
Latest version 4.0.3 yeah? I'll have a look and see if I can replicate it. |
|
Yes 4.0.3. I've changed it now to use api to load modal so the event is attached after the ajax call. Have a different problem now though. Each listing has a button to trigger the modal but when I click on the button no matter what listing it is it always displays the data from the first listing in the list using it's href values instead of the href from the correct row in my list? |
|
I'll need to see some code. Sounds like you're not binding scope properly. |
|
Here is the listing html, modal binding code follows here is my modal binding |
|
That's a pretty big block of code! It's difficult to see what is happening to be honest but it looks like you are combining both the Data-API and the JavaScript API. You need to choose between them or else you are going to get an attempted double bind, where the second instance, your JavaScript invoked one, will fail. Am I right in seeing some Bootstrap in their also? |
|
Not Bootstrap I'm just using that attribute name to attach my own event handler in jquery. I removed the in-line rbp data attributes but get the same results. I pulled out some stuff to make it smaller and here is the important part of the listing code, which still doesn't work. |
|
Ok clearly the problem is in rbp event attachment - if I look at the network tab the ajax call always gets made to the first href value in the list though each one has a different href as seen above. Since rbp is firing the click event it's attaching ok but for some reason every button is attached to the event for the first one in the list. Worked fine on the initial load when I was using the data- attributes, but not with manual attachment. Any ideas on this - I'm kind of stuck on the project at this point with out having a way to resolve this. Thanks. |
|
You're really gonna have to help me to help you here. I need a JsFiddle or equivalent with code showing what you are trying to do. I can't tell whether the second |
|
Ok so I think I have figured out what is going wrong. It looks to me like you are reusing the same initializer or at least options object for multiple instances. When a modal is bound the code looks for a I have a working example of what I think you are trying to do here https://dl.dropboxusercontent.com/u/78716633/Modal-Example/index.html In my initialisation code I am creating a new options object on each binding call. In my index page I have the following markup: And in my items page I have the following markup: In the future I'm going to change the code so that the original options object is never altered and is reusable. |
|
Let me try to clarify it a bit (by the way thanks for your efforts on this). This is a real estate web site being developed to be single page. You can see the test site here: canre.nwhost.com. I have trimmed the listing display template to make it easier to view the code. The idea is that when a search (ajax) is viewed the slideshow (not rbp) displays as does the first 50 listings that matched the search criteria. Users can then click on the the thumbnail image of the view button which should then make the ajax call to the service routine (using the href of the button) that sends back the proper html for the modal to show the other property images as a slide show. It was working great with in-line modal attributes from the first ajax call but would not attach events when another query is viewed which replaces the listings in the dom. After the first time if I clicked on the image or button to view the slide show it executes the link as a normal link and runs the service routine as if it was a page submit. Does that answer your question? I was thinking that the modal attachment would simply trigger the modal and pickup the correct href from the button being clicked since that would be current context (as it would be if I attached a jquery event to the same class). |
In your code the keyword |
|
I put that in and it still doesn't work. Just uses the href from the first button in the display. As an aside I am able to get it to work if I use jquery like this after the list is loaded into the dom. |
|
Ok...I've just pushed an updated build of the plugin to the feature/equal-height branch. https://github.com/ResponsiveBP/Responsive/tree/feature/equal-height/build That looks like it's working. Could you switch out the JavaScript file (that only, not the css) and give it a test? |
|
Great! - it's works fine now, thanks. I really like rpb as a framework. Two things I think would help would be a good menu system and some good starter layout templates. I think having a starter point for a layout would make it easier for newbies to fbp to get on board. |
|
Excellent! 😄 Glad you like it. I'm working on a menu. I'm also making the grid simpler to use so the whole thing is easier to pick up. Templates will come soon eventually but it's a lot of work putting it all together. I'm gonna keep this issue open until the next release so I can track it so don't close it for now. |
I've got a modal that is used to show a group of pictures for real estate listings. Works great on the list if it's used after the initial page load. If the user runs another search via ajax the list is replaced by the new results. At that point the modal no longer works and it just opens a new page when the link is clicked on one of the listings. This appears to happen because the new list no longer has the modal event handler attached. How do I get RBP to attach to the links after an ajax call like this?
The text was updated successfully, but these errors were encountered: