jquery ui dialog does not expect confirmation

Question

I’m wearing a ListView to generate buttons according to the IdPassoWorkflow, and show on the screen the buttons as per image below.

When clicked, I open one dialog for the user confirms the action, the issue is that the dialog does not wait for the user’s confirmation and already calls the method lnkGravar_Click.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
  CodeBehind="WebForm1.aspx.cs" Inherits="SistemasRohr.Formulario.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <style type="text/css">
    div#dialog
    {
      display: none;
    }
  </style>
  <script type="text/javascript">  

  var PassoWorkflow = parseInt(<% =vsIdPassoWorkflow %>);
  function CheckConfirm(IdPassoWorkflow) {
    if (IdPassoWorkflow == 2) {
      jQuery(function() {
          jQuery("#EncaminharGestor").dialog({
           resizable: false,
          height:140,
          modal: true,
          buttons: {
            "Sim": function() {
              $( this ).dialog( "close" );
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          }
          });
        });

        jQuery(function() {
            jQuery("#EncaminharGestor").dialog("open");
          });
      //return confirm("Encaminhar para o Gestor?");
    }
  }
  </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
  <div id="dialog">
    <div class="ui-dialog" id="dialogMes" title="Mensagem">
      <p>
        Mês <b>De</b> maior que <b>Até</b></p>
    </div>
    <div class="ui-dialog" id="EncaminharGestor" title="Mensagem">
      <p>
        Encaminhar para o Gestor</p>
    </div>
    <div class="ui-dialog" id="dialogDigiteNValido" title="Mensagem">
      <p>
        Digite um número valido</p>
    </div>
  </div>
  <asp:Panel ID="panFormulario" runat="server">
    <table class="Formulario">
      <tr>
        <td class="Button" colspan="2">
          <asp:ListView ID="lvBotoes" runat="server">
            <ItemTemplate>
              <asp:LinkButton ID="lnkGravar" OnClick="lnkGravar_Click" runat="server" CssClass="ui-button-icon-primary"
                OnClientClick='<%#Eval("IdPassoWorkflow","javascript:return CheckConfirm({0}) ;"  )%>'
                CommandArgument='<%# Eval("IdPassoWorkflow") %>'>

                <%# TextoBotao(Container.DataItem) %></asp:LinkButton>
            </ItemTemplate>
          </asp:ListView>
        </td>
      </tr>
    </table>
  </asp:Panel>
  <asp:Label ID="Label1" runat="server"></asp:Label>
</asp:Content>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WLib.Classes;
using WApp.Classes;

namespace SistemasRohr.Formulario
{
    public partial class WebForm1 : PageBase
    {
       public Int32 vsIdPassoWorkflow = 2;

        protected void Page_Load(object sender, EventArgs e)
        {
            List<PassosWorkflow> passos = new List<PassosWorkflow>();

            PassosWorkflow passo1 = new PassosWorkflow()
            {
                IdPassoWorkflow = 1,
                InstrucaoPasso = "Salvar",
            };

            PassosWorkflow passo2 = new PassosWorkflow()
            {
                IdPassoWorkflow = 2,
                InstrucaoPasso = "Enviar Gestor",
            };

            PassosWorkflow passo3 = new PassosWorkflow()
            {
                IdPassoWorkflow = 3,
                InstrucaoPasso = "Aprovar",
            };
            passos.Add(passo1);
            passos.Add(passo2);
            passos.Add(passo3);



            lvBotoes.DataSource = passos;
            lvBotoes.DataBind();

        }

        public String TextoBotao(object o)
        {
            var Passo = o as PassosWorkflow;
            if (Passo == null)
                return String.Empty;

            return Passo.InstrucaoPasso;
        }

        protected void lnkGravar_Click(object sender, EventArgs e)
        {
            Label1.Text = "chamou lnkGravar_Click";
        }
    }

    public class PassosWorkflow
    {
        public Int32 IdPassoWorkflow { get; set; }
        public string InstrucaoPasso { get; set; }
    }
}

rendered html of buttons.

<td class="Button" colspan="2">          
    <a onclick="javascript:return CheckConfirm(1) ;" id="BodyContent_lvBotoes_lnkGravar_0" class="ui-button-icon-primarye" href="javascript:__doPostBack('ctl00$BodyContent$lvBotoes$ctrl0$lnkGravar','')">Salvar</a>
    <a onclick="javascript:return CheckConfirm(2) ;" id="BodyContent_lvBotoes_lnkGravar_1" class="ui-button-icon-primarye" href="javascript:__doPostBack('ctl00$BodyContent$lvBotoes$ctrl1$lnkGravar','')">Enviar Gestor</a>
    <a onclick="javascript:return CheckConfirm(3) ;" id="BodyContent_lvBotoes_lnkGravar_2" class="ui-button-icon-primarye" href="javascript:__doPostBack('ctl00$BodyContent$lvBotoes$ctrl2$lnkGravar','')">Aprovar</a>
</td>

Answer 1

Marconcilio, you need to cancel the default click behavior, either with a return false or a event.preventDefault, this way postBack will not be executed.

Then in the Sim of dialog you can do postBack manually.for such you can use the method __doPostBack.

var PassoWorkflow = parseInt(<% =vsIdPassoWorkflow %>);
var lnkGravar = "<%= this.lnkGravar.ClientID %>";
function CheckConfirm(IdPassoWorkflow) {
    if (IdPassoWorkflow == 2) {
        var dialog = jQuery("#EncaminharGestor").dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Sim": function() {
                    $( this ).dialog( "close" );
                    __doPostBack(lnkGravar, '');
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

        dialog.dialog("open");
        return false;
    }
}