This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title></title> | |
| <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> | |
| <link rel="stylesheet" href="/resources/demos/style.css"> | |
| <script src="/Style%20Library/POC/Scripts/jquery.min.js" type="text/javascript"></script> | |
| <script src="https://code.jquery.com/jquery-1.12.4.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> | |
| <script src="/_layouts/SP.js" temp_src="/_layouts/SP.js" type="text/ecmascript"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script> | |
| <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> | |
| <link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="Stylesheet" type="text/css" /> | |
| <style> | |
| .ms-core-navigation { | |
| DISPLAY: none; | |
| } | |
| #contentBox { | |
| margin-left: 0px; | |
| } | |
| .txttextarea { | |
| width: 600px; | |
| height: 100px; | |
| color: #00008B; | |
| background-color: #E3F2F7; | |
| border: 1px inset #00008B; | |
| } | |
| input { | |
| width: 300px; | |
| color: #00008B; | |
| background-color: #E3F2F7; | |
| border: 1px inset #00008B; | |
| } | |
| .ddlSelect { | |
| max-width: 300px; | |
| color: #00008B; | |
| background-color: #E3F2F7; | |
| border: 1px inset #00008B; | |
| } | |
| .btn { | |
| color: #00008B; | |
| background-color: #ADD8E6; | |
| border: 1px outset #00008B; | |
| } | |
| .lbl { | |
| float: left; | |
| font: bold 0.9em Arial, Helvetica, sans-serif; | |
| } | |
| #readDiv { | |
| padding-left: 5px; | |
| } | |
| </style> | |
| <script> | |
| $(function () { | |
| $("#tabs").tabs(); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="readDiv"> | |
| <table width="100%"> | |
| <tr> | |
| <td class="lbl">RequestType</td> | |
| <td> | |
| <select id="RequestType" class="ddlSelect"> | |
| <option value="0">---------------------Select RequestType---------------------</option> | |
| <option value="Demo1">Demo1</option> | |
| <option value="Demo2">Demo2</option> | |
| <option value="Demo3">Demo3</option> | |
| </select> | |
| </td> | |
| <td class="lbl">SNo</td> | |
| <td><input id="SNo" /></td> | |
| </tr> | |
| <tr><td class="lbl">Country</td><td><select id="country" class="ddlSelect" multiple></select></td><td class="lbl">Discipline</td><td><select id="discipline" class="ddlSelect" multiple></select></td></tr> | |
| <tr> | |
| <td class="lbl">Comments</td> | |
| <td> | |
| <textarea id="txtComments" class="txttextarea"></textarea> | |
| </td> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| <tr><td colspan="4"><button type="button" id="btnload" class="btn">Load all POC</button> </td></tr> | |
| <tr> | |
| <td width="100%" colspan="4"> | |
| <div id="tabs"> | |
| <ul> | |
| <li><a href="#tabs-1">myTab1</a></li> | |
| <li><a href="#tabs-2">myTab2</a></li> | |
| <li><a href="#tabs-3">myTab3</a></li> | |
| <li><a href="#tabs-4">myTab4</a></li> | |
| </ul> | |
| <div id="tabs-1"> | |
| <div id="myTab1Panel"> | |
| <table style="width: 100%;"> | |
| <tr> | |
| <td> | |
| <div id="myTab1Grid" style="width: 100%"></div> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div id="tabs-2"> | |
| <div id="myTab2Panel"> | |
| <table style="width: 100%;"> | |
| <tr> | |
| <td> | |
| <div id="myTab2Grid" style="width: 100%"></div> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div id="tabs-3"> | |
| <div id="StandardsPanel"> | |
| <table style="width: 100%;"> | |
| <tr> | |
| <td> | |
| <div id="myTab3" style="width: 100%"></div> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div id="tabs-4"> | |
| <div id="myTab4Panel"> | |
| <table style="width: 100%;"> | |
| <tr> | |
| <td> | |
| <div id="myTab4Grid" style="width: 100%"></div> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr><td colspan="4"><button type="button" id="btnSubmit" class="btn">Submit</button> </td></tr> | |
| <tr><td colspan="4"> <a href="javascript:printPDF()">Export to PDF</a> </td></tr> | |
| </table> | |
| </div> | |
| </body> | |
| <script> | |
| $(document).ready(function () { | |
| //Load default values-Start | |
| $('#country').append($('<option>', { | |
| value: 0, | |
| text: '---------------------Select Country---------------------' | |
| })); | |
| //Load default values-End | |
| //With out ID | |
| //$().SPServices({ | |
| // operation: "GetListItems", | |
| // async: false, | |
| // listName: "Country", | |
| // CAMLViewFields: "<ViewFields><FieldRef Name='Title'/></ViewFields>", | |
| // completefunc: function (xData, Status) { | |
| // $(xData.responseXML).SPFilterNode("z:row").each(function () { | |
| // var liHtmlbi = "<option><a href='#' title=''>" + $(this).attr("ows_Title") + "</a></option>"; | |
| // $("#country").append(liHtmlbi); | |
| // }); | |
| // } | |
| //}); | |
| //With ID | |
| $().SPServices({ | |
| operation: "GetListItems", | |
| async: false, | |
| listName: "Country", | |
| CAMLViewFields: "<ViewFields><FieldRef Name='ID'/><FieldRef Name='Title'/></ViewFields>", | |
| completefunc: function (xData, Status) { | |
| $(xData.responseXML).SPFilterNode("z:row").each(function () { | |
| var liHtmlbi = "<option value='" + $(this).attr("ows_ID") + "'>" + $(this).attr("ows_Title") + "</option>"; | |
| $("#country").append(liHtmlbi); | |
| }); | |
| } | |
| }); | |
| $("#btnSubmit").click(function () { | |
| var title = $('#country :selected').text(); | |
| var RequestType = $("#RequestType").val(); | |
| var SNo = $("#SNo").val(); | |
| var country = $("#country").val(); | |
| var comments = $("#txtComments").val(); | |
| AddItemtolist(title, RequestType, SNo, country, comments); | |
| }); | |
| function AddItemtolist(title, RequestType, SNo, country, comments) { | |
| $().SPServices({ | |
| operation: "UpdateListItems", | |
| async: false, | |
| batchCmd: "New", | |
| listName: "AllPOCReq", | |
| valuepairs: [["Title", title], ["RequestType", RequestType], ["SNo", SNo], ["Country", country], ["Comments", comments]], | |
| completefunc: function (xData, Status) { | |
| if (Status.toLowerCase() == "success") { | |
| window.location.replace("../Lists/AllPOCReq/AllItems.aspx"); | |
| //alert("New POC request has added."); | |
| } else { | |
| alert("Something went wrong!"); | |
| } | |
| } | |
| }); | |
| } | |
| $("#btnload").click(function () { | |
| //validation-start | |
| var ddlcountry = $("#country").val(); | |
| if (ddlcountry == null && ddlcountry == undefined) { | |
| //If the "Please Select" option is selected display error. | |
| alert("Please select country!"); | |
| } else { | |
| loadRelatedPOC(); | |
| } | |
| //Validation-end | |
| }); | |
| function loadRelatedPOC() { | |
| //load tabs-start | |
| //myTab1Grid-start | |
| var RestUrl = "../_vti_bin/listdata.svc/All_myTab1"; | |
| $.ajax({ | |
| url: RestUrl, | |
| method: "GET", | |
| headers: { | |
| "accept": "application/json;odata=verbose", | |
| }, | |
| success: function (data) { | |
| if (data.d.results.length > 0) { | |
| //construct HTML Table from the JSON Data | |
| if ($('#myTab1Grid')) { | |
| $('#myTab1Grid').empty(); | |
| $('#myTab1Grid').append(GeneratemyTab1TableFromJson(data.d.results)); | |
| } else { | |
| $('#myTab1Grid').append(GeneratemyTab1TableFromJson(data.d.results)); | |
| } | |
| //Bind the HTML data with Jquery DataTable | |
| var oTable = $('#myTab1RecordsTable').dataTable({ | |
| "iDisplayLength": 5, | |
| "aLengthMenu": [ | |
| [5, 10, 30, 50], | |
| [5, 10, 30, 50] | |
| ], | |
| "sPaginationType": "full_numbers" | |
| }); | |
| } else { | |
| $('#myTab1Grid').append("<span>No myTab1 Records Found.</span>"); | |
| } | |
| }, | |
| error: function (data) { | |
| $('#myTab1Grid').append("<span>Error Retreiving myTab1 Records. Error : " + JSON.stringify(data) + "</span>"); | |
| } | |
| }); | |
| function GeneratemyTab1TableFromJson(objArray) { | |
| var tableContent = '<table id="myTab1RecordsTable" style="width:100%"><thead><tr><td> ?</td>' + '<td>Title</td>' + '<td>State</td>' + '<td>Comments</td>' + '</tr></thead><tbody>'; | |
| for (var i = 0; i < objArray.length; i++) { | |
| tableContent += '<tr>'; | |
| tableContent += '<td>' + objArray[i].Id + '</td>'; | |
| tableContent += '<td>' + objArray[i].Title + '</td>'; | |
| tableContent += '<td>' + objArray[i].State + '</td>'; | |
| tableContent += '<td>' + objArray[i].Comments + '</td>'; | |
| tableContent += '</tr>'; | |
| } | |
| return tableContent; | |
| } | |
| //myTab1Grid-end | |
| //myTab2Grid-start | |
| var RestUrl = "../_vti_bin/listdata.svc/All_myTab2"; | |
| $.ajax({ | |
| url: RestUrl, | |
| method: "GET", | |
| headers: { | |
| "accept": "application/json;odata=verbose", | |
| }, | |
| success: function (data) { | |
| if (data.d.results.length > 0) { | |
| //construct HTML Table from the JSON Data | |
| if ($('#myTab2Grid')) { | |
| $('#myTab2Grid').empty(); | |
| $('#myTab2Grid').append(GeneratemyTab2TableFromJson(data.d.results)); | |
| } else { | |
| $('#myTab2Grid').append(GeneratemyTab2TableFromJson(data.d.results)); | |
| } | |
| //Bind the HTML data with Jquery DataTable | |
| var oTable = $('#myTab2RecordsTable').dataTable({ | |
| "iDisplayLength": 5, | |
| "aLengthMenu": [ | |
| [5, 10, 30, 50], | |
| [5, 10, 30, 50] | |
| ], | |
| "sPaginationType": "full_numbers" | |
| }); | |
| } else { | |
| $('#myTab2Grid').append("<span>No myTab2 Records Found.</span>"); | |
| } | |
| }, | |
| error: function (data) { | |
| $('#myTab2Grid').append("<span>Error Retreiving myTab2 Records. Error : " + JSON.stringify(data) + "</span>"); | |
| } | |
| }); | |
| function GeneratemyTab2TableFromJson(objArray) { | |
| var tableContent = '<table id="myTab2RecordsTable" style="width:100%"><thead><tr><td> ?</td>' + '<td>Title</td>' + '<td>Symbol Picture</td>' + '<td>Symbol Name</td>' + '<td>Comments</td>' + '<td>State</td>' + '</tr></thead><tbody>'; | |
| for (var i = 0; i < objArray.length; i++) { | |
| tableContent += '<tr>'; | |
| tableContent += '<td>' + objArray[i].Id + '</td>'; | |
| tableContent += '<td>' + objArray[i].Title + '</td>'; | |
| if (objArray[i].myPicture != null && objArray[i].myPicture != undefined) { | |
| tableContent += '<td><img style="width:100px;height:100px" src=' + objArray[i].myPicture.split(",")[0] + '></img></td>'; | |
| } else { | |
| tableContent += '<td><img style="width:100px;height:100px" src=' + objArray[i].myPicture + '></img></td>'; | |
| } | |
| tableContent += '<td>' + objArray[i].SymbolName + '</td>'; | |
| tableContent += '<td>' + objArray[i].Comments + '</td>'; | |
| tableContent += '<td>' + objArray[i].State + '</td>'; | |
| tableContent += '</tr>'; | |
| } | |
| return tableContent; | |
| } | |
| //myTab2Grid-end | |
| //myTab3-start | |
| var RestUrl = "../_vti_bin/listdata.svc/All_myTab3"; | |
| $.ajax({ | |
| url: RestUrl, | |
| method: "GET", | |
| headers: { | |
| "accept": "application/json;odata=verbose", | |
| }, | |
| success: function (data) { | |
| if (data.d.results.length > 0) { | |
| //construct HTML Table from the JSON Data | |
| if ($('#myTab3')) { | |
| $('#myTab3').empty(); | |
| $('#myTab3').append(GenerateStandardsTableFromJson(data.d.results)); | |
| } else { | |
| $('#myTab3').append(GenerateStandardsTableFromJson(data.d.results)); | |
| } | |
| //Bind the HTML data with Jquery DataTable | |
| var oTable = $('#myTab3RecordsTable').dataTable({ | |
| "iDisplayLength": 5, | |
| "aLengthMenu": [ | |
| [5, 10, 30, 50], | |
| [5, 10, 30, 50] | |
| ], | |
| "sPaginationType": "full_numbers" | |
| }); | |
| } else { | |
| $('#myTab3').append("<span>No Standards Records Found.</span>"); | |
| } | |
| }, | |
| error: function (data) { | |
| $('#myTab3').append("<span>Error Retreiving Standards Records. Error : " + JSON.stringify(data) + "</span>"); | |
| } | |
| }); | |
| function GenerateStandardsTableFromJson(objArray) { | |
| var tableContent = '<table id="myTab3RecordsTable" style="width:100%"><thead><tr><td> ?</td>' + '<td>Title</td>'; | |
| for (var i = 0; i < objArray.length; i++) { | |
| tableContent += '<tr>'; | |
| tableContent += '<td>' + objArray[i].Id + '</td>'; | |
| tableContent += '<td>' + objArray[i].Title + '</td>'; | |
| tableContent += '</tr>'; | |
| } | |
| return tableContent; | |
| } | |
| //myTab3-end | |
| //load tabds-end | |
| } | |
| }); | |
| </script> | |
| <script> | |
| function printPDF() { | |
| if (!window.print) { | |
| alert("You need NS4.x to use this print button!") | |
| return | |
| } | |
| window.print() | |
| } | |
| </script> | |
| </html> |
