Form Submission via Ajax.Updater

[eluser]Narkboy[/eluser]
I've been hammering my head on this for far too long, so I'm giving up and asking for help!

I'm developing an admin section for a site which will consist of a single page that links the various admin sections. Clicking fires an Ajax.Updater to fetch the relevant section and display it in a covering div over the main content.

I can get a form view to be displayed by echo'ing them from the controller, but I cannot work out how to submit that form via Ajax.

Here's the process that I want:
1- User click on an admin section. JS displays the div's and Ajax.Updater fills them. (ok)
2- User fills in the form displayed and submits.
3- JS stops the actual submission, and sends it via Ajax.Updater to a controller function which processes the submission and echo's either validation errors or a sucess msg into the original div.
4- User re-submits or continues.

Here's the view of the form that is loaded into the 'cover' div:

Code:

<h1>Add New Portfolio</h1>

&lt;form name="newPort" action="&lt;?php echo site_url('/admin/insertPort');?&gt;" method="post"&gt;
<table class="adminTable">
    <tr>
        <th>Title</th>
        <td>&lt;input name="title" type="text" class="formText" size="20" maxlength="15" /&gt;&lt;/td>
    </tr>
    <tr>
        <th>Description</th>
        <td>&lt;textarea name="description" class="formText" rows="5" cols="80"&gt;&lt;/textarea></td>
    </tr>
    <tr>
        <th>Display Order</th>
        <td>&lt;input name="order" type="text" class="formText" size="3" maxlength="2" /&gt;&lt;/td>
    </tr>
    <tr>
        <th>Active</th>
        <td>&lt;input name="active" class="formText" type="checkbox" class="formText" /&gt;&lt;/td>
    </tr>
    <tr>
        <td>&lt;input name="reset" type="reset" class="formReset" value="Reset" /&gt;&lt;/td>
        <td>&lt;input name="subNewPort" id="subNewPort" type="submit" class="formSubmit" value="Add Portfolio" /&gt;&lt;/td>
    </tr>
</table>

&lt;/form&gt;
<a href="[removed]changeCover('&lt;?php echo base_url();?&gt;index.php/admin/viewPorts');">View Portfolios</a>
<p class="closeCover">[ <a href="[removed]closeCover();">Exit</a> ]</p>

The onsubmit uses a custom function ajaxSubmit because it has to handle the Ajax.Update as well as several other bits for display purposes.

The Ajax.Updater needs to post a request to admin/insertPort which will call the right parts of the manager model and echo either the form with error msgs or else a success msg.

The bit I can't figure (for a day of trying) is how to fire the Ajax.Updater to include the post data from the form. I can call the controller ok, I just can't include the post data with the call.

I'm using Ajax.Updater so that I don't have to worry about writing functions for Ajax.Request to insert the return data - since the controller will always return something. That said, if this is easier using Ajax.Request, then let me know and explain how!! I'd rather use POST than GET, but again, that can be flexible.

Help!!!

Thanks in advance!

/B

[eluser]TheFuzzy0ne[/eluser]
You need to pass back the data using the "parameters" part of the Ajax object. You can grab data from the form using $F().

I've never used it before, but I'd imagine you need to do something like this:

Code:

new Ajax.Updater({ success: 'myFunc' }, '/admin/insertPort', {
    parameters: {
        title: $F('title'),
        description: $F('description'),
        order: $F('order'),
        active: $F('active')
    }
});

[eluser]vitoco[/eluser]
i'm a jquery user , so my explanation it's not very detail , but i search for the general use of the function ( i think it's a Prototype function ) and it seems that you can pass var/value pairs int the "parameters" option

like this :

new Ajax.Updater({ success: 'items', failure: 'notice' }, '/items', {
parameters: { text: $F('text') }, <------------ here you can pass the form vars
insertion: Insertion.Bottom
});

this is the doc url :

http://www.prototypejs.org/api/ajax/updater

saludos

[eluser]Narkboy[/eluser]
I tried this - but with this method I can't get the form items to be passed into the Ajax.Updater parameters section.

Basically, for this work work accross different forms, I need to automatically loop through all the form elements and pass them into Ajax.Updater. Looping is easy enough, but for some reason I can't get the form name to register with the loop properly - it always comes back undefined. Without the form name, I can't grab all the values unless I specify them manually - which is a pain for the dozens of forms that will be neeeded..

So - if this is the best way forward, how do I pass the form name to javascript and loop through all of the elements to use them in the Ajax.Updater call?

/B

[eluser]vitoco[/eluser]
i think you must loop with the form id , so you can do the reference like '#id_form' , it's more accurate

i found this page that explains selectors in Prototype

http://www.prototypejs.org/api/utility/dollar-dollar

...and the example will be like this

$$('#id_form input', '#id_form select' , '#id_form textarea' ).each(....

so you get inputs , selects and textareas that belongs to the form , and in the loop get their values and pass it to the ajax.Updater function

PD: bad english | good solution

Saludos

[eluser]TheFuzzy0ne[/eluser]
This may help you achieve the results you're looking for: http://jennifermadden.com/javascript/loopForms.html. There are many more articles such as this on the Web. Google is your friend.

[eluser]Narkboy[/eluser]
Ok fab - that seems to have done it...

I have to reference the forms using their position in the document flow becasue passing the form id just dosen;t seem to be working. This was the problem - but I can work around it because there will only ever be a single form at any one time..

And yes, Google is your friend when he gets you want you want; sadly, yesterday was not my day!

Any ideas why I can't get the form id reference to work?

Thanks!!

/B

[eluser]TheFuzzy0ne[/eluser]
name your form, and then you should be able to access it like this (assuming you named it "myForm": document.myForm

[eluser]Narkboy[/eluser]

Code:

<form name="newPort" action="<?php echo site_url('/admin/insertPort');?>" method="post">

That seems to be the problem...

The onsubmit requires the url for the ajax call and the name of the form. The ajaxSubmit function then uses the passed form name to grab the elements and create a string to pass into the Ajax.Updater.

But - however I code it, the form name always returns as undefined.

So:

Code:

function ajaxSubmit(url,formIdent)
{
    document.formIdent.elements[i].value // Returns as undefined.
    document.forms[formIdent].elements[i].value // Returns as undefined.
    
    document.forms[0].elements[i].value // Returns the value.
}

I've tried other permutations as well but nothing seems to actually pass the form name through correctly.

/B

[eluser]TheFuzzy0ne[/eluser]
i is not defined. It should be defined in a for loop, and then you iterate through the elements.