3 Replies - 261 Views - Last Post: 22 February 2017 - 08:09 AM

#1 anuragk098  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 22-February 17

How to store ajax response into a jquery variable being used in html

Posted 22 February 2017 - 07:38 AM

Here is my gist of code: https://gist.github....b1859bde11f2117 Here is my page: http://abachelorskitchen.com/

In the first text box I am getting all the cities from a jquery function:

var months = [<?=$city;?>];
            $('#tbCountries1').autocomplete({
                source : months,
                minLength: 0,
                minChars: 0,
                max: 12,
                autoFill: true,
                mustMatch: true,
                matchContains: false,
                scrollHeight: 220,
                formatItem: function(data, i, total) {
                    if ( data[0] == months[new Date().getMonth()] ) 
                        return false;
                    return data[0];
                }
            }).on('focus', function(event) {
                var self = this;
                $(self).autocomplete( "search", "");;
            });


and onblur I am calling an ajax function which fetch all the areas in that city. But now I want all that areas in another jquery function from which area textbox will show results.

Ajax function:
function getarea(city){
                $.ajax({
                    url: '<?php echo base_url()?>Home/getArea',
                    type: 'POST',
                    data: {id: city},

                    success: function(data) {
                    area = data;
                    }
                });
                }


now area variable contains string like 'area1', 'area2'.
And another jquery method from where i am fetching areas:
$(document).ready(function() {      
        $('.select2').select2();
        });

              $( function() {
                var availableTags = [area];
                $( "#tbCountries" ).autocomplete({
                  source: availableTags
                });
              } );

Check gist for all the codes and page link to better understand the functionality I want to achieve.

Is This A Good Question/Topic? 0
  • +

Replies To: How to store ajax response into a jquery variable being used in html

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,057
  • Joined: 08-June 10

Re: How to store ajax response into a jquery variable being used in html

Posted 22 February 2017 - 07:44 AM

$.ajax('<?php echo base_url()?>Home/getArea', {
    type: 'POST',
    data: {
        id: city
    }
}).done(function(data) {
    $("#tbCountries").autocomplete('option', 'source', data);
});


This post has been edited by Dormilich: 22 February 2017 - 07:45 AM

Was This Post Helpful? 0
  • +
  • -

#3 anuragk098  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 22-February 17

Re: How to store ajax response into a jquery variable being used in html

Posted 22 February 2017 - 07:57 AM

I did not get a single thing you commented.
I am completely new to js so please be more specific.
are you suggesting that I should remove function to fetch area and write this code in ajax instead?

This post has been edited by Dormilich: 22 February 2017 - 07:58 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,057
  • Joined: 08-June 10

Re: How to store ajax response into a jquery variable being used in html

Posted 22 February 2017 - 08:09 AM

Ok then.

The first thing about AJAX that you need to understand is that it's asynchronous. for that matter neither variable assignments nor return values make an sense. period. If you want to do anything with the data received in the AJAX call, you must do it in the AJAX' response handler function.

The AJAX call shown in my previous post is one according to the jQuery docs (versions 2 and 3). consult http://api.jquery.com/jquery.ajax for a detailed explanation of its setup.

The part inside the done() handler is how you would work with the received data. Since AJAX is asynchronous, you must set up the autocomplete without any autocomplete data (as your AJAX call can be issued multiple times) at start-up. When the AJAX is called, its handler will then update the autocomplete with the received data (I'm assuming that you send the data in a form that autocomplete can use).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1