json data to button function
Sorry, I'm sort of new to JSON, but I am somewhat familiar with jQuery. I've mainly only used jQuery to manipulate the DOM here and there, but nothing too advanced. I have a working piece of code that pulls data from a web method and puts it into a modal popup using bootstrap 3. What I'm trying to figure out is how to add a button and a function to that button to populate the textboxes on the page with the data when submitted.
- <script>
- $(document).ready(function () {
- // Add the page method call as an onclick handler for the div.
- $("#LoadExistingAddresses").click(function () {
- $.ajax({
- type: "POST",
- url: "Beneficiary.aspx/GetAddresses",
- data: "{}",
- contentType: "application/json; charset=utf-8",
- dataType: "json",
- success: function (msg) {
- var dataObj = $.parseJSON(msg.d);
- var tempText = '<div class="row">';
- $.each(dataObj, function (i, item) {
- tempText = tempText + '<div class="col-xs-12 col-sm-6">';
- tempText = tempText + '<h5>' + item.FullName + '</h5>';
- tempText = tempText + '<p>' + item.AddressFormatted + '</p>';
- tempText = tempText + '<p><button type="button" class="btn btn-primary">Use This Address</button>'
- tempText = tempText + '</div>';
- tempText = tempText + '<div class="col-xs-12 visible-xs"> </div>';
- });
- tempText = tempText + '</div>';
- $('#modal-body-address-list').html(tempText);
- $('#addresses').modal();
- }
- });
- });
- });
- </script>
What type of function do I need to create to pass in the item so when someone clicks on "Use This Address" the address fields on the page get populated with my data. I have:
item.Address1, item.Address2, item.City, item.State, item.ZipFormatted properties along with the item.AddressFormatted property. Also, the item.State will point to a dropdown list where the text and value matches the 2 lettered US state.