We Keep Coding

Ajax trying to execute PHP page brings me to a new page

I am trying to get a live chat working using PHP and mysql and AJAX. It is almost completely functioning, except I cant seem to figure out how to submit the chat message without reloading a page. I have a page, sendchat.php, that takes input from the previous page and enters the data into a database. I am trying to use a text input field and when the user clicks the enter key, it would execute the PHP page with the details needed to send to sendchat.php without actually loading or refreshing the page. This is what I have so far:
<form id="send-message-area">
<p>Your message: </p>
<input type="text" id="sendie" maxlength = '100' onkeydown="onChatEnter(this);"></textarea>
</form>
</div>
</td></tr></table>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
function onChatEnter(str) {
if(event.key === 'Enter') {
$.ajax({
type: "GET",
url: "sendchat.php?msg=" + str ,
success : function() {
// here is the code that will run on client side after running clear.php on server
}
});
}
</script>
All it does is try to load the url, but its not trying to find sendchat.php or send the data. Instead it just tries to load a blank page. Where am I going wrong here? Everything seems spelled correctly and case sensitive. I check if the user pressed enter when they press a key. If they did, I am loading an AJAX function to execute a PHP page. Yet, it is not doing that. Just for FYI, I do not want a button there to be clicked.
EDIT:
I tried the suggestions below and still nothing. I decided to try a different approach now. Still doesn't work.
<script>
function updatechat(str) {
if(event.key === 'Enter') {
if (str=="") {
document.getElementById("sendie").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 (this.readyState==4 && this.status==200) {
document.getElementById("sendie").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","sendchat.php?msg="+str,true);
xmlhttp.send();
}
}
</script>
<p>Your message: </p>
<input type="text" id="sendie" maxlength = '100' onkeypress="updatechat(this.value);"></input>

Try this:
$("#send-message-area").submit(function(e) {
e.preventDefault();
e.stopPropagation();
});

I am not sure how.. But I fixed it.. I think it had to do with giving the input a name along with the ID. See below:
<script language="javascript" type="text/javascript">
function updatechat(str) {
if(event.key === 'Enter') {
if (str=="") {
document.getElementById("sendie").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 (this.readyState==4 && this.status==200) {
document.getElementById("sendie").innerHTML=this.responseText;
}
}
var planetloc = document.getElementById("loc").value;
chaturl = "sendchat.php?msg="+str+"&loc="+planetloc;
sendie.value="";
xmlhttp.open("GET",chaturl,true);
xmlhttp.send();
}
}
//-->
</script>
This was the code I used for the html:
<p>Your message: </p>
<input type='text' id='sendie' name='sendie' maxlength = '100' onkeypress='updatechat(this.value);'></input>
<input type='hidden' id='loc' name='loc' value='$chatroom'></input>";
I also added chaturl to combine the ajax page I needed along with the parameters passed to it. It seemed by creating a variable for that it solved other issues too.

AJAX magnific Popup not initialising after xmlhttprequest

I have a page containing a list of events, generated by a DB query, that the user can, for each event, click a button to register for the event. This fires a registration form (contained on event-registration.php) which is displayed via AJAX Magnific popup.
On normal pageload, the popup fires as expected as an AJAX type with the form embedded within the popup.
<a href='event-registration.php?eid=".$myrow['EID']."' class='ajax-popup-link' title='".$myrow['Tooltip']."' ><button type='button' class='".$myrow['StatusCSS']." buttonWrap'>".$myrow['StatusName']."</button></a>
$(document).ready(function() {
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
cursor: 'mfp-ajax-cur',
closeOnContentClick: false
});
});
However, the results also have a couple of filters that can be applied, based on type of event, location etc. These are handled by XMLHTTP requests to dynamically filter the search results without having to reload the whole page.
<select id="EventLocation" onchange="filterEventsLocation(this.value)" class="filter">
<option value="">Filter by Event Location</option>
<option value="1">Scotland</option>
<option value="2">North of England</option>
<option value="3">Midlands</option>
<option value='4'>London & South East</option>
<option value='5'>South West</option>
<option value="reset">Reset (Show All)</option>
</select>
function filterEventsLocation(str) {
if (str == "" || str == "reset") {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
xmlhttp.open("GET", "prt.getEvents.php", true);
xmlhttp.send();
/*document.getElementById("EventsList").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) {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","prt.getEvents.php?l="+str,true);
xmlhttp.send();
}
prt.getEvents.php contains the SQL query code as well as a div 'EventsList' which then displays the query results.
However, once a filter is applied, the popup box no longer works, instead when the user clicks the button they're just taken straight to the event-registration.php file with no sign of magnific popup at all.
Does anyone have any ideas why the popup isn't initialising once the filter has been applied to the list of events?
UPDATED JAVASCRIPT ADDING EVENT LISTENER:
function filterEventsType(str) {
if (str == "" || str == "reset") {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
xmlhttp.open("GET", "prt.getEvents.php", true);
xmlhttp.send();
/*document.getElementById("EventsList").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) {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
document.getElementById("RegisterBox").addEventListener("onclick", openPopup);
function openPopup() {
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true })
}
}
};
xmlhttp.open("GET","prt.getEvents.php?t="+str,true);
xmlhttp.send();
}
}

PHP closes program when using AJAX

I have a JS function that calls a PHP code using AJAX:
function switchCameraStatus() {
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("lastChange").innerHTML = xmlhttp.responseText;
} else {
document.getElementById("lastChange").innerHTML = "Error switchCameraDiv";
}
}
xmlhttp.open("GET","camera-control.php?function=switchCamera()", false);
xmlhttp.send();
}
The function called in PHP is:
function enableCamera() {
$command = '../scripts/videoOn.sh &';
exec($command);
echo "Camera enable";
}
The problem is that the camera turns off automatically in less than a second that is the same to say the process exits.
Edited: It stops when executing the .php on a browser, but It works on bash with the php file.php command. I tried with nohup, but it stops on the browser execution.

Ajax response to xml page to get title elements doesn't work

Can anyone tell me why I can't get the elements from an XML document? It doesn't print anything when I press the et Title button that i have implemented in the body section. Here's my code:
function MyF () {
var xmlhttp;
var txt,x,i=0;
var xx;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
xx = x[i].getElementsByTagName("TITLE");
document.getElementById("test").innerHTML=xx;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
}

xmlhttp.responseXML.documentElement is the problem of your troubles. Just use xmlhttp.responseXML.getElementsByTagName and you should be fine.

Javascript not loading on Ajax div load

I have a standard html page index.php and within this page I have a
<div id="alertMe">...</div>
I use a simple onclick function to do an AJAX change of this div. I wont paste the whole Ajax call.
xmlhttp.open("GET","message.php?msg=hello" , true);
message.php loads and I can display the $_GET['msg'] value in the alertMe div. However, I have a simple javascript alert which is in the file message.php
<script type="text/javascript">
alert("I am an alert box!");
</script>
I cannot get the alert to popup. Is this because I am trying to run javascript within a div load? I would have thought that was a common requirement.
Any ideas?
==== Including files =====
index.php
<html>
<script>
function loadMsg(moduleID) {
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("alertMe").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","message.php?msg=hello" , true);
xmlhttp.send();
}
</script>
<body>
<div id="alertMe"></div>
Load Message
</body>
</html>
message.php
<?php
echo $_GET['msg'];?>
<script type="text/javascript">
alert("I am an alert box!");
</script>

As some of the commentators have pointed out, <script>s inside an AJAX response do not get executed when the HTML is injected into the page by setting the innerHTML property of a DOM node. If you really need to execute those scripts:
function setHtml(element, html) {
element.innerHTML = html;
var scripts = element.getElementsByTagName("script"),
i = 0, script;
for (i; i < scripts.length; i++) {
script = scripts[i];
if (script.type = "text/javascript" && !script.src) {
eval(script.innerHTML);
}
}
}
Edit: I personally recommend against this. The "success" handler for your AJAX call should contain the logic you need to run post-AJAX.