0

im trying to make live search , the data calls back from ajax call , and i want to put that data to my search function , but i cant access to the ajax data to make the search

function returnVistors(){
    k = '';
    
    $.ajax({
        type:'GET',
        url:'/my-url/list',
        success:function(data){
          visitors = data.visitors
          document.getElementById('spinner').classList.add('non-visible')
    
          for(i = 0;i < visitors.length; i++){
            const id = visitors[i]['id']
            const detail_url = '{% url "vistors:vistor_obj" id=1111 %}'.replace(/1111/,parseInt(id));
            k+='<a href="'+detail_url+'" class="flex  hover:bg-purple-900 hover:text-white  items-center border rounded-xl mt-1 p-2"></a>';
            k+='<p class="mr-2">'+visitors[i]['full_name'] + ' - '+ visitors[i]['city']+'</p>'
          }
            
          document.getElementById('visitors_results').innerHTML = k   
    
        },

      });
return k
      
}
            <div id="visitors_results" class="p-3 bg-white rounded-xl mt-4 md:mt-5 p-2 overflow-y-scroll">
                <div class=" flex justify-center items-center" id="spinner">
                    <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-gray-900"></div>
                  </div> 
            </div>

returns nothing also , i tried to console.log(returnVistors()) it also shows nothing ?! thank you for helping

artiest
  • 554
  • 5
  • 20
  • 3
    return `$.ajax({.....` ... note: it will return a Promise-like object you'll need to deal with that in the caller – Bravo Aug 20 '21 at 08:09
  • how to achieve that pleasse – artiest Aug 20 '21 at 08:10
  • no idea, don't know how you're calling that function – Bravo Aug 20 '21 at 08:13
  • 2
    To be clear, the comment above suggests you change your function : `return $.ajax({` then you can do `returnVistors().done(...` – freedomn-m Aug 20 '21 at 08:25
  • @Bravo thank you but can we access to `data.visitors` it show undefined when i show it in the console – artiest Aug 20 '21 at 08:30
  • no idea, as I don't know what you've now wriitten – Bravo Aug 20 '21 at 08:31
  • the same code i just add `return` to ajax `$.ajax({..` – artiest Aug 20 '21 at 08:33
  • 1
    Here's what your code does, hope it helps clarify for you what's going on: Enter returnVisitors / set k='' / *start* an ajax call / return k (which == '') / ... a few (milli)seconds later ... / ajax returns and enters success: / generates some html and updates the ui / returns nothing (which would return from the success: anyway, not the returnVisitors) / k has already been returned so the `k+=` is only used within returnVisitors – freedomn-m Aug 20 '21 at 08:46
  • @freedomn-m sorry im new for this task , its a unclear , but can we call back the data based on `$('#search_visitors').on('keyup',function(){ ..` – artiest Aug 20 '21 at 09:00
  • 1
    It's unclear *why* you need the callback (or even `k`) in the scenario, your `success:` appears to be doing all it needs – freedomn-m Aug 20 '21 at 09:01
  • i just want to call data's based on search input – artiest Aug 20 '21 at 09:03
  • 1
    Ok, change your returnVisitors to `return $.ajax...` then where you call it: `returnVisitors().done(function(data) {...` and `data` will be the (unformatted) result. Any thing else I suggest you ask a new question (as this one now closed), but with a *lot* more information, such as including your search input and what you want to do with the result and what "call data based on search input" means. – freedomn-m Aug 20 '21 at 09:20
  • @freedomn-m i mean it shows all data by default , but when a user type in search field , if the input search result exists in the query then it will show the result instead all of the objects – artiest Aug 20 '21 at 09:59
  • Your question doesn't link `returnVisitors` with your search, so we have no idea how they relate to each other. I would image you call `returnVisitors()` on page load to get all then search them as you're not passing a search parameter to returnVisitors - in which case, how you build #visitors_results is irrelevant as you would just show/hide the results as you type. If you call returnVisitors() *every* time you change the search then you need to pass the search as a parameter as the results from the ajax will be the same *every* time, so making a pointless call. I suggest a new question. – freedomn-m Aug 20 '21 at 10:09
  • @freedomn-m https://stackoverflow.com/questions/68861040/how-to-call-onkeyup-inside-ajax-success – artiest Aug 20 '21 at 11:08

0 Answers0