• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Forms in overlay/FancyBox and updating page. JQuery

 
Mark Spritzler
ranger
Sheriff
Posts: 17278
6
IntelliJ IDE Mac Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

Thanks

Mark
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65124
92
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Mark Spritzler
ranger
Sheriff
Posts: 17278
6
IntelliJ IDE Mac Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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


showOverlay code


saveEvent code


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.

Thanks

Mark
 
Mark Spritzler
ranger
Sheriff
Posts: 17278
6
IntelliJ IDE Mac Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Still can't figure out why it works the first time, but the second time it refreshes the page, which is basically a full load of the single page full app.

Thanks

Mark
 
Mark Spritzler
ranger
Sheriff
Posts: 17278
6
IntelliJ IDE Mac Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

Mark
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65124
92
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The jQuery validation plugin has its quirks, but I've never had any problems using it -- especially for simple things such as required fields.
 
Mark Spritzler
ranger
Sheriff
Posts: 17278
6
IntelliJ IDE Mac Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
OK, I put it back tot he way I had it and have my problem. Which is fine, but I have noticed something different. Everytime I create my form from javascript, I have another <form id="eventUpdateForm> added to my body. So if I click edit Event 5 times, I have 5 <form id="eventUpdateForm> in my body, which must be the problem. So if I make sure it only gets created once. I think I have to call the html or remove function to remove the previous form. I noticed when I have more than one, that the first one does have a click event attached, but the others don't.

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.

Thanks

Mark
 
Mark Spritzler
ranger
Sheriff
Posts: 17278
6
IntelliJ IDE Mac Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

Here is that link
http://code.google.com/p/fancybox/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary&groupby=&sort=&id=95

Thanks for your help guys.

Mark
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65124
92
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Can't say I did all that much, but you're welcome anyways!
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic