Smoothbox, Modal Forms, Validation

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

Smoothbox, Modal Forms, Validation

Postposted on Tue Dec 02, 2008 8:37 am

Hey all,

I'm building a web app and there is a "contact customer service" button that will be on just about every page. So, I build a custom class for myself that will accept a subject and message as parameters, and generate the email. Code re-use FTW! Anyhow, I want to validate it (the form) client-side with javascript to ensure that a message and subject are populated before anything else.

The link itself is using the smoothbox framework that meshes well with mootools to create a nice modal form. so they click the link, modal box pops up and wants the subject and message, then click the submit button and it calls the validation. Here's the problem: Because it's modal, the two textboxes are not validating properly. I have the two boxes inside a div that has it's display properly set to none so it doesn't show up at all until the "contact" button is pressed. However, because of this, it also will never validate proeprly.

If i take the display property off, the code works perfectly, but then I also have a form always showing on my page, yuck.
Code: Select all
' Call to modal form
<p><a href="#TB_inline?height=250&width=500&inlineId=contactCSR" title="Please fill out all fields" class="smoothbox">Contact Customer Service</a></p>   
    <p><asp:linkbutton id="logout" runat="server" text="Log out" onClick="logMeout" /></p>
'Form itself
<div id="contactCSR" style="display:none;">
       <table>
           <tr><td>Subject</td><td><asp:textbox id="contactSubject" width="350" runat="server" /></td></tr>
            <tr><td valign="top">Message</td><td><asp:textbox id="contactMessage" width="350" textmode="MultiLine" height="150" runat="server" /></td></tr>
            <tr><td>&nbsp;</td><td><asp:button id="contactSubmit" runat="server" text="submit" onClick="sendCSREmail" onClientClick="return validateCSREmail()" /></td></tr>
        </table>
    </div>


Above code works, validates, sends email as long as the display style isn't set. Otherwise it does not work..... any know work arounds? The form shows up and hides appropriately, I don't know why it won't validate.
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11907
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: Smoothbox, Modal Forms, Validation

Postposted on Tue Dec 02, 2008 10:08 am

Can we see how the actual code gets rendered by the browser? Test the page and copy the "View Source" of the selected code. It's no good unless we can see what actually gets rendered.

Also... use FIREBUG. It may be that whatever JavaScript is doing the modal popup is pulling the actual form components out of their correct position inside the DOM and putting them somewhere else as is common with modals. Firebug shows you live interactions with the DOM -- extremely useful. You may need to adjust it so it captures the ENTIRE FORM including beginning and end tags, not just the form elements / text boxes. It might be what's causing the validation script to hiccup.
JdL
286DX > Pentium Pro 200 > Athlon 1000 @ 1.4 GHz > Athlon 64 2.2 GHz > Athlon XP 3200+ > Core 2 Duo 3300 @ 4.0 GHz > Core 2 Quad 6600 G0 @ 3.2 > Core i7 3770 @ stock
JdL
Gerbil Elite
 
Posts: 989
Joined: Thu Aug 29, 2002 11:45 am
Location: United States of America

Re: Smoothbox, Modal Forms, Validation

Postposted on Tue Dec 02, 2008 10:55 am

That's the first thing I checked as well JDL, I viewed the source and it renders the controls to the browser, but inside a div with the style "display" set to none. Now, because they are .Net controls, the ID of the element becomes ct100_main_IDName - There is no way to view the modal "source" that I am aware of, to see what it calls itself.

So if I leave the form unhidden and activating the modal form, the boxes the modal form presents which should be the same as the rendered controls, are somehow different. It will validate the form on the page if it's visible, but not the modal form.

edit: Here's the browser's source...

Code: Select all
<div id="contactCSR" style="display:none;">
       <table>
           <tr><td>Subject</td><td><input name="ctl00$main$contactSubject" type="text" id="ctl00_main_contactSubject" style="width:350px;" /></td></tr>
            <tr><td valign="top">Message</td><td><textarea name="ctl00$main$contactMessage" rows="2" cols="20" id="ctl00_main_contactMessage" style="height:150px;width:350px;"></textarea></td></tr>

            <tr><td>&nbsp;</td><td><input type="submit" name="ctl00$main$contactSubmit" value="submit" onclick="return validateCSREmail();" id="ctl00_main_contactSubmit" /></td></tr>
        </table>
    </div>


I will grab firebug and check it out. Thanks!


edit2: I grabbed firebug and WOW what a nice tool! I confirmed that the modal form has no abnormalities that I can detect - names and ID's all look fine.
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11907
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: Smoothbox, Modal Forms, Validation

Postposted on Tue Dec 02, 2008 1:20 pm

Can you paste the entire source of the HTML, as well as the Javascript using Pastie.org? I started one for you:

http://pastie.org/328949

Alternatively, could you surface a link so I could see what you're seeing? Email me if you don't want it public :)
JdL
286DX > Pentium Pro 200 > Athlon 1000 @ 1.4 GHz > Athlon 64 2.2 GHz > Athlon XP 3200+ > Core 2 Duo 3300 @ 4.0 GHz > Core 2 Quad 6600 G0 @ 3.2 > Core i7 3770 @ stock
JdL
Gerbil Elite
 
Posts: 989
Joined: Thu Aug 29, 2002 11:45 am
Location: United States of America

Re: Smoothbox, Modal Forms, Validation

Postposted on Tue Dec 02, 2008 1:24 pm

I done did it. :)

YHPM
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11907
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: Smoothbox, Modal Forms, Validation

Postposted on Tue Dec 02, 2008 5:22 pm

I'd like to take a look too. :D
lordT
Darth Gerbil
 
Posts: 7426
Joined: Fri Nov 25, 2005 2:11 pm
Location: Writing

Re: Smoothbox, Modal Forms, Validation

Postposted on Wed Dec 03, 2008 8:24 am

Well JDL found the problem, but as for a solution, I've tried some things with no success yet. First, the problem: When the modal box is open via the linkbutton, It's actually creating a CLONE of the target modal information. So first off, I now have duplicated ID's and what have you. More to the point, it duplicates these and renders them OUTSIDE of the form tag, which of course prevents me from accessing them.

I have tried a variety of things including iframe from another page (causes funky rendering of tags and what not). The only thing I haven't tried is a pure ajax approach, and I don't want to, it's overkill. I can use a popup window I suppose. FAIL. Gah...

Tutu YHPM.
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11907
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: Smoothbox, Modal Forms, Validation

Postposted on Wed Dec 03, 2008 9:46 am

pete_roth wrote:...a pure ajax approach, and I don't want to, it's overkill.

If by "overkill" you mean it will take too much time, I would have to disagree. I could have had this thing fixed in under an hour. It's a simple matter of changing the way the the JavaScript works -- which means diving into the JavaScript library that handles the modaling. I think you would SAVE yourself time.
JdL
286DX > Pentium Pro 200 > Athlon 1000 @ 1.4 GHz > Athlon 64 2.2 GHz > Athlon XP 3200+ > Core 2 Duo 3300 @ 4.0 GHz > Core 2 Quad 6600 G0 @ 3.2 > Core i7 3770 @ stock
JdL
Gerbil Elite
 
Posts: 989
Joined: Thu Aug 29, 2002 11:45 am
Location: United States of America


Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 3 guests