So I have this issue where I want to make all forms be popups in overlays. I have the forms/overlays showing up with events on the Submit button. But I am getting stuck on the best approach to deal with success and updating the data on the page behind the overlay.
Basically I have a page that displays some domain object data. The HTML is straight HTML, no backing object. I have a button to edit, click it and the overlay appears with a Form with the domain objects data. The user changes data and clicks Submit button on the form. Overlay disappears, ajax call to the serverside updates the data. What should be returned from the server if anything, and how to update the HTML showing the data. There are also other <section><divs> for other data on the same page, and no refreshing the page.
I am basically looking for a pattern that I can use for all my pages that is quick and easy to write the front end/jquery and backend code.
Bear Bibeault wrote:Approach 1: Return a JSON construct with new data, and write script to replace the data in its elements.
Approach 2: Return an HTML fragment that replaces the part of the page with the new data.
I've used both approaches, but I usually use (2) where the HTML fragment is created by a JSP.
Yeah, I am using the second approach because I have no JSP pages, just ICanHaz.js templates on the client side where I just pass the JSON to it.
The issue I seem to have right now is that it works the first time, but I click the edit button again and the overlay pops up again. But I click the Submit button and it isn't calling the "click" action I had on the button.
Here is my starting function to add a click to the edit button, which gets the data and then calls the function display the overlay. After the overlay function is called, I add the click event to the Submit button. which when clicked calls my saveEvent method, which depending on whether I am doing an update or a new calls another method to display the event page, if new, or update the event page if an update.
Here is the code for just updating.
Click on edit Event button
and the updating the Event page
First time through, it reaches all code. Second time through on same event, it only calls the first function above.
Would the .on() turn off an event if it is already there? But each time that overlay is rendered a new, which includes the Submit button.
I am sure the solution here will also work with my New Event functionality as it is basically the same up to the last point.
Well, hooking it up to document makes it work the second time. But now my validation is saying field is blank when it isn't. I am changing my validation plugin from validity to jquery validate, but haven't put that in yet. Will try that and see what happens.
Yeah, definitely. If I use the browser dev tools and delete that node in the body, and click editEvent, then submit it works. So now to figure out why it was added to the body. It must be fancybox that is doing it.
OK, in the end I found the problem. It was in fancybox. With static html loaded into fancybox the problem didn't occur. But with dynamic html like generated from ICanHaz then passing that to fancybox cause the problem.
fancybox when it closes adds the div to the body but hidden and when static html only once. But with the html string i passed it added it over and over per opening fancybox.
Went to FancyBox's Google Group and found the issue in their issue list. Tried their workaround, but found a better one myself and posted it there.