Path issue in ajax ,in a wordpress site - javascript

I have a wordpress site
for ex, www.test.com
There is a js file (forms.js)in the script folder of mytheme folder.
ie (theme/mytheme/script/forms.js)
There is a mail.php page in mytheme folder
ie (theme/mytheme/mail.php)
Following is the content of forms.js
function submitFormToEmail()
{
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("results").innerHTML=xmlhttp.responseText;
alert("Form received, thank you!");
}
}
xmlhttp.open("GET","/mail.php",true);
xmlhttp.send();
}
I will call "submitFormToEmail",if we click a image in the page *www.test.com/hello_test*
Where "hello_test" page lies in theme/mytheme/.
But the mail.php is not working.
Let me know ,how can we set the path of mail.php in the function "submitFormToEmail", so that it will work

Calling /mail.php will look for the mail.php file at http://www.test.com/mail.php. Just fix the path?
Either directly code the correct path into the javascript file or use php to dynamically get it using get_bloginfo. There are several ways to do this, but probably the best way is to create a hidden element on the page that contains the url and then fetch this when building your ajax request. Otherwise you'd have to set php to parse js files and include it in there. Doesn't seem like a good way to me though.
get_bloginfo('template_url');

Related

Can't get xmlhttp.responseText value

I am trying to get the xmlhttp.responseText value, but I have no response from the xmlhttp. I was wondering if there is something wrong with my code:
SCRIPT
var xmlhttp;
function show(){
loadXMLDoc("includes/edit.php",function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
});
}
function loadXMLDoc(url,cfunc){
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=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
HTML
< a href="#" style="text-align: right; font-size: 10px;" onclick="show()">SHOW</a>
EDIT.PHP
print "1";
I don't see anything wrong with your code per se, but there are a lot of interactions that are opaque from this code snippet.
I can offer some troubleshooting tips, however:
Add a console log in your callback function (the one that you are running alert() in). Just "console.log('function is running');" on the first line. Then see if you get that far. I would put one in the opening line of show() as well -- maybe your click event isn't doing what you think it is.
Have your PHP server-side file write something to a log so you can be sure that the request is being received where you think it is.
Open your browser developer console and watch the network panel. You should be able to see the entire XHR transaction there. Is it being sent at all? If so, is it returning the content you expect?
If all this doesn't help, setup a test in jsfiddle and post the link here. We'll be able to help in a lot more detail that way.
Good luck.

Tracking visitor with javascript

I have one master domain : www.domain-A.com
I have some domains that call a javascript file on this principal domain.
For example, www.domain-B.com use the file www.domain-A.com/file.js
In this file.js script, I'm trying to put cookie (that's ok) and send some data to www.domain-A.com like the query string, the referrer and the user agent.
I've use that code in my 'file.js' (found on W3School website) :
//Envoi des données
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)
{
var json = xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://www.domaine-A.com/script.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(urlParams + "&" + infParams + "&" + u);
It's working very well on FF and Chrome. But, not on IE because I have this error :
This page is accessing information not under its control
So, I've look a little how analytics send data to Google and i seem's use a GIF or something like that but i don't know how to do it in the good way.
My goal is send data from domain-x.com to domain-a.com with javascript.
What version of GA are you using? If you are on analytics.js (Universal Analtyics) You can use ajax and the measurement protocol to call page views on the other site. The measurement protocol lets you make HTTP requests and send raw data right into to GA.
I have used it before to track interaction with interactive infographic that I had on another site.
For your case you can use the following paramaters
www.google-analytics.com/collect
v=1 // Version.
&tid=UA-XXXX-Y // Tracking ID / Web property / Property ID.
&cid=555 // Anonymous Client ID.
&t=pageview // Pageview hit type.
&dh=mydemo.com // Document hostname.
&dp=/home // Page.
&dt=homepage // Title.

xmlhttp status 200 message when adding DOCTYPE to page

I have the following code placed into a function and when the function is called it loads my XML file and displays it in a message box:
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)
{
alert(xmlhttp.responseText);
} else
{
alert('Panel not communicating.Reason: '+xmlhttp.status);
}
}
xmlhttp.open("POST","myfile.xml",false);
xmlhttp.send();
The above code does everything like it's meant to.
However, as soon as I add the following code to the top the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
when I load my function it comes up with the following message:
Panel not communicating.Reason: 200
however it still loads my XML file like how I want it to.
After searching around it says that xmlhttp status 200 means "OK"
Does anyone know why it's displaying this message?
It probably means that xmlhttp.readyState is transitioning to a state other than 4 ("complete") -- this can occur if the whole page doesn't download instantly, which is likely. Your function should probably return immediately when xmlhttp.readyState != 4, rather than treating that as an error condition.
You should also strongly consider using a Javascript framework such as jQuery here, as it will save you a lot of unnecessary effort. For instance, all of the code you've got here can be reduced to:
$.post("myfile.xml", function(data) {
alert(data);
}).error(function() {
alert("Panel not communicating.");
});
I think the code you added is not supposed to appear in XML, it was for HTML, so the browser may fail to parse the file, which made the xmlhttp.readyState==2, I am not sure for this value, may you check it.

How to send a parameter from java script function to a servlet

I want to send some parameters to a servlet with the help of javascript.....
In my jsp page there is a parameter "a[j]" which is generated dynamically and on a click the javascript function invoke and this a[j] parameter which is "ur" in java script function should be send to a servlet named Rank.....
Tell me which function should i use to forward the parameter...
IN Jsp:
<%out.println(a[j+1]);%>
Javascript:(rank)
<script type="text/javascript">
function rank(ur)
{ ??????????("Rank?set="+ur);
}
</script>
In Servlet(Rank):
String s = (String)request.getParameter("set");
You could do
window.location="Rank?set="+ur;
or
document.body.innerHTML+='<form id="myform" action="Rank" method="get"><input name="set" value="'+ur+'" /></form>';
document.getElementById('myform').submit();
Edit:
Ah, I think that what you need is AJAX, a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page.
Then the code is:
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){
//only if you want the response
document.getElementById("log").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","Rank?set=" + ur,true);
xmlhttp.send();
}

Load html file into a div with javascript?

I have a div which I want to populate with different html files from my server. Is there a simple way to do this? All I ever find are jquery samples and I don't want to use a library.
I have tried this:
document.getElementById('main').innerHTML = 'menu.html';
But that obviously just loaded text!
Some simple Ajax will do the trick for you. This is untested, but should give you the right idea:
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("main").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","menu.html",true);
xmlhttp.send();
Simplest way is to use a library, which the entire point of, they wrote the code for u. right?
Use the jQuery example. It is as good as it gets.
Is there a simple way? No, not without a library. That being said, you can do it on your own if you choose - that might be all that's necessary for you to come crawling back into the arms of jQuery ;)
Resource: XHR on Mozilla Developer Network

Categories

Resources