Note that there are some explanatory texts on larger screens.

plurals
  1. POcakephp render element with data
    text
    copied!<p>I am trying to render an element and refresh it. So, when a user clicks a button, it calls an ajax function that calls a php function. this function adds data to a database. This all works. But, now I want to re-render the element with the new data. This is what I have so far:</p> <pre><code>public function add_role() { $this-&gt;autoRender = false; if ($this-&gt;request-&gt;data['Role']) { $this-&gt;Role-&gt;create(); if ($this-&gt;Role-&gt;save($this-&gt;request-&gt;data)) { $this-&gt;set('roles', $this-&gt;Role-&gt;find('all')); $this-&gt;render('/Elements/role_table'); }else{ return "Failed Insert"; } } } </code></pre> <p>But this causes the element to just be displayed twice in the page (although the new one is updated). How do I do this correctly or remove the original element?</p> <p>Thanks</p> <p>Edit: added element and jQuery</p> <p>Element:</p> <pre><code>&lt;?php echo' &lt;div style="overflow-y: auto; overflow-x: none; height: 100%; width:350px;" id="roleTable"&gt; &lt;table style=" border:1px solid black; width:300px; "&gt; &lt;tr&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Role&lt;/th&gt; &lt;/tr&gt; '; foreach ($roles as $role) { echo ' &lt;tr&gt; &lt;td&gt;'; echo $role["Role"]["id"]; echo ' &lt;/td&gt; &lt;td&gt;'; echo $role["Role"]["role_name"]; echo' &lt;/td&gt; &lt;/tr&gt;'; } echo' &lt;tr&gt; &lt;td colspan="2" style="border-top: 1px solid black;"&gt; Add Role: &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;form id="ajaxPostForm"&gt; &lt;input type="text" name="data[Role][role_name]" style="width: 60%" required="required" id="tbRole" &gt; &lt;input value="Save" type="button" onclick="save_role();"&gt; &lt;/form&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;div id="addRoleStatus"&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;/div&gt;'; </code></pre> <p>jQuery for original insert:</p> <pre><code>function save_role() { var role= $('#tbRole').val(); var base=$('#ajaxPostForm'); var params=base.serialize(); $.ajax({ type: 'POST', url: 'Roles/add_role', data: params, cache: false, dataType: 'HTML', beforeSend: function(){ }, success: function (html){ $('#addRoleStatus').html(html); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("Status: " + textStatus); alert("Error: " + errorThrown); } }); } </code></pre>
 

Querying!

 
Guidance

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