logo
down
shadow

How to update data of a VueJS instance from a jQuery AJAX call?


How to update data of a VueJS instance from a jQuery AJAX call?

Content Index :

How to update data of a VueJS instance from a jQuery AJAX call?
Tag : jquery , By : appdelivery
Date : November 28 2020, 11:01 PM

I wish this helpful for you
You have a scope issue of this.name in your AJAX success handler.
$.ajax({
    url: 'http://elk.example.com:9200/users/user/' + this.id
    }).done(data => {
        this.name = data._source;  // 'this' points to outside scope
        this.name.valueset = true;
    });

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

How to call second jQuery.ajax instance on success of first and update page


Tag : javascript , By : Gabe
Date : March 29 2020, 07:55 AM
I hope this helps you . I have some jQuery that is triggered on click of a link with the class 'changetag'. I'm using $.ajax() to update the database via changetag.php. , Ajax calls are (by default) asynchronous. That means that this code:
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");

return false;
$.ajax({
    type: "POST",
    url: "_js/changetag.php",
    data: info,
    success: function(){
        $("#li_"+I).toggleClass("off on");
        element.toggleClass("off on");
    }
});
$.ajax({
    type: "POST",
    url: "_js/changetag.php",
    data: info,
    success: function(){
        $("#li_"+I).toggleClass("off on");
        element.toggleClass("off on");

        $.ajax({
            url: "_js/loaddeals_v2.php",
            success: function(results){
                $('#listresults').empty();
                $('#listresults').append(results);
            }
        });
    }
});
function firstAjax() {
    return $.ajax({
        type: "POST",
        url: "_js/changetag.php",
        data: info,
        success: function(){
            $("#li_"+I).toggleClass("off on");
            element.toggleClass("off on");
        }
    });
}

// you can simplify this second call and just use $.get()
function secondAjax() {
    return $.get("_js/loaddata.php", function(results){
        $('#listresults').html(results);
    });
}

// do the actual ajax calls
firstAjax().success(secondAjax);

VueJS - Iterating over data returned from an AJAX call


Tag : ajax , By : IanM
Date : March 29 2020, 07:55 AM
Hope that helps Computed properties must be return a value synchronously. The AJAX call within the computed property returns a value from the callback, but that return is asynchronous and thus cannot update the computed property.
I don't think a computed property makes sense here. Instead, I would recommend fetching the data in the mounted() hook, and have the AJAX callback store the received data in a data property (this.posts = data.data;).

DOM not updating after AJAX data update in VueJS


Tag : javascript , By : MJRider
Date : March 29 2020, 07:55 AM
Does that help The problem is that your this context gets lost when you call out to jQuery. The callback method you have (success: function) doesn't have a reference back to Vue. The way to pass the correct context is, conveniently enough, the context property in your $.ajax call.
It's all documented at the jQuery site: https://api.jquery.com/jQuery.ajax/ - just search for the word "context" and you'll find it.
$.ajax({
  url: '/test_json',
  context: this,
//  [... etc ...]
  success: function(data) {
    this.message = "reference to Vue data message";
  }
);

VueJS loading data from AJAX call and passing it to child components without v-if


Tag : vue.js , By : user179863
Date : March 29 2020, 07:55 AM
Does that help Here is the main reason: https://stackoverflow.com/a/54163297/523630
Your mydataOne and mydataTwo properties should be mydata-one and mydata-two in component's html snippet, like so:
<div :mydata-one="mydata"></div>
Vue.component('child-one',{
  template:'#child-one',
  props:['one'] 
});

Vue.component('child-two',{
  template:'#child-two',
  props:['two']
});

let app = new Vue({
  el:'#app',
  data:{
    welcome:'Hello World',
    mydata:null
  },
  methods:{
    getdataApi(){
      $.getJSON( "https://jsonplaceholder.typicode.com/users", (data) => {
        this.mydata = data;
      }); 
    } 
  },
  mounted:function(){ 
    this.getdataApi();
  }
});

Why Vuejs does not want to update the model from the data received through AJAX


Tag : javascript , By : mdiezb
Date : March 29 2020, 07:55 AM
With these it helps Generally speaking, these issues are down to Vue's issues with reactivity and arrays: https://vuejs.org/v2/guide/reactivity.html
With this in mind, you could try:
Related Posts Related QUESTIONS :
  • Animate hidden hyperlink to display:block
  • jquery ajax call returning error when its not an error
  • Exclude one or more elements from being connected (using connectWith) in jQuery's sortable lists
  • Adding link with existing href
  • jquery cycle plugin divs always stacked problem
  • jquery toggle and fade in one function?
  • JQuery UI Tabs caching
  • Drag and Drop into another div and move in the div only using jquery
  • Links in rounded boxes? In ALL browsers (yep included IE8)
  • How to change the content of the Span using jQuery?
  • jQuery; combine user click and :checked
  • jQuery - Finding the element index relative to its container
  • jQuery .each() function. Resetting the index?
  • jQuery storing settings
  • Why does asp.net mvc form submits itself on button clicks when javascript function error?
  • Linking to non-home panel in JQTouch site
  • How to Edit jQuery Table Using CSS
  • Jquery hover triggers "mouse leave" without cursor leaving
  • DELETE http://localhost:8000/product/[object%20Object] 500 (Internal Server Error)
  • Comparing two string arrays and returning key of not found element using jquery
  • using jquery to change list items is changing all list items, when i want to only change one list item
  • Sending a Json data from my html page to a php
  • Click function to search a specific element in a Json object
  • Bootstrap 4 - Progress Bar Progression
  • how to deleted item materialize chips
  • jQuery - Hide non-active elements using filter()
  • Adding style to string table is not working
  • Github merge multiple files into single compressed master file
  • Replace characters in a field on page load
  • Unable to send data from Form to SQL database
  • If all divs have same style, remove element
  • How to click a jQuery Dialog button in TestCafe
  • Cannot reinitialise DataTable with Angular Datatable
  • How to add Class active on Click in Navbar
  • how to call fail method into jquery.get/post success method?
  • Slider with tabs
  • Jquery Get parent element from data function
  • Ho to put a new line in <p> tag in my jquery?
  • How can I use a text value as a mathematical operator?
  • DataTable columns values showing Only DefaultContent
  • JQuery select dynamically added elements
  • How to change an image source on hover?
  • How to bind jquery event to dynamically added multiple DOM elements?
  • How to get td values and store in array using Jquery?
  • How to add handler to dinamically created tr in JQuery?
  • How to Covert Html to PDF in Jquery?
  • Jquery before() and after() used to create a <div> container not inserting closing tags in after()
  • I want to delete previously added class
  • Open html page in same window after clicking on navlink
  • Datatable is not working when I populate table using smarty
  • How to change image based on the offset top of the content div
  • Find the index of table column with specific id
  • How to return value of $(window).resize()
  • How to optimize adding numerous elements dynamically into web page
  • Content slide down on top of page?
  • How to write if statement for when a specified option is selected in select tag in JQuery
  • HTML tags remove from textarea using jQuery
  • ShareThis not display properly when initially hidden
  • jquery - Bind datepicker event
  • How can I cause an element to move on mouse scroll using transform matrix?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com