CODEWITHSUNDEEP
javascriptjqueryhtmlajaxdjango
user2086641
user2086641

Reputation: 4371

call div on link click using ajax

I want to open the div on clicking the link.The link value contains the id of the row of data.I am using ajax to post the data to form.

template.html

<div id="authorisedreporter" {% if not registerform.errors %}style="display:none"{% endif %}>
 <form method="post" action="." id="reporter-form">
 {% csrf_token %}
 <table  width="100%">
 <tr>
   <td style="width:100px;">First name:</td><td>{{registerform.first_name}} </td>
 </tr>
 <tr>
    <td>Last name:</td><td>{{registerform.last_name}} </td>
 </tr>
     ''''''''''''''''
     some data here
     '''''''''''''''
 </table></form></div>

The above div is in hide condition when page load.I want to open the div when the link is clicked.

<td style="width:120px;"><a href="{{ list.0.id }}">{{list.0.first_name|title}} {{list.0.last_name}}</a></td>

Need help.

Upvotes: 0

Views: 2279

Answers (2)

Hieu Nguyen
Hieu Nguyen

Reputation: 8623

Don't use link if it isn't a link, in your case, it's more like <button>:

<td style="width:120px;"><button id="{{ list.0.id }}" class="js-openDiv">{{list.0.first_name|title}} {{list.0.last_name}}</button></td>

Anyway the method is the same, add class class="js-openDiv" to your <a> or <button> and use it as selector in jQuery:

$('.js-openDiv').click(function () {
    var this_id = $(this).attr('id');  // the list ID
    // do something with the ID

    $('#authorisedreporter').show();
});

EDIT:

If you decide to stick with <a> tag:

<td style="width:120px;"><a id="{{ list.0.id }}" class="js-openDiv" href="#">{{list.0.first_name|title}} {{list.0.last_name}}</a></td>

jQuery code would be a bit different:

$('.js-openDiv').click(function (e) {
    e.preventDefault();

    var this_id = $(this).attr('id');  // the list ID
    // do something with the ID

    $('#authorisedreporter').show();
});

Hope it helps

Upvotes: 1

El Amor Zeewon
El Amor Zeewon

Reputation: 108

firstly put href="#" or href="javasctipt:void(0) in your anchor tag and put id in some other attribute of the anchor tag . then the script would be

$(document).ready(function(){
   $('a').click(function(){
      $('#authorisedreporter').show();
   });
});

Upvotes: 1

Related Questions