This week's book giveaways are in the Java EE and JavaScript forums.
We're giving away four copies each of The Java EE 7 Tutorial Volume 1 or Volume 2(winners choice) and jQuery UI in Action and have the authors on-line!
See this thread and this one for details.
The moose likes HTML, CSS and JavaScript and the fly likes Forms in overlay/FancyBox and updating page. JQuery Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Forms in overlay/FancyBox and updating page. JQuery" Watch "Forms in overlay/FancyBox and updating page. JQuery" New topic
Author

Forms in overlay/FancyBox and updating page. JQuery

Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17250
    
    6

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


Perfect World Programming, LLC - Two Laptop Bag - Tube Organizer
How to Ask Questions the Smart Way FAQ
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61066
    
  66

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17250
    
    6

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

Joined: Feb 05, 2001
Posts: 17250
    
    6

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

Joined: Feb 05, 2001
Posts: 17250
    
    6

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

Joined: Jan 10, 2002
Posts: 61066
    
  66

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

Joined: Feb 05, 2001
Posts: 17250
    
    6

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

Joined: Feb 05, 2001
Posts: 17250
    
    6

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

Joined: Jan 10, 2002
Posts: 61066
    
  66

Can't say I did all that much, but you're welcome anyways!
 
Consider Paul's rocket mass heater.
 
subject: Forms in overlay/FancyBox and updating page. JQuery