I want to redirect to link on only after confimation?

Question

I had a problem and I am struggling. I want to redirect to the link href="/jobs/emp/del/?id={{ job.pk }}" after confirmation. I am using bootboxjs

{% for job in jobs %}
<a class="btn deleteJob" href="/jobs/emp/del/?id={{ job.pk }}"</a> 
{% for job in jobs %}

How can I require confirmation before executing the link /jobs/emp/del/?id={{ job.pk }}?

I tried:

<a class="btn deleteJob"><span style="display:none">/jobs/emp/del/?id={{ job.pk }}</span>
                            <i class="icon-trash"></i></a>
<script src="/static/js/bootbox.js" type="text/javascript"></script>
<script>

$('.deleteJob').click(function(){
    bootbox.confirm("Are you Sure want to delete!", function (x) {
    if (x){

        var link= $(this).find( $spans ).text();            
        document.location.href='/'+link+'/';}
    });        
});
</script>

is inside a big for loop, but it is not working!?

score 7 · Accepted Answer · answered Jun 27 '13 at 10:28

7

I've not used bootbox, but assuming the x value in the function is the boolean result of the popup, this should work:

<a href="/jobs/emp/del/?id={{ job.pk }}" class="btn deleteJob">
    <i class="icon-trash"></i>
</a>

$('.deleteJob').click(function(e) {
    e.preventDefault();
    var $link = $(this);
    bootbox.confirm("Are you Sure want to delete!", function (confirmation) {
        confirmation && document.location.assign($link.attr('href'));
    });        
});

Note, you mention a for loop - the jQuery code there does not need to be in a loop. That code will work for all instances of the .deleteJob anchor element.

answered Jun 27 '13 at 10:28

Rory McCrossan

331,213
40
305
339

Here's an updated [fiddle](http://jsfiddle.net/kw3nH/2/) showing my working example. – Rory McCrossan Jun 27 '13 at 10:33
thanks this worked. i spend more than two hours. now i got it in minuites. thanks – suhailvs Jun 27 '13 at 10:38

score 3 · Answer 2 · answered Jun 27 '13 at 10:27

You can use preventDefault() to stop the redirect;

$('.deleteJob').click(function(e) {
    e.preventDefault();
    if(confirm("Are you Sure want to delete!")) {
        var link= $(this).find( $spans ).text();            
        document.location.href='/'+link+'/';}
    }
});

I'm not sure about bootbox so this is a jQuery only solution

score 0 · Answer 3 · answered Jun 27 '13 at 10:31

<script>

  $('.deleteJob')each(function(){
   var href = $(this).attr("href");
   $(this).click(function(){
   if(confirm("Are you sure you want to delete this job ?"))
   {
       document.location.href='/'+href+'/';}
   }

   });

  });
</script>

maybe this could work if you don't mind using the normal confirm window from the browser.

score 0 · Answer 4 · edited May 23 '17 at 11:46

Is it working if you are using it outside of a loop? The problem looks like you are running into javascript closures problem, which basically means that functions assigned in loops will be overwritten the next time the loop is executed and thus the function onclick would be binded only on the last DOM that was parsed to it in the loop. In order to work around that move the onclick assignment to an external function that is called on every iteration of the loop (you probably need to parse.

Also is this valid jquery identifier?: $spans

Read about closures here.

score 0 · Answer 5 · answered Jun 16 '16 at 06:01

You must prevent the default action on a if result of confirm function is false

$(document).ready(function () {
    $(".deleteJob").on("click", function (e) {
        if (!confirm("Are you Sure want to delete!")) {
            e.preventDefault();
        }
    });
});

I want to redirect to link on only after confimation?

5 Answers5