Databases
StackOverflow2013
Postsdbo
POAdd new row dynamically with Javascript/JQuery/Rails 3
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd new row dynamically with Javascript/JQuery/Rails 3
    primarykey
    data
    text
    <p>I am building a timesheet form that consists of a calendar which enables a user to select a specified date, and search for a project. I have this functionality working. What I basically have is this:</p> <p><img src="https://i.stack.imgur.com/9WTTc.png" alt="enter image description here"></p> <p>Once the user searches for their project and press the plus button, that specified project. Which in this instance is Asda the user would then click the plus icon which would create a new row and put it into the table 'task for project. How can you do this in Javascript/JQuery.</p> <p>Sorry for asking what may be seen as such a basic question, but am still learning Javascript/JQuery. </p> <p>I currently have the plus icon linked to <code>project_project_tasks_path( project.id )</code>. This is just temporary. </p> <p>This is what I have so far: </p> <pre><code> &lt;div class="left"&gt; &lt;table border="2" width="" id='projects' class='datatable'&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Number &amp;nbsp&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;% @projects.each do |project| %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= project.project_number %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= project.project_name %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= link_to image_tag("icons/add.png"), project_project_tasks_path( project.id ), :remote =&gt; true %&gt;&lt;/td&gt; &lt;!-- link_to image_tag("icons/add.png"), tasklist_path(project.id), :as =&gt; "tasklist" --&gt; &lt;/tr&gt; &lt;%- end -%&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;b&gt;Recently Viewed&lt;/b&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Project No.&lt;/th&gt; &lt;th&gt;Project names&lt;/th&gt; &lt;th&gt;Project Leader&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;123&lt;/td&gt; &lt;td&gt;Test&lt;/td&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;&lt;%= link_to image_tag("icons/add.png") %&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;b&gt;&lt;center&gt;Hours for Week commencing: &lt;span id="startDate"&gt;&lt;%= Date.today.beginning_of_week.strftime('%d/%m/%Y') %&gt;&lt;/span&gt;&lt;/center&gt;&lt;/b&gt; &lt;/fieldset&gt; &lt;!-- Task list table --&gt; &lt;div style="float: right; width: 300px; padding-left: 20px;"&gt; &lt;fieldset&gt; &lt;b&gt;Tasks for project&lt;/b&gt; &lt;ul id="task_list"&gt; &lt;/ul&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;!-- Hours list table --&gt; &lt;fieldset&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Leave&lt;/td&gt; &lt;td&gt;&lt;input class="dayinput" type="text" name="Leave"&gt;&lt;/td&gt; &lt;/t&gt; &lt;tr&gt; &lt;td&gt;TOIL&lt;/td&gt; &lt;td&gt;&lt;input class="dayinput" type="text" name="TOIL"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Sick&lt;/td&gt; &lt;td&gt;&lt;input class="dayinput" type="text" name="Sick"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Total&lt;/td&gt; &lt;td&gt;&lt;input id="total" class="total_low" type="text" value="0" disabled=""&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; </code></pre> <p>Edited: </p> <p>I have created a <strong>task_list.js.erb</strong> which is as followed: </p> <pre><code>$('#task_list').html(''); &lt;% @project.project_tasks.each do |task| %&gt; $('#task_list').append('&lt;ul&gt;&lt;%= task.task_name %&gt;'); &lt;% end %&gt; </code></pre> <p><strong>Project Controller</strong> </p> <pre><code> def index # check if we've got a project id parameter if( params[:project_id].nil? ) @project = nil else @project = Project.find(params[:project_id]) end if @project.nil? @project_tasks = ProjectTask.all else @project_tasks = Project.find(params[:project_id]).project_tasks end respond_to do |format| format.html # index.html.erb format.xml { render :xml =&gt; @project_tasks } format.js # index.js.erb end end </code></pre> <p>From the changes made, it outputs: </p> <p><img src="https://i.stack.imgur.com/sslLK.png" alt="Inital Outlook if possible"></p> <p>JQuery Ui autocomplete code: </p> <pre><code>$(function() { function log(message) { $( "&lt;div/&gt;" ).text( message ).prependTo("#log"); } $("#tags").autocomplete({ source : function(request, response) { $.ajax({ url : "/projectlist", dataType : "json", data : { style : "full", maxRows : 12, term : request.term }, success : function(data) { var results = []; $.each(data, function(i, item) { var itemToAdd = { value : item, label : item }; results.push(itemToAdd); }); return response(results); } }); } }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDavid
    1. USDavid
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAdd new row dynamically with Javascript/JQuery/Rails 3
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAdd new row dynamically with Javascript/JQuery/Rails 3
      1. USKelvin
      1. VTFavorite
    3. VO
      singulars
      1. POAdd new row dynamically with Javascript/JQuery/Rails 3
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou need to specify in your question whether your projects will be saved to the database as they are added client side, or will the user submit a form after the projects are added. This will determine whether an ajax request is necessary. From the fact that a project number is assigned this would seem to suggest an ajax request but I can only guess.
      singulars
      1. POAdd new row dynamically with Javascript/JQuery/Rails 3
      1. USmark
    2. COthis should get you started, http://railscasts.com/episodes/197-nested-model-form-part-2
      singulars
      1. POAdd new row dynamically with Javascript/JQuery/Rails 3
      1. USrubish
    3. COSorry for the late reply, the projects displayed, are from an exisiting table called projects. I am trying to get a user to click the plus button which will then add a selected project and put it into a new row
      singulars
      1. POAdd new row dynamically with Javascript/JQuery/Rails 3
      1. USDavid
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload