Populating form fields and jQuery modal windows

[tquill]

I've been having trouble the past few days trying to figure out how to
solve the problem I'm having.

The goal is to let the user select and edit a database record with
only one page refresh (or none).

The way I'm hoping it can work is that when the user clicks the edit
button, a jQuery modal window pops up with a select box asking the
user to select the record to edit. After the record is selected and
the user hits "ok", another modal window pops up over it with a form
that's prepopulated with the record data. Changes can then be made,
then saved to the database... redirecting to the home page.

The way I have it setup is to have two modal windows via jQuery (which
are just hidden divs on the home page), and one form in each modal
window. Submitting the first form drills down to the record AND opens
the second modal window form with the prepopulated data without a page
refresh.

The problem I'm having is that the first form's action is in a
controller, and any time that form is submitted cfwheels wants a
specific view page or a redirect to another page... which eliminates
any chance of the second modal window popping up. I've also messed
around a lot with submitting the form via AJAX, but since the form's
action is still in the controller, it still wants a view page or
something to do after the action is completed.

What are my options? I feel like it should work if I can submit the
first form without any redirects or view pages... but I'm not sure if
that's the right option or the only option.

Thanks for any help guys.

[Yannick]

Hi,

I've you tried something similar to this?

in your js file (call using url your controller, don't forget the
format=json param
================

$.ajax({
type: "POST",
url: getRootPath() + "members/invitefriends?format=json&message=" + message,
dataType: "json",
async: false,
success: function(response){
if (response == "success"){
$( "#invite_friends" ).dialog( "close" );
$('#message_container').addClass("guest_message").html("Thanks
for sharing " + name);
$('#container_aboutus_form').hide();

}
}
});

Then in your controller:
====================

<cffunction name="invitefriends" hint="Send email to invited friends">

<cfset provides("json")>

do some stuff here

<cfset renderWith("success")>

</cffunction>

I return "success" in that case and then in my js success function I
verify its success and do some other stuff

Hope this help.

> --
> You received this message because you are subscribed to the Google Groups "ColdFusion on Wheels" group.
> To post to this group, send email to cfwh...@googlegroups.com.
> To unsubscribe from this group, send email to cfwheels+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/cfwheels?hl=en.
>

--
Yannick Morin
Founder of bizonbytes.com

[tquill]

I'll try both of these suggestions when I get home. Thanks for the
help. I will update this thread with the results. I can't tell you
how much I appreciate the feedback though... I've been stuck here for
the past two days.


On Feb 14, 10:26 am, Greg Stallings <gregstalli...@gmail.com> wrote:
> You can use
>
> public void function myAjaxFunction() {
> if (isAjax()) {
> var response = {};
> response["success"] = false;
> response["message"] = "An unexpected error occurred.";
> renderText(serializeJson(response));} else {
>
> redirectTo(route="home");
>
> }
> }
>
> or something similar. The key here is renderText()

> > Thanks for any help guys.- Hide quoted text -
>
> - Show quoted text -

[tquill]

I'm still trying to fix it using the suggestions above.  I'll keep
playing around with it until I figure it out, but I'll post my code
just in case I wasn't clear in my first post.  I don't know that
anyone will actually look at it... but if someone does have the time,
I really appreciate it.

I'm going to keep trying the suggestions above...   I haven't had any
luck so far but I'm probably just putting things in incorrectly.

-------Controller action---------

    <cffunction name="edit">

            <cfset widget =
model("widget").findByKey(params.widget.id)>

    </cffunction>

    <cffunction name="save">

            <cfset widget.update(params.post)>

    </cffunction>

-------End Controller actions-----

--------script.js------

$("#editWidget").click(function() {
$("#editWidgetDialogForm").dialog('open');
});

$("#editWidgetDialogForm").dialog({
autoOpen: false,
height: 400,
width: 300,
modal: true,
buttons: {
"Edit Widget": function() {

 document.forms["editWidgetForm"].submit();
$("#editWidgetDialogFormPopulated").dialog('open');

},
Cancel: function() {
$(this).dialog("close");
}
}
});


$("#editWidgetDialogFormPopulated").dialog({
autoOpen: false,
height: 450,
width: 600,
modal: true,
buttons: {
"Submit Changes": function() {
document.forms["editWidgetFormDrilled"].submit();
},
Cancel: function() {
$(this).dialog("close");
}
}
});

-------end script.js------


------view----

<cfoutput>

<div id="editWidgetDialogForm" title="Edit widget">

#startFormTag(name="editWidgetForm", action="edit")#
#select(label="Which widget needs changing?", objectName="widget",
property="id", options=widgets, valueField="id", textField="nickname",
includeBlank="-Select A Widget-")#

 #submitTag()#  <!--- Form is submitted via jQuery, submitTag() is not
needed --->
#endFormTag()#

</div>


    <div id="editWidgetDialogFormPopulated" title="Edit widget">
    <p>Let's get some info about your widget!</p>

      #startFormTag(name="editWidgetFormPopulated", action="save")#

            #textField(label="Widget Name", objectName="widget",
property="name")#
           #submitTag()#  <!--- Form is submitted via jQuery,
submitTag() is not needed --->

    #endFormTag()#
    </div>

</cfoutput>

------ end view-----

[Chris Peters]

I've handled it like this in the past. Before I paste code, let me explain what's going on.

On the server side...

1. If the save is a success, decide what to do next.
1. If AJAX, return JSON.
2. If not AJAX, redirect.
2. If validation fails, decide what to do next.
1. If AJAX, return the form as a partial (but not the entire HTML page with layout).
2. If not AJAX, return the entire form, including layout.

On the client site, post via AJAX and add ?format=json to the end of the URL as was suggested earlier. Call provides("html,json") in init() in your controller.

The code below doesn't have an if (isAjax()) { ... } else { ... } check when validation fails, but you should be able to figure out how to add that part in.

	function create() {


		assetCategory = model("assetCategory").new(assetId=params.assetKey, category=params.category);





		if (assetCategory.save()) {


			if (isAjax()) {


				ajaxResponse = {


					"ajaxResponse"=true,


					"dataRefreshUrl"=urlFor(route="assetAssetCategories", assetKey=params.assetKey, action="checkBoxes"),


					"dataRefreshContainerId"="category-check-boxes-list"


				};


				renderWith(ajaxResponse);


			}


			else {


				flashInsert(success="The category was created successfully.");


				redirectTo(route="assets", action="edit", key=params.assetKey);


			}


		}


		else {


			$setAsset();


			category = assetCategory.category;


			flashInsert(error="There was an error saving the category. Review the highlighted fields below and try again.");


			renderPage(action="new");


		}


	}

[tquill]

I'm really sorry, but I still can't get it to work. I doubt I'm
typing everything in correctly for my app like the examples you guys
are providing above.

I know this is frustrating, but I really have been trying all your
suggestions over and over again, but I must be doing something
wrong...

Could someone just post a very simple example (view page, controller
with actions, js file).

I was hoping for an example that has two forms, both on the same view
page. The first form is a select box, and the second form is a text
box. Once the select box has a value selected, the second box
automatically populates with data based on the what was selected in
the select box. So maybe the drop down has first names, and the text
box populates with the last name.

I know this is a lot of work for someone I don't know on the internet
to do for me... but I've been dying the past few days trying to figure
this out. I get home from work at 6 just to try until 10pm every
night trying to figure this out. Still no luck. The wife didn't
exactly like that last night for valentines day.

Anyway, thanks for the help everyone. I know I'm a huge newb, but I
want to stick with wheels so I can try and stay a bit more organized.

On Feb 15, 1:25 pm, Chris Peters <chris.pet...@liquifusion.com> wrote:
> I've handled it like this in the past. Before I paste code, let me explain
> what's going on.
>
> On the server side...
>

>    1. If the save is a success, decide what to do next.
>       1. If AJAX, return JSON.
>       2. If not AJAX, redirect.
>    2. If validation fails, decide what to do next.
>       1. If AJAX, return the form as a partial (but not the entire HTML
>       page with layout).
>       2. If not AJAX, return the entire form, including layout.

[Chris Peters]

What you're describing is very different from what I provided below.

Here is how to do it:

1. Use jQuery to watch for change on the select box. On change, call the server to get data based on the value of the select box.
2. Have Wheels return JSON with the data to be consumed.
3. Use jQuery to fill in the text box with the JSON returned by Wheels.

Read the Responding with Multiple Formats chapter for hints on how Wheels can work with a JSON request.

[tquill]

Thanks Chris. I think I might understand how to do that. Sorry for
being such a newb.

On Feb 16, 8:37 am, Chris Peters <chris.pet...@liquifusion.com> wrote:
> What you're describing is very different from what I provided below.
>
> Here is how to do it:
>

>    1. Use jQuery to watch for change on the select box. On change, call the

>    server to get data based on the value of the select box.

>    2. Have Wheels return JSON with the data to be consumed.
>    3. Use jQuery to fill in the text box with the JSON returned by Wheels.

> ...
>
> read more »- Hide quoted text -

[Chris Peters]

No need to apologize. Just have to take it a step at a time!

[tquill]

I've got the jQuery change tracking the select box value correctly,
but how do get data from the server based on that value? I haven't
been able to get an ajax call to work because I don't think I'm typing
in the URL information correctly. My directory structure is a bit
weird.

The drop down box (id="unique2") and text field (id="testtext") is
located at:
C:\inetpub\wwwroot\WheelsApp\views\main\tabs\overview\forms
\_editOrder.cfm

The controller is located at:
C:\inetpub\wwwroot\WheelsApp\controllers\Main.cfc

Here's my simple js that's tracking the order id correctly and
populating the field with that order id... but how do I populate that
field with a record from the server based on that orderID?

$("#unique2").change( function () {
var orderID = $("#unique2").val();
$("#testtext").val(orderID);

});

My controller has an "edit" action, but I don't know how to define the
query based off a jquery variable, then send it back to jquery to
populate the text field:

<cffunction name="edit">

<cfset orderEdit = model("order").findByKey(orderID)>

</cffunction>

I do have an init() method:

<cffunction name="init">
<cfset provides("html,json")>
</cffunction>


If anyone gets the chance to look at this for me, I reeeeallllllly
really really appreciate it. I had this figured out without wheels...
but my code was ultra messy. I hope I can get it figured out with
wheels.



On Feb 16, 10:19 am, Chris Peters <chris.pet...@liquifusion.com>
wrote:

> ...
>
> read more »

[tquill]

After working on the "wheels, ajax and you" tutorial I realized my
directory structure doesn't matter, since everything is included via
partials.

I'm still not sure how to send a jQuery variable to an action in the
main controller, then send a query's record back to jQuery as a
jQuery variable.

I think I'm getting close?

> ...
>
> read more »

[Yannick]

Can you show us you ajax call.

Thanks

--
You received this message because you are subscribed to the Google Groups "ColdFusion on Wheels" group.
To post to this group, send email to cfwh...@googlegroups.com.
To unsubscribe from this group, send email to cfwheels+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/cfwheels?hl=en.

--
Yannick Morin
Founder of bizonbytes.com

[tquill]

I'm not sure what the problem is. I thought I had it figured out, but
jQuery variables don't seem to make it to my action. Below is my ajax
call:

------------------

$("#unique2").change( function () {

id = $("#unique2").val();
idInt = parseInt(id,10);

$.ajax({
type: "POST",
url: "http://127.0.0.1/wheelsAPP/index.cfm/main/
edit?format=json",
dataType: "json",
success: function(response) {
$
("#testtext").val(response[idInt].orderID);
}
});

return false;

});
-------------------------

What I don't understand is that if I change "idInt" above in the "$
("#testtext").val(response[idInt].orderID)", to an integer it works...
but I obviously can't filter my array based on order number that way.


My "edit" action in my main controller is:
------------------------
<cffunction name="edit">

<cfset orderList =
model("orders").findAll(where="personid=#session.user.id#",
returnAs="objects")>

<cfset renderWith(orderList)>

</cffunction>
----------------

What am I doing wrong?

> ...
>
> read more »

[tquill]

I've been searching the cfwheels group for a few hours with no luck.
My main problem is sending a jQuery variable to a controller's
action... then using that jQuery variable in the action.

I know a parameter of an ajax call is "data" but I don't know how to
send it from jQuery and receive it in the action.

How do I do that?

> ...
>
> read more »

[Yannick]

for example you can do the following to send the id var

               id = $("#unique2").val();

               $.ajax({
                   type: "POST",
                   url: "

http://127.0.0.1/wheelsAPP/index.cfm/main/
edit?format=json&id=" + id


and then in your controller you refer to it using params.id:

<cfset orderList = model("orders").findAll(where="id=#params.id#", returnAs="objects")>

> ...
>
> read more »

--
You received this message because you are subscribed to the Google Groups "ColdFusion on Wheels" group.
To post to this group, send email to cfwh...@googlegroups.com.
To unsubscribe from this group, send email to cfwheels+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/cfwheels?hl=en.

[tquill]

Thank you soooooooo much!!! It's finally working.

I really appreciate all the responses above. I can't tell you all how
thankful I am for the help!

On Feb 18, 5:22 am, Yannick <bizonby...@gmail.com> wrote:
> for example you can do the following to send the id var
>
>                id = $("#unique2").val();
>
>                $.ajax({
>                    type: "POST",
>                    url: "http://127.0.0.1/wheelsAPP/index.cfm/main/

> edit?format=json<http://127.0.0.1/wheelsAPP/index.cfm/main/edit?format=json>

> ...
>
> read more »

[Yannick]

Glad we could help...enjoy wheels.

> ...
>
> read more »

--
You received this message because you are subscribed to the Google Groups "ColdFusion on Wheels" group.
To post to this group, send email to cfwh...@googlegroups.com.
To unsubscribe from this group, send email to cfwheels+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/cfwheels?hl=en.

[Phord]

Hi Tguill,

Any chance you could show us simplified versions of the view ,
controller, and js files that you ended up using?
It doesn't have to work, but it would be easier than trying to put
something together from all the above posts.

Thanks.

> ...
>
> read more »

[tquill]

Sure thing!

-------------------
View:

#startFormTag(name="editForm", controller="controller",
action="edit")#
#select(label="What needs changing?", objectName="widget",

property="id", options=widgets, valueField="id", textField="nickname",

includeBlank="-Select A Widget-", id="unique2")#
#endFormTag()#

#startFormTag(name="editFormPopulated", action="update")#
#textField(label="Name", objectName="widget", property="name",
id="widget-name-edit")#
#textField(label="Type", objectName="widget", property="type",
id="widget-type-edit")#
#hiddenField(objectName="widget", property="id", id="widget-id-edit")#
#endFormTag()#

--------------
Controller:

<cffunction name="edit">

<cfset widgets =
model("widgets").findOne(where="personid=#session.user.id# AND
id=#params.id#")>
<cfset widgetDrilled = {}>
<cfset widgetDrilled["year"] = "#widgets.name#">
<cfset widgetDrilled["make"] = "#widgets.type#">
<cfset widgetDrilled["id"] = "#params.id#">

<cfset renderWith(widgetDrilled)>

</cffunction>

<cffunction name="update">

<cfset widget =
model("widget").findByKey(params.widget.id)>

<cfset widget.update(params.widget)>

<cfset redirectTo(controller="main", action="home")>

</cffunction>

-------
javascript:

$( "#unique2" ).change(function () {

var widgetToEditId = $( "#unique2" ).val();

$.ajax({
type: "POST",
url: "http://127.0.0.1/wheelsAPP/index.cfm/main/edit?

format=json&id=" + widgetToEditId,

dataType: "json",
success: function(response) {

$("#widget-name-edit").val(response.name);
$("#widget-type-edit").val(response.type);
$("#widget-id-edit").val(response.id);
}
});
return false;

});

> ...
>
> read more »