I am trying to populate a Modal with the values in my JSON that I have received from a service call. The simple understandable structure of the object is like this:
var object = [
{Value1: "Val1",
Value2: "Val",
Value3: [{a:"a",b:"b"}]
}]
The ajax call is something like this :
$.ajax({
type: "GET",
url: "myURL",
data: id,
async: true,
dataType: "json",
contentType: "application/json; charset= UTF-8",
success: function (response) {
//alert("Successfully Inserted");
//alert(JSON.stringify(response));
},
error: function (error) {
console.log(error);
alert("Error!!");
}
});
I verified the response and its coming correctly.
HTML :
<a href="#openModal">Open Modal</a>
<div id="openModal" class="modalDialog">
<div> <a href="#close" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<input type = "text" id="one" placeholder="Place Val1"/>
<input type = "text" id="two" placeholder="Place Val2"/>
<input type = "text" id="three" placeholder="Place a here"/>
<input type = "text" id="four" placeholder="PLace b here"/>
</div>
</div>
I want to populate the modal on Open Modal click after I receive the JSON from service. Can someone help me out in doing this? Here`s the fiddler that explains more of what I want to achieve.
After ajax success, handle the response as follows
success: function (response) {
// add data to modal and open the modal.
$("#openModal").modal('show');
},
I'd create a function that does the populating for you like such:
success: function (response) {
PopulateModal(response);
$("#openModal").modal("show");
},
function PopulateModal(data) {
//*** this function targets each input and assigns the correct values
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.