Zem_Contact_Reborn submitting with AJAX

squaredeye · 2007-03-25 18:12:39

As I suggested here, I’d like to figure out how to submit Zem_Contact_Reborn with Jquery AJAX.

Here are the resources I’m using: jquery and jquery form plugin
Here’s what I have so far, and its not much, mostly just a cut and paste.

<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript" src="path/to/form.js"></script> 

   <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'zemContactForm' and provide a simple callback function 
            $('form.zemContactForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script>

Of course, this only gives me a dumb js alert. I want to do the following:

Do some form validation along the way
Pull in the thanks form (in presentation/forms/) after submission
Clear and Reset the form

The code samples page shows the implementation of a lot of these things, but I could use some direction, as I’m not sure I understand what goes where etc.

Helpy helperton?

Matthew

Last edited by ma_smith (2007-03-26 09:21:27)

squaredeye · 2007-03-26 09:22:31

Okay, clearly one issue here is that the id of the form is generated by the plugin and is a large string of alphanumeric characters like this (zcrf63b659e09d62cc772486b6ffafc9d00). Does anyone have any suggestions about how the JS might interract with this id? Or if it needs to?

hakjoon · 2007-03-26 14:19:25

If you are using jQuery you shouldn’t need the id $('form.zemContactForm') is effectively the same thing as $('#zcrf63b659e09d62cc772486b6ffafc9d00').

Using the id might be a little faster.

squaredeye · 2007-03-26 16:39:05

Okay, sounds good Patrick. I think I get that. :)

Here’s what I’m working with at the moment:

<script type="text/javascript">
	// prepare the form when the DOM is ready 
	$(document).ready(function() { 
	    // bind form using ajaxForm 
	    $('form.zemContactForm').ajaxForm({ 
	        success: function() { 
	            $('#zemThanks'); 
	        } 
	    }); 
	});
	</script>

This submits .zemContactForm, but does not display a thanks form, nor (as I would have expected) does it show any validation errors. What’s the first step to getting the server data from the thanks form to show up? I tried changing the $('#zemThanks'); to the broader div $('#contact > .left > .post');, thinking that it might not be finding #zemThanks to display the information. but nope :)

Since, I am under some pressure to finish this, if anyone has a moment (including you patrick), to work this out with me within a weeks time or so, I’d glady contribute to someone’s amazon wishlist, or a threadless tshirt or some such :).

CHeerio. M

Last edited by ma_smith (2007-03-26 17:17:28)

hakjoon · 2007-03-26 18:39:48

Try this to start

<script type="text/javascript">
	// prepare the form when the DOM is ready 
	$(document).ready(function() { 
	    // bind form using ajaxForm 
	    $('form.zemContactForm').ajaxForm({ 
                  target :'#zemThanks',
	        success: function(responseText, statusText) {
                    alert(responseText);
	        } 
	    }); 
	});
	</script>

it should update #zemThanks but if it doesn’t it should alert what is coming back. My fear is that you are getting a full html page back so you might have to parse through it.

squaredeye · 2007-03-26 18:49:56

Hak,
Thx. I got this error in firebug:

jQuery(options.target).attr("innerHTML", data).evalScripts is not a function
(no name)("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\r\n "http://www.w3.org/TR/xhtml1/DTD/xhtml1-s...", "success")jquery.form.js (line 220)
success("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\r\n "http://www.w3.org/TR/xhtml1/DTD/xhtml1-s...", "success")jquery.form.js (line 228)
e(undefined)jquery.js (line 12)
[Break on this error] jQuery(options.target).attr("innerHTML", data).evalScripts().each(ol...

I tried to understand what that’s saying, but I’m at a loss.

EDIT by the way, the form submitted, but no returned info from the server.

:)

Matthew

Last edited by ma_smith (2007-03-26 18:54:44)

Joey · 2007-06-27 11:21:31

Matthew, did you came any further with this in the meantime? I’d love to see this option in zem_contact_reborn. I know almost nothing about Javascript and jQuery, however I would like to learn jQuery better so maybe I could help. I’ll will take a look at it in a few weeks when I finished school.

Last edited by Joey (2007-06-27 11:21:47)

squaredeye · 2007-06-27 14:22:00

Joey,
I did get this mostly working. Pretty nicely really. I will be launching the site I’m using it with shortly (If I keep saying that, eventually no one will believe me), and I have a near finished tutorial on the subject as well.

Matthew

hakjoon · 2007-06-27 14:35:51

We did get it working. It took a few minor changes to ZCR. I owe Matthew a write up on the changes.

Joey · 2007-06-27 16:29:27

Great! Can’t wait to see it working. Thanks for the efforts! :-) Is it going to be build in in ZCR?

Last edited by Joey (2007-06-27 16:32:29)

hakjoon · 2007-06-28 14:08:25

What we ended up building was more of a hack then an implementation, but it works. I think a more elegant solution could be worked out with some reworking of ZCR.

MattD · 2008-08-28 21:47:23

I’d like to implement this as well but seems matthew’s site is down so the tutorial is unavaliable.

Textpattern CMS

Textpattern CMS support forum

#1 2007-03-25 18:12:39

Zem_Contact_Reborn submitting with AJAX

#2 2007-03-26 09:22:31

Re: Zem_Contact_Reborn submitting with AJAX

#3 2007-03-26 14:19:25

Re: Zem_Contact_Reborn submitting with AJAX

#4 2007-03-26 16:39:05

Re: Zem_Contact_Reborn submitting with AJAX

#5 2007-03-26 18:39:48

Re: Zem_Contact_Reborn submitting with AJAX

#6 2007-03-26 18:49:56

Re: Zem_Contact_Reborn submitting with AJAX

#7 2007-06-27 11:21:31

Re: Zem_Contact_Reborn submitting with AJAX

#8 2007-06-27 14:22:00

Re: Zem_Contact_Reborn submitting with AJAX

#9 2007-06-27 14:35:51

Re: Zem_Contact_Reborn submitting with AJAX

#10 2007-06-27 16:29:27

Re: Zem_Contact_Reborn submitting with AJAX

#11 2007-06-28 14:08:25

Re: Zem_Contact_Reborn submitting with AJAX

#12 2008-08-28 21:47:23

Re: Zem_Contact_Reborn submitting with AJAX

Board footer