I have a class named Clientes. I have a function that made a request in AJAX. See below:
Clientes.prototype.listar_clientes = function(){
var url = "funcoes_ajax_clientes.php";
var params = "id_funcao=1";
var xmlhttp = chama_funcao_php_ajax( url, params );
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var resposta_ajax = xmlhttp.responseText;
var elementos_listbox_clientes = manipulacao_strings.separa_dados_string( resposta_ajax );
var html_div_listbox_elementos = "<select name = \"listbox_elementos\" id = \"listbox_elementos\" multiple>";
for( var contador = 0; contador < elementos_listbox_clientes.length; contador+=2 ){
var indice_id = contador;
var indice_nome = contador + 1;
var indice_id_cliente = contador/2;
this.ids_clientes.push( elementos_listbox_clientes[indice_id] );
elemento_listbox_clientes = elementos_listbox_clientes[indice_nome];
html_div_listbox_elementos+= "<option>";
html_div_listbox_elementos+= elemento_listbox_clientes;
html_div_listbox_elementos+= "</option>";
}
html_div_listbox_elementos+= "</select>";
elementos_javascript.set_html_elemento( "div_listbox_elementos", html_div_listbox_elementos );
}
}
xmlhttp.send(params);
}
In
this.ids_clientes.push( elementos_listbox_clientes[indice_id] );
I wanted to reference the Clientes class, but the xmlhttp class is being referenced. How do I reference the Clientes class in this case?
Thanks in advance.
Create a variable outside of the callback function to hold the scope.
var url = "funcoes_ajax_clientes.php";
var params = "id_funcao=1";
var xmlhttp = chama_funcao_php_ajax( url, params );
var that = this; //<-- create a variable to hold the scope
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var resposta_ajax = xmlhttp.responseText;
var elementos_listbox_clientes = manipulacao_strings.separa_dados_string( resposta_ajax );
var html_div_listbox_elementos = "<select name = \"listbox_elementos\" id = \"listbox_elementos\" multiple>";
for( var contador = 0; contador < elementos_listbox_clientes.length; contador+=2 ){
var indice_id = contador;
var indice_nome = contador + 1;
var indice_id_cliente = contador/2;
that.ids_clientes.push( elementos_listbox_clientes[indice_id] );
elemento_listbox_clientes = elementos_listbox_clientes[indice_nome];
html_div_listbox_elementos+= "<option>";
html_div_listbox_elementos+= elemento_listbox_clientes;
html_div_listbox_elementos+= "</option>";
}
html_div_listbox_elementos+= "</select>";
elementos_javascript.set_html_elemento( "div_listbox_elementos", html_div_listbox_elementos );
}
}
To avoid having local scope vars you can do like this:
var url = "funcoes_ajax_clientes.php";
var params = "id_funcao=1";
var xmlhttp = chama_funcao_php_ajax( url, params);
function changeCallback(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var resposta_ajax = xmlhttp.responseText;
var elementos_listbox_clientes = manipulacao_strings.separa_dados_string( resposta_ajax );
var html_div_listbox_elementos = "<select name = \"listbox_elementos\" id = \"listbox_elementos\" multiple>";
for( var contador = 0; contador < elementos_listbox_clientes.length; contador+=2 ){
var indice_id = contador;
var indice_nome = contador + 1;
var indice_id_cliente = contador/2;
this.ids_clientes.push( elementos_listbox_clientes[indice_id] );
elemento_listbox_clientes = elementos_listbox_clientes[indice_nome];
html_div_listbox_elementos+= "<option>";
html_div_listbox_elementos+= elemento_listbox_clientes;
html_div_listbox_elementos+= "</option>";
}
html_div_listbox_elementos+= "</select>";
elementos_javascript.set_html_elemento( "div_listbox_elementos", html_div_listbox_elementos );
}
}
xmlhttp.onreadystatechange = changeCallback.bind(this);
Generally when you want to call a function within a specific scope you use the bind method.