Working on an AJAX website (HTML,CSS,JavaScript, AJAX, PHP, MySQL).
I have multiple javascript functions which take rows from mysql, wrap them in html tags, and embed them in the HTML (the usual usage of AJAX).
THE PROBLEM:
Everything is working perfect, except when I run the site with Firefox (for once its not InternetExplorer causing the trouble).
The site is currently in the developmental stage, so its offline, but running on the localhost (WampServer, apache, Windows XP SP3,VISTA,7).
All other cross-browser conflicts have been removed, and works perfectly on all major browsers including IE, Chrome, Opera and Safari, but I get absolutely nothing from the HTTPRequest (AJAX) if the browser is Firefox.
All browsers have the latest versions.
THE CODE:
I have a series of javascript functions, all of which are structured as follows:
function getDatay(){
var a = document.getElementById( 'item' ).innerHTML;
var ajaxRequest;
try{//Browser Support Code:
// code for IE7+, Firefox, Chrome, Opera, Safari:
ajaxRequest = new XMLHttpRequest();
} catch (e){
// code for IE6, IE5:
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser is not compatible - Browser Incompatibility Issue.");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState < 4){
document.getElementById( 'theDiv' ).innerHTML = 'LOADING...';
}
if(ajaxRequest.readyState == 4){
document.getElementById( 'theDiv' ).innerHTML = ajaxRequest.responseText;
}
}
//Post vars to PHP Script and wait for response:
var url="01_retrieve_data_7.php";
url=url+"?a="+a;
ajaxRequest.open("POST", url, false);//must be false here to wait for ajaxRequest to complete.
ajaxRequest.send(null);
}
My money is on the final five lines of code being the cause of the problem.
Any suggestions how to get Firefox and AJAX working together are most welcome...
Had to post the jquery one-liner that bunch of code translates into!
$("#theDiv").text("LOADING...").load("01_retrieve_data_7.php?a="+$("#item").text());
Look at that : http://translate.google.fr/translate?js=y&prev=_t&hl=fr&ie=UTF-8&layout=1&eotf=1&u=http://www.siteduzero.com/tutoriel-3-100294-l-objet-xmlhttprequest.html&sl=fr&tl=en
Google messes up the codes so take a look at the french version for codes : http://www.siteduzero.com/tutoriel-3-100294-l-objet-xmlhttprequest.html
Before investigating your code, make sure to disable any firefox addons you've got installed.
Both ABP and Firebug are known to interfere under certain circumstances when FF tries to execute js
Related
I am using AJAX to post (method: post) the details of a form (has 35 fields), to a PHP script that does an INSERT INTO and returns "Data Saved," to the javascript (not using jquery). The javascript pops up an alert() to display the message.
The AJAX part:
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
//alert("object found");
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("loader_datasave").style.display='none';
alert(xhttp.responseText);
show_modal_writedb(false);
}
};
xhttp.open("POST", "writetodb.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(str);
Server: The server is installed on a laptop connected to the LAN. I am using USBWebserver as the server software on Windows 8.
Client: There are about 7 users using the form. It runs smoothly mostly and takes about half a seconds before the message pops up, however sometimes the form takes more than a minute to return the message. It would not even load other pages saved on the server while the user is waiting for the message from the PHP script. The delay affects everyone using the form.
I thought that, the session locking by PHP, could be the reason, so I used session_write_close(), right after a session_start(), since I don't write anything to the session variables.
I am not sure what is taking time. I have tried Google Chrome, Internet Explorer, Edge, and Firefox, however the results are the same.
Should I use other servers like Wamp, or Xampp? All your help is highly appreciated.
This is going to be about the same issue as my previous question (Loading a php file into cross domain page with dynamic element height) but now with trying to use a new method.
I found a way to load my script into an ajax div locally but there still remains the issue of cross domain security not allowing the xmlhttprequest to call to my other server.
The issues here is still that on Site A, which is my web server that I have full access to and is hosting my scripting files, I can do whatever I want with the script and make it work. On Site B, which is the on Enjin server, I have no access to host scripts. I can place .js scripts there and run those, but I can't use php from their servers which creates my issue. To get around this right now, I am using an iframe, which is inefficient to say the least. It can't load a dynamic height from the contents being generated by the php file it is calling from Site A. I planned on fixing this with loading this into a div via AJAX but I am having a few issues with that.
My AJAX script is this:
<pre><code>function Ajax(){
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("No AJAX!?");
return false;
}
}
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
setTimeout('Ajax()',10000);
}
}
xmlHttp.open("GET","http://sitea.com/twitch_api/stream_header.php",true);
xmlHttp.send(null);
}
window.onload=function(){
setTimeout('Ajax()',10000);
}
</code></pre>
then obviously the div is following the script.
the script that this is calling is this:
http://pastebin.com/mC8kakKJ
Sorry, can't get all the code to parse correctly in the code block but i made a pastebin copy of the script
My questions here become. What does my script need to look like for use with easyXDM? I have no experience with a library like this or cors, so an example markup would be awesome.
I am also not all that versed in javascript/ajax which leads to my second question. I my ajax code listed above, how would i go about having that div populate with the desired file immediately then update every 300000ms (5 minutes).
Any help is appreciated. Have a post on the Enjin forums but not too many there have experience going to this depth.
You could use $.getJSON(), Enjin pages use jQuery. Just make sure your server response is wrapped in a callback function so the cross site request is allowed.
What is the best way to just run a PHP script when the user clicks a button? It sends nothing back to the user whatsoever! (The PHP script only sends a PostgreSQL query.)
I have only found ways of returning data. I only want to run it.
You're looking for AJAX (asynchronous javascript). Just have a javascript function call the target script and either don't return anything OR don't do anything with the return value. Alternately, you could simply have form that submits to a hidden iframe on the page.
This is the best I could come up with. Hope it was what you were looking for.
/* Function that we create to handle backwards compatiblity to browsers.
What it does is to try diffrent types of XMLHttpRequests. */
function getXMLHttp() {
var xmlHttp;
try {
//Firefox, Opera, Safari, Chrome, IE7+
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
//Internet Explorer 6
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//Internet Explorer 5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
return false;
}
}
}
return xmlHttp;
}
// Here, we send the request
function send() {
/* We say the variable xmlHttp is the function
where we try the diffrent XMLHttpRequests*/
var xmlHttp = getXMLHttp();
// We open your PHP file...
xmlHttp.open("POST", "yourphpfile.php", true);
// ...and send it to the server
xmlHttp.send();
}
A little brief
Since you're not getting anything back to the user, you use POST and not GET. It sends a request to the server to the file. And as you said in your question, something was sent to a PostgreSQL server. However, that PHP script is runned on your hosting server that supports PHP.
The most basic way to do this would be an html form.
<form action="somePHPfile.php" method="post">
<input type="button" value="Run somePHPfile.php" />
</form>
You could also do what Ben D suggested, but that's not the most basic way of doing this. Using jquery:
$("#YOURbuttonID").click(function(){
$.post("yourPHPfile.php", function(){
alert("Success!");
});
});
You will need to use Ajax and then you can update a div etc so user knows if the query was executed properly or not.
Basically I call a function when user clicks save, this function takes the content from textarea and passes it to a php file that adds it to the database.
I have a few js functions I use, one for switching between content and another for saving it.
Anyway if i just click save without editing anything in the textarea, then everything works fine. However if I edit the text in any way (Even removing a letter and adding it back again) parts of the functions stop working. The part that is responsible for modifying content. I have marked the part that stops working.
I have tested to see whether it was the content I was passing.. it was not.
Now it seems like the textarea itself gets messed up and wont show new information.
I tested it by putting 2 textareas, one that holds the content to be stored and is edited, and another just to display changes (changes which stop working on the main text area).
function saveContent() {
document.getElementById("editing").style.display = 'none';
document.getElementById("observing").style.display = '';
document.getElementById("contentArea").readOnly = true;
if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
{
xmlhttp = new XMLHttpRequest();
alert("first if");
}
else // code for IE6, IE5
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//alert("second if");
}
xmlhttp.onreadystatechange = function() {
//alert(xmlhttp.readyState+" : "+xmlhttp.status);
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert("finished");
document.getElementById("contentArea").innerHTML = "working"; < ---- * * THIS PART STOPS WORKING IF I MODIFY THE TEXTAREA IN ANY WAY * *
}
}
//var Content = document.getElementById("contentArea");
var content = "contenttt";
//alert(content);
xmlhttp.open("get", "saveContent.php?q=" + content_id + "&content=" + content, true);
xmlhttp.send(null);
}
In case the comments given don't solve your problem, a few suggestions what to work on.
Firstly, maybe the problem is that you're using content variable with capital C, or maybe that's just here. But I know that chrome tends to mess up ajax calls with undefined variables.
//var Content = document.getElementById("contentArea");
var content = "contenttt";
Secondly, send text variables in POST.
xmlhttp.Open("POST","saveContent.php?q=" + content_id, false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send("content=" + content);
Lastly, consider using JQuery. There is reason why it is so popular. It is easy to use, problems like these rarely occur and works on all known browser.
$.post('saveContent.php', {"q": content_id, "content": $('#contentArea').val()}, function(data){
alert(data);
});
I am using AJAX in form of jQuery for my client side scripting and twitter bootstrap for the layout, also using php for my server side scripting.
But the problem is the application runs fine on all other web explorers apart from Internet Explorer, does anyone have an idea to why this is happening, I cant even open a drop down in IE and I've tried both version 8 and 9.
here is a basic example of my jquery call to the server
function check_module() {
var option = $('#modules option:selected').attr('value');
$.post('modulesDropDown_1.php', 'option='+option,
function(data){
var obj = jQuery.parseJSON(data);
console.log(obj);
var name = $("#modules option:selected").text();
$("#moduleCode").html(obj.allInfo.code);
});
return false;
}
i have a lot of these in my code, where the im calling to the server and returning it as json to the client... for instance i have a drop down which populates another drop down below soon as a value first drop down is chosen (AJAX), but the second drop down should then update the page based on the value but it just does not work in IE.
Older versions of IE use a different mechanism for creating AJAX requests. Try something like this:
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");
}
although since it doesn't run on IE 8 and 9 that might not solve it.
It would help to see a snippet of code.
(Example from http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first)