0

enter image description hereI am new to web development and struggling with a very simple issue. Please help me with a fix for this issue as I have not been able to move forward with my work.

Requirement: I make an AJAX call to a django URL that gets me the data. I render the table using jsrender template. I have been able to get the table rendered just the way it is needed.

Issue : The last column is a font awesome icon that when user clicks on should call a jQuery function that opens up a modal dialog and allows the edits. On click of the icon, nothing happens as I think the icon is not accessible for any events. Have I missed out some kind of update post jsrender that is making this icon not accessible for click.

I had the same issue with jsrender and chosen-select. Found a hit in SO that post rendering, I need to udpdate the list with $("#name_of_list").trigger("chosen:updated"); Do I need to do something similar for the table / datatable.

Please note that since django uses the tags {{ }} for rendering, I had to set jsRender to use [% %]

below is my code...

AJAX Call

function ajaxcall(pdata, purl, ptpl, pplh){
  $.ajax({
  type: "GET",
  url: purl,
  data: pdata,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(ldata){
    var ltemplate = $.templates(ptpl);
    var lldata = ltemplate.render(ldata);
    $(pplh).html(lldata);
    console.log(lldata);

jsRender Template

<script id="tpl_userroles" type="text/x-jsrender">
  <tr>
    <td>[%>id%]</td>
    <td>[%>userrolename%]</td>
    <td>[%>defaultrole%]</td>
    <td>[%>bu%]</td>
    <td>[%>sbu%]</td>
    <td>[%>sl%]</td>
    <td>[%>ssl%]</td>
    <td>[%>geo%]</td>
    <td>[%>sgeo%]</td>
    <td>[%>urstatus%]</td>
    <td>[%>startdate%]</td>
    <td>[%>enddate%]</td>
    {% for imodulesaccessur in lmodulesaccessur %}
      {% if imodulesaccessur.updateallowed == 'Y' %}
        <td><a class="plus-link pull-right"><i class="fa fa-pencil text-navy icn_edituserrole" data-toggle="modal" data-target="#mod_edituserrole"></i></a></td>
      {% else %}
        <td></td>
      {% endif %}
    {% endfor %}
  </tr>
</script>
Yeddu
  • 103
  • 4
  • how do you open the modal exactly? – madalinivascu Jun 28 '17 at 05:07
  • Madalin, Modal is opened as below. The modal dialog is opening up. But before opening up the modal dialog, i want to get the user details and populate in the modal so user can edit. – Yeddu Jun 28 '17 at 05:21
  • from what i can see you are using a bootstrap modal , you need to append the data using js to the opened modal – madalinivascu Jun 28 '17 at 05:24
  • Madalin, I am stuck one step before. After jsRendering the table, I se the edit icon in the table and using the below function I want to get the specific user details and then populate the details into the modal using jQuery. But the issue is on click on on the icon nothing happens. $(".icn_edituserrole").click(function(){ alert('Yeddu'); }) – Yeddu Jun 28 '17 at 05:29
  • you may try the following https://stackoverflow.com/a/25060114/4613398 – madalinivascu Jun 28 '17 at 05:31
  • Madalin, my issue is with not being able to fire a function on click of the rendered icon. Modal is the next step. If I hard code the table the click works on the icon. – Yeddu Jun 28 '17 at 10:18

0 Answers0