Update data using jQuery UI dialog

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

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

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