Displaying data from an Ajax response with Jquery

Michael Falciglia

I am trying to learn how to display data from an Ajax response with jquery

This was is what is returned to the console

Object {type: "success", message: "Your message has been sent, thank you.", record: Object}
record: Object
account_number: "1234567812345678"
balance: "1234"
bank_name: "test name"
customer_id: "12345"
id: 49
monthly: "123456"

This is the current script that brings it to the console:

jQuery(document).ready(function($) {
  $('form.quform').Quform({
    successStart: function (response) {
      console.log(response); 

This is what I have tried but it does not work, it stops the AJAX from working when you add the extra closing bracket at the bottom, but it does nothing if you take it off:

jQuery(document).ready(function($) {
    $('form.quform').Quform({
        successStart: function (response) {
            var r = response.record;
            var html = '<li>Acct#: ' + r.account_number + '</li><li>Balance: ' + r.balance + '</li><li>Bank: ' + r.bank_name + '</li><li>Customer#: ' + r.customer_id + '</li>';
            $("#ulID").html(html);
        }
    });
});

Please note I have added <div id="ulID"></div> into the page because I think that is what I need to display it

Roger Tjosås

I must admit that i am unfamiliar with the way you use ajax to get a 'response' Are you querying a webservice? And i am not familiar with the Quform plugin either, you should specify that in your question that you are using a plugin.

But i will try and help you anyways. Since your question asked for displaying data from an Ajax response, i will assume that you are querying a webservice and try and help you out with that assumption Here is the code to call a webservice with Ajax without using a plugin.

$.ajax({
    url: 'webservice url',
    type: "POST",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
            alert('Success!');
        $('.ulID').text('response was: ' + data.d)
    },
    failure: function (msg) { 
                alert('an error occured'); 
        }
});

The url is offcourse the link to the webservice, and the data contains any parameters that the webservice require.

This is to my knowledge the correct way to use Ajax to query a webservice.

if you want help with getting help with the code you already have i suggest removing Ajax from the question and replacing it with Quform. But to be honest, Ajax calls in JQuery are so easy that unless you plan on using that plugin for something else i'd drop the plugin.

btw: this setup expects the webservice to support json

i hope this helps

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Displaying data from database with AJAX, jquery and codeigniter

From Dev

Displaying data from database with AJAX, jquery and codeigniter

From Dev

jQuery AJAX response not displaying PHP

From Dev

jQuery: Post data from ajax response

From Dev

How to collect collect data from Jquery ajax response to html?

From Dev

jQuery autocomplete ajax request not displaying returned data

From Dev

Displaying input field data with jquery ajax

From Dev

Angularjs displaying ajax response

From Dev

AJAX response text displaying

From Dev

Displaying data from database from Controller to View using jQuery AJAX request CodeIgniter

From Dev

Ember displaying data from an ajax call

From Dev

Trouble displaying data from ajax json parse

From Dev

Displaying data from web api into tables with ajax

From Dev

jQuery JSON response not displaying

From Dev

Jquery - Ajax displaying the content of DIV from the result of a Ajax call

From Dev

displaying data from a search in jquery jtable

From Dev

Displaying data from rest API using jQuery

From Dev

Jquery ajax populate dropdown with json response data

From Dev

send data to php with jquery AJAX and retrieve the response

From Dev

Jquery ajax populate dropdown with json response data

From Dev

Unable to access AJAX Response Data through jQuery

From Dev

Compare data with ajax response using jquery

From Dev

Fetch some data from xml response comes from ajax jquery call

From Dev

Handling exception in Jquery AJAX response from Servlet

From Dev

jQuery read array from ajax response

From Dev

AJAX/Jquery - Get response from php file

From Dev

jQuery - Remove some elements from AJAX response

From Dev

Jquery - Can't remove() from AJAx response

From Dev

Call function in jQuery from AJAX response

Related Related

  1. 1

    Displaying data from database with AJAX, jquery and codeigniter

  2. 2

    Displaying data from database with AJAX, jquery and codeigniter

  3. 3

    jQuery AJAX response not displaying PHP

  4. 4

    jQuery: Post data from ajax response

  5. 5

    How to collect collect data from Jquery ajax response to html?

  6. 6

    jQuery autocomplete ajax request not displaying returned data

  7. 7

    Displaying input field data with jquery ajax

  8. 8

    Angularjs displaying ajax response

  9. 9

    AJAX response text displaying

  10. 10

    Displaying data from database from Controller to View using jQuery AJAX request CodeIgniter

  11. 11

    Ember displaying data from an ajax call

  12. 12

    Trouble displaying data from ajax json parse

  13. 13

    Displaying data from web api into tables with ajax

  14. 14

    jQuery JSON response not displaying

  15. 15

    Jquery - Ajax displaying the content of DIV from the result of a Ajax call

  16. 16

    displaying data from a search in jquery jtable

  17. 17

    Displaying data from rest API using jQuery

  18. 18

    Jquery ajax populate dropdown with json response data

  19. 19

    send data to php with jquery AJAX and retrieve the response

  20. 20

    Jquery ajax populate dropdown with json response data

  21. 21

    Unable to access AJAX Response Data through jQuery

  22. 22

    Compare data with ajax response using jquery

  23. 23

    Fetch some data from xml response comes from ajax jquery call

  24. 24

    Handling exception in Jquery AJAX response from Servlet

  25. 25

    jQuery read array from ajax response

  26. 26

    AJAX/Jquery - Get response from php file

  27. 27

    jQuery - Remove some elements from AJAX response

  28. 28

    Jquery - Can't remove() from AJAx response

  29. 29

    Call function in jQuery from AJAX response

HotTag

Archive