[Answered ]-Django bootstrap to have both call a view and modal in same anchor tag

by

1👍

✅

For the closure of the above issue did the following changes:

in the template, moved the modal code to separate html template:

<li class="">
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog">
               <div class="modal-content"></div>
         </div>
     </div>
     <a data-toggle="modal" href="{% url 'update-field' %}" data-target="#myModal">
           <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>&nbsp; Update-Fields
     </a>
 </li>

<!-- modal.html -->

<!-- Modal -->
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">{{ title }}</h4>
</div>
<div class="modal-body">
    <p>{{ body }}</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

<script>
   $('#myModal').on('hidden.bs.modal', function () {
       location.reload();});     // reloads the current page
</script>

# views.py

class UpdateFields(UpdateView):
    def get(self, request):
        updateparams.delay()
        context = {
            'title': 'Initiating task...',
            'body': 'Field parameters update has started. An email will be sent when its complete.'
        }
        return render(request, 'app/modal.html', context)

# urls.py

url(r'^update/', views.UpdateFields.as_view(), name='update-field')
👤starFire

1👍

Using javascript/JQuery, you can trigger both events on click of the <a> tag.
Use the following to trigger the modal through JS.

$(modalid).modal("show");

First im adding an id to refer to the <a> tag easily in JS and removing the data-toggle="modal", because we will trigger the modal through JS. So the <a> becomes : 

<a id="triggerEvents" href="{% url 'update-field' %}" data-target="#myModal">

In your javascript file add the following.

$("#triggerEvents").on("click", function(ev){
  ev.preventDefault();
  var modalid = $(this).data("target");
  var url = $(this).attr("href");

  $(modalid).modal("show"); // Triggering bootstrap modal.

  // Do the asynchronous part here.
});

Maybe Celery is causing some issues. You can also use jquery.ajax() to run asynchronous requests.

Documentation on Bootstrap Modals.

👤Rithwik

Leave a comment