jquery - Displaying POST response in Dialog -
hello i'm creating webpage test api , i'm sending form nodejs backend , backend return json response me. far sending request works fine , can see request lands on vps console, want create feedback on webpage well. how can create alert contains information response json? above code:
<html> <head> <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons"> </head> <body> <!-- shows header, in smaller screens. --> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- title --> <span class="mdl-layout-title">title</span> <!-- add spacer, align navigation right --> <div class="mdl-layout-spacer"></div> <!-- navigation. hide in small screens. --> <nav class="mdl-navigation mdl-layout--large-screen-only"> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"> <form action="#"> <center><p> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="email"> <label class="mdl-textfield__label" for="email">email...</label> </div></p> <p><div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="password" id="password"> <label class="mdl-textfield__label" for="password">password...</label> </div></p> <p><div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="username"> <label class="mdl-textfield__label" for="username">username...</label> </div></p> <p><div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="name"> <label class="mdl-textfield__label" for="name">name...</label> </div></p> <p><div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="surname"> <label class="mdl-textfield__label" for="surname">surname...</label> </div></p> <p> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="sex"> <label class="mdl-textfield__label" for="sex">sex...</label> </div></p> <p> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="age"> <label class="mdl-textfield__label" for="age">age...</label> </div></p> <p><div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="school"> <label class="mdl-textfield__label" for="school">school...</label> </div></p> <p> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="bio"> <label class="mdl-textfield__label" for="bio">bio...</label> </div></p> <p><button onclick="register()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" > sign up! </button></p> <p><span id="msg-reg">result:</span></p> <script type="text/javascript"> var register = function() { var email = $("#email").val(), password = $("#password").val(), username = $("#username").val(), name = $("#name").val(), surname = $("#surname").val(), sex = $("#sex").val(), age = $("#age").val(), school = $("#school").val(), bio = $("#bio").val(); $.ajax({ url: 'http://158.129.31.201:8000/newuser', type: 'post', data: {email: email, password: password, username:username, name:name, surname:surname, sex:sex, age:age, school:school, bio:bio, point:{type:"point", coordinates: [12.123456, 13.134578]}, type: 'register'} }).then(function(data) { $("#msg-reg").text(data); }); }; </script> </center> </form> </div> </main> </div> </body> </html>
$(function() { $( "#btnopenmyaspx" ).button().click(function() { $( "#divforaspxpage" ).dialog({ autoopen: true, height: 500, width: 650, modal: true, close:function(){ $(this).dialog('destroy'); } }); $.get("/newpage.aspx",function(data){ $( "#divforaspxpage" ).html(data); }); }); });
this trick used load pages in dialogs, can same way need, see more here http://bresleveloper.blogspot.co.il/2012/05/jquery-modal-dialog-with-aspx-page.html
Comments
Post a Comment