CODEWITHSUNDEEP
javascriptc#htmlwebforms
Arek Wiśniewski
Arek Wiśniewski

Reputation: 73

Submit button does not work within popup window

I have a form within popup window something like that:

<div id="dialog" title="Rezerwacja">
      
        <asp:TextBox ID="imieTextBox" runat="server" placeholder="Imię"></asp:TextBox>
        <asp:TextBox ID="nazwiskoTextBox" runat="server" placeholder="Nazwisko"></asp:TextBox>
        <asp:TextBox ID="emailTextBox" runat="server" TextMode="Email" placeholder="Email"></asp:TextBox>
        <asp:TextBox ID="telefonKomorkowyTextBox" runat="server" TextMode="Phone" placeholder="Telefon kom."></asp:TextBox>
        <div id="plansza"></div>
        <asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
        
       
   </div>

And JavaScript:

$(document).ready( function() {
  $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
          effect: "puff",
          duration: 1000
      },
      hide: {
          effect: "explode",
          duration: 1000
      }
  });

  $( ".opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
  });
});

So I have to behind code:

protected void rezerwujButton_Click(object sender, EventArgs e)
    {
        rezerwacje nowaRezerwacja = new rezerwacje();

        nowaRezerwacja.imie_klienta = imieTextBox.Text;
        nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
        nowaRezerwacja.email_klienta = emailTextBox.Text;
        nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;

        bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
        bazaDC.SubmitChanges();
    }

And there is the problem, submit button "rezerwujButton" does not work. It look like a unclickable or something like that... I'm clicking on it and nothing do... Not refresh page or anything... When I going to use that form without popup window, It work but within popup not. I tried to set usesubmitbehavior="false" but when I did it, button worked, send something but every field was blank... I mean when i tried to get something like that: imieTextBox.Text It will be blank... Always... Any ideas?

@edit

I don't know what Do I do wrong? Always a fields from form is blank...

Anybody can tell me how can I use correct this __PostBack? Because I have to do something wrong...

I added to button UseSubmitBehavior="fase" and in function PageLoad I got something like that:

   if (Page.IsPostBack)
        {
          
                rezerwacje nowaRezerwacja = new rezerwacje();

                nowaRezerwacja.imie_klienta = imieTextBox.Text;
                nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
                nowaRezerwacja.email_klienta = emailTextBox.Text;
                nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;

                bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
                bazaDC.SubmitChanges();
           
        }

For example imieTextBox.Text is always blank... I don't know why...?

edit

Im done. I change the way to get modal window. I used popup window which not moving modal div anywhere and It working.

Upvotes: 1

Views: 1388

Answers (2)

Igor
Igor

Reputation: 15893

The reason of the "nothing happens" behaviour is the fact that jQuery-UI dialog widget moves the DOM-element, which is converted to a dialog (in your case - $("#dialog")), to body. After this, the submit button is not inside a form tag anymore, and clicking it does not cause any submission.

It will still work if the whole form is inside the dialog content:

<div id="dialog" title="Rezerwacja">
  <form ...>
    ...
    <asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
  </form>
</div>

Upvotes: 1

mrogal.ski
mrogal.ski

Reputation: 5930

You can try putting your rezerwujButton_Click method into PageMethods

[ScriptMethod, WebMethod]
public string RezerwujCall() {
    // logic here
    return "ok";
}

Then in your js:

<script type="text/javascript">
      function rezerwuj_clicked() {
          PageMethods.RezerwujCall(function (response) { if(response == "ok"){} }, function(response){ console.log("failed"); });
      }
</script>

This will require to change OnClick="rezerwujButton_Click" into OnClientClick="rezerwuj_clicked()"

Upvotes: 0

Related Questions