I am quite new in using Ajax requests using Php. Currently i am having two Php pages called getdata.php and getdata1.php with 2 Div tags called txtHint and uniHint.
I want both the div tag should display the results from both the php pages. Unfortunately, I am not sure about the usage of two XMLHTTP request at the same, Kindly help.
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
document.getElementById("uniHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getdata.php?q1="+topping,true);
xmlhttp.open("GET","getdata1.php?q1="+topping,true);
xmlhttp.send();
Related
I want to use fetch api on my wordpress site. I watched many tutorials like Promise, Callbacks Async / Await. Fetch api related examples are usually on json post requests. How can I develop this code in the most make sense way? I am using it in Wordpress and it has to get information from 2 php codes.
<script type="module">setTimeout(function (){function s(id, endpoint) {
var xmlhttp;
var params = "/ajax/fetch/api/id/" + id + "/" + Math.floor((Math.random() * 100000));
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
}
};
xmlhttp.open("GET", params, true);
xmlhttp.send()
}s(<?php echo get_the_ID();?>,'<?php echo get_site_url(); ?>');}, 2000
)
</script>
I successfully added a video to a playlist but it is added multiple times (sometimes twice and sometimes more). Can anybody help?
$resourceId = new Google_Service_YouTube_ResourceId();
$resourceId->setVideoId($videoID);
$resourceId->setKind('youtube#video');
$playlistItemSnippet = new Google_Service_YouTube_PlaylistItemSnippet();
$playlistItemSnippet->setPlaylistId($playlistId);
$playlistItemSnippet->setResourceId($resourceId);
$playlistItem = new Google_Service_YouTube_PlaylistItem();
$playlistItem->setSnippet($playlistItemSnippet);
$playlistItemResponse = $youtube->playlistItems->insert('snippet,contentDetails', $playlistItem, array());
Solved it myself and I'm pretty proud of it :)
I realised that the ajax was triggering the above php script on mouseover. So every time I hovered away from the checkbox element the php script triggered multiple times.
I changed the mouseover code with the following:
$(function() {
$('input.Chilltrap').on('click', function(e) {
var chilltrap = this.id;
if( $("input[name=" + chilltrap + "]").prop('checked') ) {
checkboxstatusCt = "Yes";
}
else {
checkboxstatusCt = "No";
}
var url = "url.php";
var params = "c="+checkboxstatusCt+"&s="+chilltrap;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$("#error").html(xmlhttp.responseText);
$("#error"). fadeIn('fast');
setTimeout(function(){
$("#error"). fadeOut('slow');
},2000);
}
};
xmlhttp.open("GET", url+"?"+params,true);
xmlhttp.send();
});
});
I have a checkbox that whenever it is checked it calls another php script using Ajax, now on the php script I got 3 text boxes with a button, and whenever the Button is pressed, Ajax will be preformed to call another php script. all of that are preformed in the same page!, it is just like this
PHP -> Ajax -> PHP -> Ajax -> PHP
Is it possible, or too much to process?!
my first Ajax is:
<script type = 'text/javascript'>
function load(cb, pos)
{
if (cb.checked == false)
{
document.getElementById(pos).innerHTML="";
return;
}
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById(pos).innerHTML = xmlhttp.responseText;
}
xmlhttp.open('GET', "trying.inc.php?pass='true'", true);
xmlhttp.send();
}
</script>
The second Ajax that is in "Tring.inc.php":
<script type = 'text/javascript'>
function check()
{
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById('adiv').innerHTML = xmlhttp.responseText;
}
Parameters = "OldPass="+document.getElementById('OldPass').value+"&newPass="+document.getElementById('newPass').value+"&Confirm="+document.getElementById('ConfirmPass').value;
xmlhttp.open('POST', 'Trying2.inc.php', true);
xmlhttp.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(Parameters);
}
</script>
that calls "Trying2.inc.php".
now when I am at "trying.inc.php" page, Ajax works in calling "trying2.inc.php", but from the main page I can call "trying.inc.php" however, "trying.inc.php" can't call "trying2.inc.php", I hope it is clear because I don't know how to explain it more. If it is possible what can I do to achieve it, please support it with code. Im doing this for learning purposes please don't be harsh on me, Thanks in advance.
If you are using jquery, you could use bind/live on the elements newely added to the dom, thus you must be able to do this.
I am using an AJAX script to post data from a form and return the processed data from a php file. The script is below.
function loadXmlDoc(hashtag){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("ajaxify").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo_ajax3.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("hashtag=" + hashtag);
}
However I want to auto update the results. how would I get this to auto update so it checks for more data? Or what would be the best way?
There seems to be nothing about getting AJAX forms to auto refresh from what I've seen so any help would be greatly apprecaited
Try this way. It should auto-update the result every 10 seconds.
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("ajaxify").innerHTML = xmlhttp.responseText;
}
}
function loadXmlDoc(hashtag){
var repeat = function () {
xmlhttp.open("POST", "demo_ajax3.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("hashtag=" + hashtag);
};
repeat.hashtag = hashtag;
setInterval(function() { repeat(); },10000);
}
I have this function below and I call that function in a loop I get the alert n times but only n-1 or sometimes n-2 responses
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);
//document.getElementById("warnings_panel").innerHTML+=xmlhttp.responseText;
}
}
alert("in ajax)
xmlhttp.open("GET","getresponse.php?start="+ start + "&end=" + end,true);
xmlhttp.send();
I have made a class (that you can modify easily) for calling a function in loop and it calls the functions correctly. Maybe this could apply to your need.
(Also if anyone sees something wrong it's good to hear from others)
test.htm
<html>
<head>
<script type="text/javascript">
function myXmlHttp() {
/*constructor simulator*/
this.setPersitent=
function (file, onReadyFunc,params,loop)
{
myXmlHttpObj.loop = loop;
myXmlHttpObj.file=file;
myXmlHttpObj.onReadyFunc='myXmlHttpObj.'+onReadyFunc;
myXmlHttpObj.params=params;
myXmlHttpObj.mySetRequest();
}
this.setParams=
function ( params )
{
myXmlHttpObj.params=params;
}
<!--Standard initial code-->
this.mySetRequest =
function ()
{
request = false;
try { request = new XMLHttpRequest(); }
catch (trymicrosoft) {
try { request = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (othermicrosoft) {
try {request = new ActiveXObject("Microsoft.XMLHTTP");}
catch (failed) {request = false;}/*catch3*/}/*catch2*/}/*catch1*/
if (!request)
alert("Error initializing XMLHttpRequest!");
} /*func*/
this.mySendReq=
function()
{
var url = myXmlHttpObj.file;
request.open("POST", url, true);
//Some http headers must be set along with any POST request.
request.setRequestHeader
("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
request.setRequestHeader("Content-length", myXmlHttpObj.params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = eval(myXmlHttpObj.onReadyFunc);
request.send(myXmlHttpObj.params);
}
this.listenPHP =
function ( ) {
if ( request.readyState == 4) {
if ( request.status == 200)
{
alert(request.responseText);
myXmlHttpObj.loop--;
if(myXmlHttpObj.loop>0)
{
myXmlHttpObj.setParams("js_rand="+Math.random()+"");
myXmlHttpObj.mySendReq();
}
}//inner if
else{alert("status is " + request.status);}
}//outer iff
}//function
}//END
myXmlHttpObj = new myXmlHttp();
myXmlHttpObj.setPersitent
('getresponse.php', 'listenPHP',"js_rand="+Math.random()+"",3) ;
myXmlHttpObj.mySendReq();
</script>
</head>
<body >
</body>
</html>
and getresponse.php
<?PHP
echo 'I recived this random from js:',$_POST['js_rand'],'
this rand is from php:',rand(1,9999);
?>
onreadystatechange gets terminated when your function ends because the xmlhttp object gets removed as it is not a global variable. Am I right?
Better would be to put only the AJAX request in a function, so that the xmlhttp object is only created once (I used a shorter version to create the xmlhttp object in this example).
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
function request() {
xmlhttp.open('GET', 'getresponse.php?start=' + start + '&end=' + end, true);
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null);
}
Generally, this should work, but we need more information about how you actually run that loop to know what might be wrong.
I also added encodeURIComponent and changed the condition inside the callback function, because status isn't always 200 when readyState reaches 4.
function request(start, end) {
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open('GET', 'getresponse.php?start=' + encodeURIComponent(start) + '&end=' + encodeURIComponent(end), true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4)
if (xmlhttp.status == 200) {
alert(xmlhttp.responseText);
} else {
// status ≠ 200, output useful error message
}
};
xmlhttp.send();
}