jquery - Apply x-editable for new appended td's -


i have table fields can add dynamically table data via jquery. problem elements add aren't having properties i've set group of td's until reload entire page , don't know has triggered take action new ones.

here code:

#js file function add_task() { task_name = $("#task-name").val(); due_date = $("#task-due_date").val(); var new_task = $.ajax({     url: "/add_task/",     data: "task="+task_name+"&due_date="+due_date,     success: function(task_id){         get_task(task_id);     } }); }  function get_task(task_id) { $.ajax({     url: "/get_task/"+task_id+"/", //get html single_task.html      success: function(result){         $('#container').append(result);         $('#task-'+task_id).fadein(500);     }  });  }  #single_task.html <tr id="task-{{task.id}}"> <td><div id="task">         <a href="#" data-type="text" data-pk="{{task.id}}" data-     url="/update_task/{{task.id}}/" data-title="enter task">{{ task.task }}</a>     </div></td>  <td>{{ task.initialized_at|age }}</td> <td>{{ task.due_date }}</td> <td>{{ task.done }}</td> <td><button onclick="delete_task('{{task.id}}');" class="btn"> x </button></td> 

#index.html //place load     <table id="container" class="table table-bordered">      <th style="width:200px;">task</th>     <th style="width:60px;">started</th>     <th style="width:80px;">due date</th>     <th style="width:50px;">status</th>     <th style="width:20px;">action</th>      {% task in tasks %}          <tr id="task-{{task.id}}">             <td>                 <div id="task"><a href="#" data-type="text" data-    pk="{{task.id}}" data-url="{% url 'todo:update_task' task.id %}" data-title="enter task">{{     task.task }}</a></div>             </td>                <td>{{ task.initialized_at|age }}</td>             <td>                 <div id="due_date"><a href="#" data-type="date"     data-pk="{{task.id}}" data-url="{% url 'todo:update_task' task.id %}" data-title="new date">    {{ task.due_date }}</a></div>             </td>             <td>{{ task.done }}</td>             <td><button onclick="delete_task('{{task.id}}');" class="btn         btn-link"> x </button></td>         </tr>      {% endfor %}     </table>

your appreciated :)

thank in advance!

the reason why x-editable or many other jquery plugins not act on newly rendered elements because apply on rendered elements. solution reload function, , add new listeners.

please check fiddle

function returnaccess() {       // setup editable new elements created in dom          $('#users a').editable({         type: 'text',         name: 'username',         url: '/post',         title: 'enter username' });      //ajax emulation      $.mockjax({url: '/post', responsetime: 200 }); }  //button trigger  $("button").click(function()  {      randomid = math.floor(math.random()*1000001);     var col = "<tr><td colspan='3'><a href='#' data-pk='"+randomid+"'>mike</a></td></tr>";     $( "#users" ).append(col);           returnaccess();  });  // trigger function in beginning   returnaccess();

here html 

<button id="something">add new</button>  <table id='users' class='table table-bordered table-condensed'>     <tr><th>#</th><th>name</th><th>age</th></tr>     <tr>         <td>1</td>         <td><a href="#" data-pk="1">mike</a></td>         <td>21</td>            </tr>      <tr>         <td>2</td>         <td><a href="#" data-pk="2">john</a></td>         <td>28</td>            </tr>              <tr>         <td>3</td>         <td><a href="#" data-pk="3">mary</a></td>         <td>24</td>            </tr>          </table>

Comments

Post a Comment

Popular posts from this blog

curl - PHP fsockopen help required -

i trying work on cloudflare api , have found in documentation. unfortunately have no idea how can use in fsockopen or through curl. here example of post request. need know how can make request below data post using curl or fsockopen curl https://www.cloudflare.com/api_json.html -d 'a=cache_lvl' \ -d 'tkn=8afbe6dea02407989af4dd4c97bb6e25' \ -d 'email=sample@example.com' \ -d 'z=example.com' \ -d 'v=agg' here link cloudflare https://www.cloudflare.com/docs/client-api.html#s4.2 try one: $ch = curl_init("https://www.cloudflare.com/api_json.html"); curl_setopt($ch, curlopt_returntransfer,1); curl_setopt($ch, curlopt_followlocation, 1); curl_setopt($ch, curlopt_ssl_verifypeer,false); // handling of -d curl parameter here. $param = array( 'a' => 'cache_lvl', 'tkn' => '8afbe6dea02407989af4dd4c97bb6e25', 'email' => 'sample@example.com', 'z' =...
Read more

HTTP/1.0 407 Proxy Authentication Required PHP -

i working in restricted network/limited access internet. since have use proxy make web service call. here php code calling web service , response . $client = new soapclient("http: //www.xyz.com/abc/wsdls/login.wsdl", array("trace" => 1, "exceptions" => 1, 'proxy_host' => $proxy_host, 'proxy_port' => $proxy_port, 'proxy_login' => $proxy_login, 'proxy_password' => $proxy_password)); response is fatal error: uncaught soapfault exception: [wsdl] soap-error: parsing wsdl: couldn't load ' http://www.xyz.com/abc/wsdls/login.wsdl ' : failed load external entity if copy url error message , paste in browser(with same proxy settings) works. 2nd scenario is, if pass values instead of variables giving me diffarant response $client = new soapclient("http: //www.xyz.com/abc/wsdls/login.wsdl", array("trace" => 1, "exceptions" => 1, 'proxy_host' ...
Read more

java - More than one row with the given identifier was found: 1, for class: com.model.Diagnosis -

below model, service implementation , error trace of code. model class: @entity @table(name = "ph_diagnosis_history") @jsonidentityinfo(generator = objectidgenerators.propertygenerator.class, property = "id",scope=diagnosis.class) public class diagnosis extends abstractentity { @column(name = "diagnosis_notes", length=255) @length(max = 255, message = iprprop.max_len_255_msg) private string diagnosisnote; @enumerated(enumtype.string) private diagnosistypeenum type; @temporal(temporaltype.date) @column(name = "diagnosis_date") @jsonserialize(using = jsondateserializer.class) private date diagnosisdate; @manytoone @joincolumn(name = "patient_chart_id") private patientchart patientchart; public string getdiagnosisnote() { return diagnosisnote; } public void setdiagnosisnote(string diagnosisnote) { this.diagnosisnote = diagnosisnote; } public d...
Read more