CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.js
Nagri
Nagri

Reputation: 3136

how to make JS wait for confirmation modal

This might be really stupid but I am not seeing anything straight here, help me out please.

so their is this guy :

<a href="javascript:void(0);" class="font-red" data-bind="text:block() ,visible: ((postUserId != AS.currentUser) && (block() == 'Block')),attr:{post: postId}, click:changeBlock"></a>

As you can see upon click the function changeBlock is called

this.changeBlock = function() {
    var flag = confirm("You sure you want to block this user ?");

        if(flag){
            blockUser(this.postId);
            if(this.block() != ""){
                this.block("Blocked");
                this.pointId(AS.currentUserDetails.name);
                return "Blocked";}
            }
    }

and somewhere lie the function blockUser

function blockUser(post_id) {
            var blockUser = AS.baseUrl + "blockNewUser";
            $.ajax({
                url:blockUser,
                type:"POST",
                data:{postId : post_id},
                success:function(data) {
                    // `request` seems a very strange name; perhaps `data` or `response`?
                },
                error: function(){
                    // You can't use `document.write` after the page has been parsed
                }
            });

    }

My problem is that I cant use confirm() for confirming block or cancel. I will have to use a html modal which is used through out the website.

If at some point of the execution I add 

$('#my-modal').modal('show');

then though the modal appears but rest of the execution takes place without waiting for me to select yes or no. And if by some magic I manage to make JS wait for selection, How will I know what was selected ?
what should I do ?
I cannot use any third party modals.

here is the modal I want to use :

<div id="block-confirm-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <div class="clearfix side-space">
                    <h3 class="modal-title text-center">Are you sure you want to Block this user ?</h3>
                </div>
                <form id="form-block-confirm" name="" method="post" action="" class="form-horizontal">
                    <div class="clearfix side-space">
                        <div class="clearix text-center">
                            <button type="submit" class="btn btn-saffron btn-introduce" id='block-confirm-button'>Block</button>
                            <button type="submit" class="btn btn-saffron btn-introduce" id='block-cancel-button'>Cancel</button>
                            <!--input type="submit" name="submit" class="btn btn-saffron btn-introduce" value="Post"-->
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 2365

Answers (1)

super cool
super cool

Reputation: 6045

you should be doing something like this in such situations .

In View Model:

    this.changeBlock = function() {
    $('#my-modal').modal('show');
    }

    function blockUser(post_id) {
    //code here
    }        

    this.Block=function(){
    blockUser(this.postId);
        if(this.block() != ""){
         this.block("Blocked");
         this.pointId(AS.currentUserDetails.name);
           return "Blocked";}
          }
    }


    this.Cancel=function(){
     $('#my-modal').modal('hide'); //hide or close what ever suits
    }

View :

<button  id='block-confirm-button' data-bind="click:Blocked">Block</button>
<button  id='block-cancel-button' data-bind="click:Cancel">Cancel</button>

Any issues on this lets us know

Upvotes: 1

Related Questions