Following a successful AJAX request, there is an issue with the updated data not displaying on the page. Instead, it remains empty or null.
There seems to be a disconnect between the data returned as a front-end variable and the dynamically rendered HTML elements.
Below are the code snippets for better understanding. Can you identify what is missing or incorrect?
Javascript
page = new Vue({
el: "#container",
data: {
option_id: null,
option_name: null
},
created:function() {
$.ajax({
type: 'POST',
contentType: 'application/json',
dataType: 'json',
url: 'ajax_methods/get_option',
success: function (ajax_data) {
self = this;
self.option_id = ajax_data.option_id;
self.option_name = ajax_data.option_name;
},
error: function (e) {
console.log(e)
}
})
}
})
HTML
<script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="483e3d2d087a667b">[email protected]</a>"></script>
<div id="container">
<p>{{ option_name }}</p>
<button v-on:click="send_option()"
type="button"
id="left_button"
name="left_button"
v-bind:value="option_id">
</div>
Checking AJAX success
Upon inspecting in the console, non-null values are being returned as expected when the following variables are checked:
- self.option_id
- self.option_name