We Keep Coding

How to get id variable into ajax

js
function SearchInList(_id,_url,_place){
this.id = _id;
this.url = _url;
this.place = _place; /*How to get this value */
};
SearchInList.prototype.FindMe = function (_str){
this.str = _str;
if (this.str == "") {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var place = this.place;
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("lista-ind").innerHTML = this.responseText; /*in this place */
}
};
xmlhttp.open("GET",this.url+"?id="+this.id,true);
xmlhttp.send();
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("lista-ind").innerHTML = this.responseText;
}
};
xmlhttp.open("GET",this.url+"?id="+this.id+"&hint="+this.str,true);
xmlhttp.send();
}
};
in HTML I have
<input type="text" placeholder="Search" id="search-ind" ></div>
<div id="lista-ind" class="lista"></div>
<script>
var id = <?php echo $_GET['id']; ?>;
var url = "showresults.php";
var place = "lista-ind";
var searchInd = new SearchInList(id, url);
var searchboxInd = document.getElementById("search-ind");
window.onload = searchboxInd.addEventListener("keyup", function(){
searchInd.FindMe(searchboxInd.value,place);
console.log(searchboxInd.value);
}, false);
window.onload = searchInd.FindMe("",place);
</script>
and when i have in function in onreadystatechange " document.getElementById("lista-ind")" it is working, but when I change to
document.getElementById(this.place) it is not.
how to pass this variable into that function?
this is how i made searching in lists.
thanks.
M.

If place is a global variable, outside the function, you not need this; just the variable name.
document.getElementById(place)

You're instantiating SearchInList without a place and FindMe does not take place as a parameter, so there is no way to get place to use in the object.
The easiest solution would be to add place as a parameter to FindMe
SearchInList.prototype.FindMe = function (_str, _place){
this.str = _str;
this.place = _place;
...

Dynamic Object Access from form to Ajax

Here is my JavaScript with Ajax code:
Actually i am using this for dynamically adding option in any number of select in which this function is called.
function loadabc(vm) {
var xmlhttp;
//alert(vm);
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//alert("called");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
var jsonObj = JSON.parse(xmlhttp.responseText);
for(i = 0; i < jsonObj.length; i++) {
var createOption = document.createElement("option");
//alert("Jeason has Passed Data");
createOption.value = jsonObj[i].aId;
createOption.text = jsonObj[i].aName;
//alert("id" + createOption.value);
//alert("Name" + createOption.text);
document.impForm.vm.options.add(createOption);
//alert("Added");
}
}
}
xmlhttp.open("get", "${pageContext.request.contextPath}/Admin_Search_con?flag=loaddetail", true);
xmlhttp.send();
}
I am using ondblclick="loadabc(this)" for calling it. I want to access this vm object for creating options in select. How can I do so?

The solution is to use the param vm instead of referencing it as document.impForm.vm:
function loadabc(vm) {
var xmlhttp;
//alert(vm);
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//alert("called");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
var jsonObj = JSON.parse(xmlhttp.responseText);
for(i = 0; i < jsonObj.length; i++) {
var createOption = document.createElement("option");
//alert("Jeason has Passed Data");
createOption.value = jsonObj[i].aId;
createOption.text = jsonObj[i].aName;
//alert("id" + createOption.value);
//alert("Name" + createOption.text);
vm.options.add(createOption); // <-- Here!
//alert("Added");
}
}
}
xmlhttp.open("get", "${pageContext.request.contextPath}/Admin_Search_con?flag=loaddetail", true);
xmlhttp.send();
}

How to print xmlhttp response?

I am getting some information from database, this information is getting back into JSON format now I need to print this JSON information. But my code is not working getCountryDetails.php is php file for interacting with the database. Following code is the script, When I click the button It intersects with database.
<script type="text/javascript">
$(document).ready(function() {
$("#quickSearch").click(function(){
var countries = [];
$.each($("#select-choice-1 option:selected"), function(){
countries.push($(this).val());
});
if (countries == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//myFunction(xmlhttp.responseText);
myFunction(xmlhttp.responseText);
}
}
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
xmlhttp.open("GET","webservices/getCountryDetails.php?q="+countries,true);
xmlhttp.send();
}
});
});
function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "<table>";
for(i = 0; i < arr.length; i++) {
out += "<tr><td>" +
arr[i].Name +
"</td><td>" +
arr[i].City +
"</td><td>" +
arr[i].Country +
"</td></tr>";
}
out += "</table>"
document.getElementById("id01").innerHTML = out;
}
</script>

Firstly, countries will never be an empty string, you've defined it as an array
var countries = [];
...
if (countries == "") { // always fail
secondly, you can't concantenate an array into a string, and XMLHttpRequest doesn't accept arrays
xmlhttp.open("GET","webservices/getCountryDetails.php?q=" + countries, true);
Thirdly, you seem to be using jQuery, so why not use it as it does accept an array
$.ajax({
url : 'webservices/getCountryDetails.php',
data : countries
}).done(myFunction);

Sending an array using javascript ajax

In jquery I can do this
myAray=['abc', '123', 'more'];
$.post('myscript.php', {data:myAray}, function(data){
alert(data);
});
How can I do the same thing using plain javascript ? I want to send an array to my php script using POST method. I have found so many examples but all of them are jquery related.
Thanks in advance.

You will have to use XMLHttpRequest and serialize the array yourself:
function ajax(myArray) {
var xmlHTTP;
if (window.XMLHttpRequest) {
xmlHTTP = new XMLHttpRequest();
} else {
xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHTTP.onreadystatechange = function () {
if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
// do whatever it is you want to do
}
}
//Serialize the data
var queryString = "";
for(var i = 0; i < myArray.length; i++) {
queryString += "myArray=" + myArray[i];
//Append an & except after the last element
if(i < myArray.length - 1) {
queryString += "&";
}
}
xmlHTTP.open("POST", "www.myurl.com", true);
xmlHTTP.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlHTTP.send(queryString);
}

Mess around with this.
JS
var myarray = Array("test","boom","monkey");
send("test.php", myarray);
function send(url, data)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
console.log(xhr.responseText);
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("data= " +data);
}
PHP
<?php
$array = explode(',', $_POST["data"]);
for($i=0,$l=count($array); $i<$l; $i++)
{
echo $array[$i].'<br>';
}
?>

Something like this:
post is either POST or GET.
params are only used in POST otherwise include what you need in the url for GET.
success and error are both string names of the functions, not the functions themselves, which is why you need executeFunctionByName, thanks to Jason Bunting:
How to execute a JavaScript function when I have its name as a string
getRemoteData = function (url, post,params, success, error){
var http = false;
if (navigator.appName === "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
http = new XMLHttpRequest();
}
http.open(post, url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {var resp; if (http.readyState === 4 && http.status == 200) { resp=http.responseText; executeFunctionByName(success, window, resp); }else if(http.status == 400){resp=http.responseText; executeFunctionByName(error, window, resp);}};
http.send(params);
return false;
};
function executeFunctionByName(functionName, context, args) {
args = Array.prototype.slice.call(arguments).splice(2);
var namespaces = functionName.split(".");
var func = namespaces.pop();
for(var i = 0; i < namespaces.length; i++) {
context = context[namespaces[i]];
}
return context[func].apply(this, args);
}

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","jsArrayPhp.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("test[]=Henry&test[]=Ford");
}
Take attention here:
test[]=Henry&test[]=Ford"
Where test is the name of array you'll use in php.
In php
<?php
print_r($_POST['test']);
?>
It'd produce: Array ( [0] => Henry [1] => Ford )

Parsing or using variables from a called script?

I have an AJAX function which loads content from a file and displays in the file that called it.
But the script that was called I want to loop an array which is actually set in the script that called it... this is main script that calls the file:
function call_file(file, div_id) {
var xmlhttp;
if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(div_id).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", file, true);
xmlhttp.send();
}
var global = new Array();
global[0] = 1;
global[1] = 2;
call_script('html.html', 'main');
html.html is the file that is called which has this:
<script>
i = 0;
for(var id in global) {
alert(i + ' = ' + id);
i++;
}
</script>
Is this at all possible?

One way is to extract the script and eval it yourself. For example:
//....
document.getElementById(div_id).innerHTML = xmlhttp.responseText;
var str = xmlhttp.responseText;
var reg = /<script>([^>]*)<\/script>/img;
while(reg.test(str))eval(RegExp.$1);
//...