Created
June 15, 2017 21:51
-
-
Save dperussina/853e3753776266e3715fd3935cc18bed to your computer and use it in GitHub Desktop.
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
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <h3>Example of how to call http://ms1.agentgrid.net/api/tagnet/service_levelsByPartnerID </h3> | |
| <br> | |
| <select name="SPNOrderDetails1$listServiceLevel" id="SPNOrderDetails1_listServiceLevel"> | |
| <option value="Basic 1">Basic 1</option> | |
| <option value="Basic 2">Basic 2</option> | |
| <option value="Cross Dock">Cross Dock</option> | |
| <option value="Outside">Outside</option> | |
| <option value="Premier">Premier</option> | |
| <option selected="selected" value="Room of Choice">Room of Choice</option> | |
| <option value="Swap Out">Swap Out</option> | |
| <option value="Threshold">Threshold</option> | |
| <option value="Unattended">Unattended</option> | |
| <option value="White Glove">White Glove</option> | |
| <option value="White Glove Assembly">White Glove Assembly</option> | |
| <option value="Will Call">Will Call</option> | |
| </select> | |
| <p>Description: <span id="fill_description_here">Description Text</span></p> | |
| </body> | |
| <script src="javascripts/jquery.min.js"></script> | |
| <script src="javascripts/serviceLevelsByPartnerID.js"></script> | |
| </html> |
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
| console.log('In the script'); | |
| $(function () { | |
| // In DOM loaded | |
| console.log('In DOM Load Event'); | |
| // select the description element by ID | |
| var fillDescription = $("#fill_description_here"); | |
| // The select element by ID | |
| var select = $("#SPNOrderDetails1_listServiceLevel"); | |
| // We will store the descriptions loaded by XHR here | |
| var descriptions = []; | |
| // function that calls itself to make the XHR Request | |
| (function getDescriptions() { | |
| var url = 'http://ms1.agentgrid.net/api/tagnet/service_levelsByPartnerID?' | |
| var query = 'PartnerID=2'; | |
| // XHR Options | |
| var options = { | |
| type: 'GET', | |
| url: url + query, | |
| dataType: 'json', | |
| success: success, | |
| error: error | |
| }; | |
| // XHR Success | |
| function success(res) { | |
| // Handle JSON | |
| // Check for SQL error | |
| if (res.error == true) { | |
| // Display error | |
| $("#fillDescription").text(res.text) | |
| return; | |
| } | |
| // Assign data to array variable | |
| descriptions = res.data; | |
| setDescriptionByINdex(select.prop('selectedIndex')); | |
| } | |
| // XHR Error | |
| function error(err) { | |
| // Handle XHR error | |
| // Display error | |
| $("#fillDescription").text(res.text) | |
| } | |
| $.ajax(options); | |
| })(); | |
| //Listen for changes to the select element, and adjust the description | |
| select.on('change', function(e){ | |
| // Get the index of the specified selection | |
| var index = $(this).prop('selectedIndex'); | |
| console.log('The select has changed to ', index, ' index.') | |
| setDescriptionByINdex(index); | |
| }); | |
| // function to take an index and then set the description based off the index passed | |
| function setDescriptionByINdex(index){ | |
| fillDescription.text(descriptions[index].ServiceDescription); | |
| } | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment