# Update data using jQuery UI dialog

**URL:** <https://www.ruby-forum.com/t/update-data-using-jquery-ui-dialog/178517>\
**Category:** Rails\
**Created:** [November 5, 2009, 7:39pm UTC](https://www.ruby-forum.com/t/update-data-using-jquery-ui-dialog/178517 "2009-11-05T19:39:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmaenpaa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9de053/32.png) [@jmaenpaa](https://www.ruby-forum.com/u/jmaenpaa)\
**Post date:** [November 5, 2009, 7:39pm UTC](https://www.ruby-forum.com/t/update-data-using-jquery-ui-dialog/178517/1 "2009-11-05T19:39:29Z")

</div>

Hello all,  
I’m just a newbie with Ruby on Rails but I’ve worked a little more with  
jQuery.  
I have a RoR application that has a very long “New” form. One of the  
fields in the form is “Project Notes”. I have created a hyperlink to a  
jQuery UI Dialog box that can stay open so the user can type notes while  
filling in the form (for example during an interview).  
I have used…

\<%= link\_to\_function(‘Comments Window’, ‘viewDialog(“Notes/Comments”)’)  
%\>

to open the dialog box. The function 'viewDialog() is in the  
application.js file in ‘public’ folder.

What I wish would happen is when submitted, the notes typed in the  
dialog would be updated to the “projects” model.

What’s happening is an error message is displaying and the firebug error  
I get is “No route matches “/project/edit” with {:method=\>:post}”

Below is the script I’m running.

- application.js -  
function viewDialog(x){  
jQuery.ui.dialog.defaults.bgiframe = true;  
jQuery(function(){  
jQuery(’#dialog’).dialog({  
url:‘projects/show’,  
title:x,  
width:400,  
height:550,  
hide:‘blind’,  
show:‘blind’,  
resizable:true,  
buttons:  
{  
‘Cancel’: function(){  
jQuery(this).dialog(‘close’).effect(‘blind’);  
jQuery(this).dialog(‘close’).dialog(‘destroy’);  
},  
‘Submit Comments’: function(){  
var c = {};  
c[‘authenticity\_token’] = encodeURIComponent(window.\_token);  
jQuery.ajax({  
type:‘POST’,  
url:’/project/edit’+id,  
data:c,  
success: function(){  
alert(‘Success’);  
},  
error: function(){  
alert(‘Error’);  
}  
});  
}  
}  
});  
});  
}

Thanks for any help.

JohnM

---

<div class="post-metadata">

**Author:** ![jmaenpaa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9de053/32.png) [@jmaenpaa](https://www.ruby-forum.com/u/jmaenpaa)\
**Post date:** [November 5, 2009, 8:00pm UTC](https://www.ruby-forum.com/t/update-data-using-jquery-ui-dialog/178517/2 "2009-11-05T20:00:58Z")

</div>

Just a little more…

I just want to update the textarea, not the table.  
This is all happening before the project is actually created.

- new.html.erb -

\<%= f.label :comments, "Notes/Comments", {:tabIndex =\> 6}%\>  
 \<%= link\_to\_function('Comments Window', 'viewDialog("Notes/Comments")') %\>

John

John M. wrote:

> Hello all,  
> I’m just a newbie with Ruby on Rails but I’ve worked a little more with  
> jQuery.  
> I have a RoR application that has a very long “New” form. One of the  
> fields in the form is “Project Notes”. I have created a hyperlink to a  
> jQuery UI Dialog box that can stay open so the user can type notes while  
> filling in the form (for example during an interview).  
> I have used…
> 
> \<%= link\_to\_function(‘Comments Window’, ‘viewDialog(“Notes/Comments”)’)  
> %\>
> 
> to open the dialog box. The function 'viewDialog() is in the  
> application.js file in ‘public’ folder.
> 
> What I wish would happen is when submitted, the notes typed in the  
> dialog would be updated to the “projects” model.
> 
> What’s happening is an error message is displaying and the firebug error  
> I get is “No route matches “/project/edit” with {:method=\>:post}”
> 
> Below is the script I’m running.
> 
> - application.js -  
> function viewDialog(x){  
> jQuery.ui.dialog.defaults.bgiframe = true;  
> jQuery(function(){  
> jQuery(’#dialog’).dialog({  
> url:‘projects/show’,  
> title:x,  
> width:400,  
> height:550,  
> hide:‘blind’,  
> show:‘blind’,  
> resizable:true,  
> buttons:  
> {  
> ‘Cancel’: function(){  
> jQuery(this).dialog(‘close’).effect(‘blind’);  
> jQuery(this).dialog(‘close’).dialog(‘destroy’);  
> },  
> ‘Submit Comments’: function(){  
> var c = {};  
> c[‘authenticity\_token’] = encodeURIComponent(window.\_token);  
> jQuery.ajax({  
> type:‘POST’,  
> url:’/project/edit’+id,  
> data:c,  
> success: function(){  
> alert(‘Success’);  
> },  
> error: function(){  
> alert(‘Error’);  
> }  
> });  
> }  
> }  
> });  
> });  
> }
> 
> Thanks for any help.
> 
> JohnM

---

<div class="post-metadata">

**Author:** ![jmaenpaa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9de053/32.png) [@jmaenpaa](https://www.ruby-forum.com/u/jmaenpaa)\
**Post date:** [November 5, 2009, 8:32pm UTC](https://www.ruby-forum.com/t/update-data-using-jquery-ui-dialog/178517/3 "2009-11-05T20:32:12Z")

</div>

Solved my own…  
I was going at it all wrong. Instead of an ajax call, I just grabbed  
the value of the dialog textarea and then assigned it to the textarea in  
the original form.  
Here’s my code for anyone that has the same problem.

- application.js -

function viewDialog(x){  
jQuery.ui.dialog.defaults.bgiframe = true;  
jQuery(function(){  
jQuery(’#dialog’).dialog({  
url:‘projects/show’,  
title:x,  
width:400,  
height:550,  
hide:‘blind’,  
show:‘blind’,  
resizable:true,  
buttons:  
{  
‘Cancel’: function(){  
jQuery(this).dialog(‘close’).effect(‘blind’);  
jQuery(this).dialog(‘close’).dialog(‘destroy’);  
},  
‘Submit Comments’: function(){  
//NEW LINES  
var notes = jQuery(‘textarea#irbProject\_notes’).val();  
jQuery(‘textarea#notes’).val(notes);  
}  
});  
}

- new.html.erb -

// This the the DIV for the dialog. I placed it before the “form\_for”

 \<% form\_for :irbProject, :url =\> { :controller =\> 'project', :action =\> 'update'} do |f| %\> \<%= f.error\_messages %\> \<%= f.text\_area :notes, :size =\> '50x30' %\> \<% end %\>

// Here is the table row in the “form\_for”

 \<%= f.label :comments, "Notes/Comments", {:tabIndex =\> 6} %\>  
 \<%= link\_to\_function('Comments Window', 'viewDialog("Notes/Comments")') %\> \<%= f.text\_area :notes, :size =\> "50x5", :id=\>'notes' %\> 

I hope this helps anyone.

Tuttles,

John

John M. wrote:

> Just a little more…
> 
> I just want to update the textarea, not the table.  
> This is all happening before the project is actually created.
> 
> - new.html.erb -
> 
> \<%= f.label :comments, "Notes/Comments", {:tabIndex =\> 6}%\>  
> \<%= link\_to\_function('Comments Window', 'viewDialog("Notes/Comments")') %\>
> 
> John
> 
> John M. wrote:
> 
> > Hello all,  
> > I’m just a newbie with Ruby on Rails but I’ve worked a little more with  
> > jQuery.  
> > I have a RoR application that has a very long “New” form. One of the  
> > fields in the form is “Project Notes”. I have created a hyperlink to a  
> > jQuery UI Dialog box that can stay open so the user can type notes while  
> > filling in the form (for example during an interview).  
> > I have used…
> > 
> > \<%= link\_to\_function(‘Comments Window’, ‘viewDialog(“Notes/Comments”)’)  
> > %\>
> > 
> > to open the dialog box. The function 'viewDialog() is in the  
> > application.js file in ‘public’ folder.
> > 
> > What I wish would happen is when submitted, the notes typed in the  
> > dialog would be updated to the “projects” model.
> > 
> > What’s happening is an error message is displaying and the firebug error  
> > I get is “No route matches “/project/edit” with {:method=\>:post}”
> > 
> > Below is the script I’m running.
> > 
> > - application.js -  
> > function viewDialog(x){  
> > jQuery.ui.dialog.defaults.bgiframe = true;  
> > jQuery(function(){  
> > jQuery(’#dialog’).dialog({  
> > url:‘projects/show’,  
> > title:x,  
> > width:400,  
> > height:550,  
> > hide:‘blind’,  
> > show:‘blind’,  
> > resizable:true,  
> > buttons:  
> > {  
> > ‘Cancel’: function(){  
> > jQuery(this).dialog(‘close’).effect(‘blind’);  
> > jQuery(this).dialog(‘close’).dialog(‘destroy’);  
> > },  
> > ‘Submit Comments’: function(){  
> > var c = {};  
> > c[‘authenticity\_token’] = encodeURIComponent(window.\_token);  
> > jQuery.ajax({  
> > type:‘POST’,  
> > url:’/project/edit’+id,  
> > data:c,  
> > success: function(){  
> > alert(‘Success’);  
> > },  
> > error: function(){  
> > alert(‘Error’);  
> > }  
> > });  
> > }  
> > }  
> > });  
> > });  
> > }
> > 
> > Thanks for any help.
> > 
> > JohnM