html - fetching three values i.e RoomNumber,OccupantName and Building as a (list-group)popover format from a web api using jquery and ajax call -
i'm fetching 3 values i.e roomnumber,occupantname , building popover format web api using jquery , ajax problem while i'm fetching records api according roomnumber shows record based on roomnumber when again click button again gives same record.
so question how restrict filtration of data fetched , present in list-group , show record not exists.
i'm here presenting code better clarification:(please me,thank you)
<pre> <form id="form1" runat="server"> <nav id="mynavmenu" class=" bg-primary navmenu navmenu-default navmenu-fixed-left offcanvas myslide" role="navigation" style="background-color: #d9edf7; padding-top:10px;"> <div class="input-group custom-search-form col-lg-12"> <input type="text" class="form-control" id="txtroomno" placeholder="enter room no." /> <span class="input-group-btn"> <button class="btn btn-default" type="button" id="btnssearch"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div><br/> <div class="panel panel-success" id="panelbody"> <div class="panel-heading"> <h3 class="panel-title">room details</h3> </div> <div class="panel-body" style="height: 800px;"> <div class="list-group scroll-area" id="userlist" style="height: 100%"> </div> </div> </div> </nav> <button type="button" class="btn btn-primary" value="click" id="launchbutton" data-toggle="offcanvas" data-target="#mynavmenu" data-canvas="body" style="height:220px; margin-top:300px;"> <span class="glyphicon glyphicon-align-justify"></span> </button> </form> </pre> <script src="scripts/jquery-1.9.1.min.js"></script> <script src="scripts/bootstrap.min.js"></script> <script src="http://jasny.github.io/bootstrap/dist/js/jasny-bootstrap.min.js"></script> <script type="text/javascript"> var isfirst = true; $(document).ready(function () { $("#demo").popover(); $(".scroll-area").scrollspy(); $("#btnssearch").click(function () { if ($("#txtroomno").val().length != 0) { apicall(); } else { $("#userlist .list-group-item").remove(); return false; } }); $("#txtroomno").keydown(function (event) { var keycode = (event.keycode ? event.keycode : event.which); if (keycode == "13") { if ($("#txtroomno").val().length != 0) { apicall(); return false; } else { $("#userlist .list-group-item").remove(); return false; } } }); $("#launchbutton").click(function () { $("#txtroomno").val(""); $("#userlist .list-group-item").remove() }) });//end of document.ready function apicall() { $.ajax({ url: "https://wpsvc5.com/esawebapi/api/entities/getroomnolist", type: "get", //send through method data: { customercode: "018", roomnumber: $("#txtroomno").val() }, success: function (response) { if (response.length == 0) { $("#userlist .list-group-item").remove(); $("#userlist").append('<li class=list-group-item id=nodata style=color:#d44950;font-weight:bold;>no data avaliable !!!</li>'); } else { $("#userlist #nodata").remove(); (var = 0 ; < response.length; i++) { if (response[i].currentoccupant != "") { $("#userlist").append('<a href="#" class=list-group-item active data-toggle="popover" data-trigger="focus" data-html=true style=color:#666666;font-weight:normal;>' + response[i].roomnumber + '<br/>' + response[i].currentoccupant + '<br/>' + response[i].building + '<br/></a>'); } else { $('#userlist').append('<a href="#" class=list-group-item active data-toggle="popover" data-trigger="focus" data-html=true style=color:#666666;font-weight:normal;>' + response[i].roomnumber + '<br/>' + '<b style="color:blue;font-weight:normal">vacant</b>' + '<br/>' + response[i].building + '<br/></a>'); } if (response[i].currentoccupant != "") { if (isfirst==true) { $('[data-toggle="popover"]').popover({ placement: 'bottom', title: "room details", content: response[i].roomnumber + '<br/>' + response[i].currentoccupant + ' <br/> ' + response[i].building }); isfirst = false; } else { $('[data-toggle="popover"]').popover({ placement: 'top', title: "room details", content: response[i].roomnumber + ' <br/> ' + response[i].currentoccupant + ' <br/> ' + response[i].building }); } } if (response[i].currentoccupant == "") { if (isfirst == true) { $('[data-toggle="popover"]').popover({ placement: 'bottom', title: "room details", content: response[i].roomnumber + ' <br/> ' + '<b style="color:blue;font-weight:normal"> vacant </b>' + ' <br/> ' + response[i].building }); isfirst = false; } else { $('[data-toggle="popover"]').popover({ placement: 'top', title: "room details", content: response[i].roomnumber + ' <br/> ' + '<b style="color:blue;font-weight:normal"> vacant </b>' + ' <br/> ' + response[i].building }); } } } } }, error: function (xhr) { alert("error"); } }); } </script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://jasny.github.io/bootstrap/dist/css/jasny-bootstrap.min.css" rel="stylesheet"/> <link href="https://jasny.github.io/bootstrap/examples/navmenu-push/navmenu-push.css" rel="stylesheet" /> <style type="text/css"> .scroll-area { height: 300px; position: relative; overflow: auto; } .popover-title { color: #428bca; text-align: left; } .popover-content { color: black; } </style><body> <form id="form1" runat="server"> <nav id="mynavmenu" class=" bg-primary navmenu navmenu-default navmenu-fixed-left offcanvas myslide" role="navigation" style="background-color: #d9edf7; padding-top:10px;"> <div class="input-group custom-search-form col-lg-12"> <input type="text" class="form-control" id="txtroomno" placeholder="enter room no." /> <span class="input-group-btn"> <button class="btn btn-default" type="button" id="btnssearch"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div><br/> <div class="panel panel-success" id="panelbody"> <div class="panel-heading"> <h3 class="panel-title">room details</h3> </div> <div class="panel-body" style="height: 800px;"> <div class="list-group scroll-area" id="userlist" style="height: 100%"> </div> </div> </div> </nav> <button type="button" class="btn btn-primary" value="click" id="launchbutton" data-toggle="offcanvas" data-target="#mynavmenu" data-canvas="body" style="height:220px; margin-top:300px;"> <span class="glyphicon glyphicon-align-justify"></span> </button> </form> </body>
Comments
Post a Comment