jQuery preventDefault() is not working

Question

I created a function and it's called every time dynamically created ImageButton is clicked. But the precenDefault() is not working. The function is working except the prevent default.

jQuery

<script type="text/javascript">
    function EmpDelete(event, id) {
        event.preventDefault();
        $("#bName").text(id);        
        $('#dialog').dialog({            
            title: "Delete Employee?",
            modal: true,
            width: 500,
            height: 250,
            buttons: {
                "Cancel": function () {
                    $(this).dialog("close");
                    return false;
                },
                "Continue": function () {
                    $(this).dialog("close");
                    return true;
                }
            }
        });        
    };    
</script>

ASPX.CS

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
        e.Row.Cells[iDelete].Controls.Add
            (new ImageButton
            {
                ImageUrl = "Images/database_delete.png",
                CommandArgument = e.Row.RowIndex.ToString(),
                CommandName = "Delete",
                ID = "imgDelete",
                CssClass = "imgDelete",
                OnClientClick = "return EmpDelete(" + e.Row.Cells[iFNmae].Text + ");"
            });
    }
}

Answer 1

I solved it by using __doPostBack(uniqueID, ''); on the jQuery "Continue" button and

On the Page_Load() Event I added

 if (!Page.IsPostBack)
    {
        ClientScript.GetPostBackEventReference(gvEmployee, string.Empty);
    }

And I called the jQuery Dialog on Gridview_RowDataBound event

e.Row.Cells[iDelete].Controls.Add
            (new ImageButton
            {
                ImageUrl = "Images/database_delete.png",
                CommandArgument = e.Row.RowIndex.ToString(),
                CommandName = "Delete",
                ID = "imgEmpDelete" + e.Row.Cells[iID].Text,
                **OnClientClick = "javascript:return rowAction(this.name)",**
                ClientIDMode = System.Web.UI.ClientIDMode.Static
            });

Hope it helps anyone.

Answer 2

The event needs to be passed to the function. The function expects two parameters, yet its only being passed one.

 OnClientClick = "return EmpDelete(e," + e.Row.Cells[iFNmae].Text + ");"

Full Source

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
        e.Row.Cells[iDelete].Controls.Add
            (new ImageButton
            {
                ImageUrl = "Images/database_delete.png",
                CommandArgument = e.Row.RowIndex.ToString(),
                CommandName = "Delete",
                ID = "imgDelete",
                CssClass = "imgDelete",
                OnClientClick = "return EmpDelete(e" + e.Row.Cells[iFNmae].Text + ");"
            });
    }
}

Answer 3

First error is that you can not call the preventDefault from that function that way. The way you have set up the call, is better to return false at the end of the call so the click will only open the dialog and not continue;

Now the buttons OK and Cancel will run after that functions have already return to the ImageButton, because the dialog just opens and return - is not wait for the buttons to return.

<script type="text/javascript">
    function EmpDelete(event, id) 
    {
        // this is not correct because you do not have the event for preventDefault
        // event.preventDefault();
        $("#bName").text(id);        
        $('#dialog').dialog({            
            title: "Delete Employee?",
            modal: true,
            width: 500,
            height: 250,
            // that buttons here will not work as you belive !
            // they are not return and let the post back occurs after the event.
            buttons: {
                "Cancel": function () {
                    $(this).dialog("close");
                    return false;
                },
                "Continue": function () {
                    $(this).dialog("close");
                    return true;
                }
            }
        });        
      // you need to return here false.
      return false;
    };    
</script>

The solution here is to save the post back click, and use it on dialog close.

It is even better and really easy just return the confirm

OnClientClick = "return confirm('are you sure to delete this employee ?')'

and even a better way is to attract that confirm on using the class of the control, and not add it on code behind.