0

Alright, stuck here... I have a twitter typeahead autocomplete complete box.

        <div id="sites">
            <span></h4>Site Review</h4><input class="typeahead form-control" type="text" placeholder="Spot Check for..."></span>
        </div>

On selection of an autocomplete, rather than reload the page or an iframe, I would like to refresh a div that contains list elements unique to each 'site' stored in the mysql server. These will be fetched by get_site_attributes.php

$('.typeahead')
    .typeahead(/* pass in your datasets and initialize the typeahead */)
    .on('typeahead:selected', onAutocompleted)
    .on('typeahead:autocompleted', onSelected);


function onAutocompleted($e, datum) {
...
}

function onSelected($e, datum) {
...
}

Now how do I reload that div with the content of get_site_attributes.php without using an iframe?

-thanks in advance

Aaron
  • 23
  • 7
  • javascript and some ajax. Use ajax to get the information from your database and then update the div contents using javascript or jQuery – Icewine Nov 24 '16 at 03:01

1 Answers1

2

As said in comments you have to use ajax.

Call the method ajaxCall wherever you need to refresh your DOM content

Let's say you have this:

<h1 class='site_title'></h1>

Then in your js:

var ajaxCall = function(){
    $.ajax({
    url : 'get_site_attributes.php', #or relative path
    type : 'GET',
    dataType:'', #whatever get_site_attributes.php is returning: html/json/...
    success : function(data) {              
        updateDatas(data);
    },
    error : function(request, error) {
        console.log(request, error);
    }
 });
}

var updateDatas(data) = function(){
    # replace whatever you want in the DOM with your datas
    # for example: 
    # $('.site_title').empty();
    # $('.site_title').append(data.site_title);
}
Ben
  • 96
  • 5