Modal de retour résultat

**Pelote2012** · 01/02/2013, 12h27

Bonjour,

Toujours dans ma lancée, d'apprentissage jquery...
J'ai un formulaire avec un bouton qui appel une webmethod qui me renvoie si ça marche ou pas (simulé si ma liste contient un nombre d'élément paire ou pas)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ModalResult.aspx.vb" Inherits="Jquery.ModalResult" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="script/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="script/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
    <link href="CSS/ui-lightness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#MsgBack").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }
            });
 
            $("#Valider").click(
            function () {
                var name = $("#<%= txtName.ClientID  %>").val();
                var surname = $("#<%= txtSurname.ClientID %>").val();
                var age = $("#<%= txtAge.ClientID %>").val();
 
                $.ajax({
                    type: "POST",
                    url: "ModalResult.aspx/AddNewItem",
                    data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        if (msg.d == true) {
                            $("#Errortitre").html("<font color=green><I>Mise à jour effectuées.</I></font>");
                            $("#MsgBack").dialog("open");
                        }
                        else {
                            $("#Errortitre").html("<font color=red><I>Erreur.</I></font>");
                            $("#MsgBack").dialog("open");
                        }
                    },
                    error: function () {
                        alert("Error! Try again...");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="MsgBack" title="Download complete">
            <div class='subcontent-box' id='Errortitre'>
            </div>
        </div>
        <table>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Surname
                </td>
                <td>
                    <asp:TextBox ID="txtSurname" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Age
                </td>
                <td>
                    <asp:TextBox ID="txtAge" runat="server" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button id="Valider" >
                        Valider</button>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
Public Class ModalResult
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
    End Sub
 
    <Services.WebMethod()> _
    Public Shared Function AddNewItem(ByVal name As String, ByVal surname As String, ByVal age As Integer) As Boolean
        Try
            Static persons As List(Of Person)
 
            If persons Is Nothing Then persons = New List(Of Person)
            Dim Person = New Person()
            Person.Name = name
            Person.Surname = surname
            Person.Age = age
 
            persons.Add(Person)
 
            Return ((persons.Count Mod 2) = 0)
 
        Catch ex As Exception
            Return False
        End Try
 
    End Function
 
End Class

Sous fire bug, je ne vois pas le résultat comme si (et je le pense) ma page est rechargée.

Y a-t-il moyen de lui dire de ne pas recharger la page, où bien faut-il passer par un lien (qu'on déguise en bouton pas une css)
Je n'ai pas d'idée sur la good pratice dans ce cas

**Pelote2012** · 01/02/2013, 14h11

en cherchant sur un autre theme j'ai trouvé

en fait il faut mettre return false; sur le clic du bouton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 $("#Valider").click(
    function () {
        var name = $("#<%= txtName.ClientID  %>").val();
        var surname = $("#<%= txtSurname.ClientID %>").val();
        var age = $("#<%= txtAge.ClientID %>").val();
         $.ajax({
            type: "POST",
            url: "ModalResult.aspx/AddNewItem",
            data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d == true) {
                    $("#Errortitre").html("<font color=green><I>Mise à jour effectuées.</I></font>");
                    $("#MsgBack").dialog("open");
                }
                else {
                    $("#Errortitre").html("<font color=red><I>Erreur.</I></font>");
                    $("#MsgBack").dialog("open");
                }
            },
            error: function () {
                alert("Error! Try again...");
            }
        });
        return false;
    });

Modal de retour résultat [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager