We Keep Coding

Get HTML id with JQuery through AJAX

I'm stuck..I have made a system which gets all colleges from a specific subject, and I want javascript to select the college the user has selected when he clicks on one so the presence of that class can be shown, just a summary: the user selects a subject, an AJAX request gets all colleges from that subject and another AJAX request has to get that specific college and use it to display the data.
This specific function gets the data from the subjects and displays them in a div with the id 'colleges'
function showAanwezigheid(str) {
if (str == "") {
document.getElementById("colleges").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 (this.readyState == 4 && this.status == 200) {
document.getElementById("colleges").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","../controller/docentController.php?action=getColleges&vak="+str,true);
xmlhttp.send();
}
}
Here is the controller which calls the query and displays the result:
$vak = $_GET['vak'];
$colleges = $q->getColleges($vak);
echo "<select id='college'>";
echo "<option>Selecteer een college:</option>";
foreach($colleges as $college){
echo "<option value='".$college->getCollege()."'>College ".$college->getCollege()."</option>";
}
echo "</select>";
}
This is the id where the result is being displayed
<span id="colleges"></span>
And this function should select the 'select' tag with the id 'college' to get that value on change
$(document).ready(function(){
$('#vak').on('change', function() {
var vak = this.value;
alert(vak);
$('#college').on('change', function() {
var college = this.value;
alert(college);
});
});
});
I feel like there would be such an easy fix but I just can't seen to make it work...

Change jQuery code like below:-
$(document).on('change','#vak',function() {
var vak = $(this).val();
alert(vak);
});
$(document).on('change','#college',function() {
var college = $(this).val();
alert(college);
});
Note:- Make sure that jQuery library added before your script code. Otherwise you will get $ is undefined error
This is called Event Delegation

IF you want to get the value of the #college select on change then this would be simpler:
$(document).ready(function(){
$('#vak').on('change', function() {
var vak = $(this).val();
alert(vak);
});
$('#college').on('change', function() {
var college = $(this).val();
alert(college);
});
});
IF you noticed, The onchange of the #vak and the #college is separated

XMLHttpRequest with php will not work

I've been trying to get this solved for 2 weeks now and still have no success.
JavaScript:
var quotenum = 0;
var xmlhttp = null;
var rt = "";
function ChangeQuote() {
quotenum++;
xmlhttp = null;
//alert("quotenum= "+quotenum);
if (quotenum === 0) {
document.getElementById("quote").innerHTML = "";
return;
}
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 === XMLHttpRequest.DONE && xmlhttp.status === 200) {
rt = xmlhttp.responseText;
//alert("quote= "+rt);
alert("request number= " + xmlhttp.length);
document.getElementById("quote").innerHTML = rt;
}
};
xmlhttp.open("Get", "getquote.php?q=" + quotenum, false);
//xmlhttp.open("GET", "getquote.php?XDEBUG_SESSION_START=netbeans-xdebug&q=" + quotenum, false);
xmlhttp.send();
//var thediv = document.getElementById("quote");
return false;
}
PHP:
error_reporting(E_ERROR | E_PARSE);
$q="";
$q = intval($_GET['q']);
$link=mysqli_connect("localhost","root","sequence","babylon");
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$query="SELECT quotetext FROM quote where quotenum='".$q."'";
$show=mysqli_query($link,$query) or die ("Error");
while($row=mysqli_fetch_array($show)){
echo $row["quotetext"];
}
Can anyone see anything wrong with this?
Using WAMP I can see the correct result when I run the PHP file in a browser.
I also try to use Jquery instead.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var quotenum = 0;
// var xmlhttp = null;
// var rt = "";
function ChangeQuote() {
quotenum++;
$.ajax({
url: "getquote.php?q="+quotenum,
method: "get",
data: {
q: quotenum
}
}).done(function (data) {
alert(data);
document.getElementById("quote").innerHTML = data.quotetext;
});
return false;
}
</script>

The only noticable error I see is you inlining your js with the script tag that has a src attribute.
HTML 4.01 Specification:
The script may be defined within the
contents of the SCRIPT element or in
an external file. If the src attribute
is not set, user agents must interpret
the contents of the element as the
script. If the src has a URI value,
user agents must ignore the element's
contents and retrieve the script via
the URI.

Detect arrays with ajax

I have a document on PHP retrieving the postal codes via form and it gives back an array. If the postal code is used on more than one citie, it creates a multidimensional array, otherwise it stores everything just in one.
I have three scenarios:
If the postal code doesn't exist it gives an array with 2 values "Doesn't exist" and output it on the form.
If the postal code exists it gives you an array with the city and the state and output them on the form.
If the postal code exists and is used on more than one citie it stores every result on an array and all of them into a another array (Array => Array [0] => Array([city]=>city1 [state]=>state1) Array [1] => Array([city]=>city2 [state]=>state2)... and then outputs a popup.
I managed to do everything but I still have some problems. Here's my code:
Script PHP
include_once('../../../connect.html');
//perform lookup
$title = ($_GET['postal_code']);
$statement = $connection->prepare ("SELECT city, state FROM cities, states WHERE cities.state_id = states.state_id AND cities.postal_code = ?");
$statement->execute(array($title));
$statement->setFetchMode(PDO::FETCH_ASSOC);
$items = array();
while ($r = $statement->fetch()) {
//$arrayName = array($r = $statement->fetch());
$items[] = $r;
}
if (count($items) == '1'){
$newArray = $items[0];
echo $newArray['city'].",".$newArray['state'];
}elseif (count($items) == '0'){
echo "Doesn't exist".","."Doesn't exist";
}else{
$varios = array($items);
print_r($varios);
}
AJAX code
var ajax = getHTTPObject();
function getHTTPObject()
{
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} else {
//alert("Your browser does not support XMLHTTP!");
}
return xmlhttp;
}
function updateCityState()
{
if (ajax)
{
var zipValue = document.getElementById("postal_code").value;
if(zipValue)
{
var url = "get_cities.php";
var param = "?postal_code=" + escape(zipValue);
ajax.open("GET", url + param, true);
ajax.onreadystatechange = handleAjax;
ajax.send(null);
}
}
}
function handleAjax()
{
if (ajax.readyState == 4)
{
if( ajax.responseText.length ) {
if (ajax.responseText[2]) {
centerPopup();
loadPopup();
}
citystatearr = ajax.responseText.split(",");
city.value = citystatearr[0];
state.value = citystatearr[1];
}else{
}
}
}
Problems are:
It calls the function centerPopup and loadPopup everytime, regardless the result (it should be called only when the PHP script gives back a multidimensional array.
I don't know how to detect via AJAX when the script is sending the normal array or the multidimensional array.
It's basically those two problems but solving one, the other one is solved.
Any help is appreciated!!

ajax.responseText is a string, in JavaScript string[n] return the nth letter of the string.
You must encode your data in PHP then decode it in JavaScript, the best way to do it is with JSON. Both PHP and JavaScript provide support for JSON (json_encode/json_decode and JSON.stringify/JSON.parse) so it's easier!
So this is the code in JS:
var ajax = getHTTPObject();
function getHTTPObject()
{
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} else {
//alert("Your browser does not support XMLHTTP!");
}
return xmlhttp;
}
function updateCityState()
{
if (ajax)
{
var zipValue = document.getElementById("postal_code").value;
if(zipValue)
{
var url = "get_cities.php";
var param = "?postal_code=" + escape(zipValue);
ajax.open("GET", url + param, true);
ajax.onreadystatechange = handleAjax;
ajax.send(null);
}
}
}
function handleAjax()
{
if (ajax.readyState == 4)
{
if( ajax.responseText.length ) {
try {
var data = JSON.parse(ajax.responseText); // = $items
}
catch(e) {
//json parse error
}
if (data[2]) {
centerPopup();
loadPopup();
}
citystatearr = ajax.responseText.split(",");
// ^^^^^^ I think you'll need to change this
city.value = citystatearr[0];
state.value = citystatearr[1];
}else{
}
}
}
And PHP :
include_once('../../../connect.html');
//perform lookup
$title = ($_GET['postal_code']);
$statement = $connection->prepare ("SELECT city, state FROM cities, states WHERE cities.state_id = states.state_id AND cities.postal_code = ?");
$statement->execute(array($title));
$statement->setFetchMode(PDO::FETCH_ASSOC);
$items = array();
while ($r = $statement->fetch()) {
//$arrayName = array($r = $statement->fetch());
$items[] = $r;
}
if (count($items) == '1'){
$newArray = $items[0];
echo $newArray['city'].",".$newArray['state'];
}elseif (count($items) == '0'){
echo "Doesn't exist".","."Doesn't exist";
}else{
$varios = array($items);
die(json_encode($varios));
}

javascript dynamic content not affected when ajax call

I am new to javascript, am using PHP variable for created link dynamically as given below
$addlink = '<button class="blueBtn btnSmall" id="current'.$product_id.'" onClick=addcart('.#$product_id.',"add")><span class="allitem"
<font color="#A2F3AB">Added</font></span></button>';
This my php variable created by dynamically like below.
Added
Added
Added
I want to change the content of all variable“ added” as“ add” by just one click,Am using ajax function for changing that text as given below..
function clearcart(msg) {
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('cartreturn').innerHTML = xmlhttp.responseText;
document.getElementsByClassName('allitem').innerHTML = "Add";
}
}
xmlhttp.open("GET", "/addcart.php?msg=" + msg, true);
xmlhttp.send();
}
But first link text only affected.. other is not affected how I can solve this problem

document.getElementsByClassName returns a NodeList. You have to iterate over all the elements:
var allItems = getElementsByClassName('allitem');
for (var i = 0; i < allItems.length; i++) {
allItems[i].innerHTML = 'Add';
}

See this question.
You can't do document.getElementsByClassName('allitem').innerHTML.
You can do document.getElementsByClassName('allitem')[0].innerHTML = "Add"
Do you have several elements with the class "allitem"? If you don't, then maybe you should use an id, instead of a class, and then call document.getElementById('allitem').innerHTML = "Add";

Select a dropdown list option, and set it as a javascript variable

Once a dropdown list option is selected, I would like to hold that selected option as a javascript variable.
To make this a little more complex, the variable should be held inside the page's main Ajax coding, so it is not lost when different Ajax content is loaded.
Here's my wonderfully basic form code:
<form name="searchLocations" method="POST">
<select name="locationName">
<?php
$sql = mysql_query("SELECT locationName FROM tbl_locations ORDER BY locationName ASC");
while ($row = mysql_fetch_array($sql)){
echo "<option value=\"owner1\">" . $row['locationName'] . "</option>";
}
?>
</select>
<button onclick="loadXMLDoc(indexSearchingSubmit);" id="searchingSubmit">Search</button>
</form>
and here is my main ajax code, where the form dropdown variable should be held so it can be used later:
<script>
window.onload = function () {
var everyone = document.getElementById('everyone'),
searching = document.getElementById('searching'),
searchingSubmit = document.getElementById('searchingSubmit');
everyone.onclick = function() {
loadXMLDoc('indexEveryone');
everyone.className = 'filterOptionActive';
searching.className = 'filterOption';
}
searching.onclick = function() {
loadXMLDoc('indexSearching');
searching.className = 'filterOptionActive';
everyone.className = 'filterOption';
}
searchingSubmit.onclick = function() {
loadXMLDoc('indexSearchingSubmit');
}
function loadXMLDoc(pageName)
{
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("leftCont").innerHTML=xmlhttp.responseText;
}
}
function get_query(){
var url = location.href;
var qs = url.substring(url.indexOf('?') + 1).split('&');
for(var i = 0, result = {}; i < qs.length; i++){
qs[i] = qs[i].split('=');
result[qs[i][0]] = decodeURIComponent(qs[i][1]);
}
return result;
}
xmlhttp.open("GET","../browse/" + pageName + ".php?user=" + get_query()['user'],true);
xmlhttp.send();
}
}
</script>
<!-- ends ajax script -->

Using jQuery:
$('[name="locationName"]').change(function() {
YOUR_VAR = $(this).attr('value');
});
Not using jQuery-
Add onChange() to your SELECT element, also added id attribute.
Add javascript onchange handler function, which just retrieves the selected value and sets your var
<select name="locationName" onChange="setSelected()" id="locationSelect">
function setSelected(){
var myselect= document.getElementById("locationSelect");
YOUR_VAR = myselect.options[myselect.selectedIndex].value;
}