Last active
September 14, 2016 05:03
-
-
Save Microsofttechies/486962a1c0d1e56da4b3cd0c78a92a5a to your computer and use it in GitHub Desktop.
SharePoint 2013 Tabs
This file contains hidden or 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment