Second ajax function not firing when called - javascript

I have two AJAX functions, one links to a file that edits a MYSQL table, and the other loads the new content to a <div>
The function to load the new data is not being fired.
This function links to a page called clear_tasks.php which TRUNCATEs a table in my database.
function clear_tasks(){
var xmlhttp;
if( window.XMLHttpRequest ){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject( 'Microsoft.XMLHTTP' );
}
xmlhttp.open('GET', 'script_files/clear_tasks.php', true);
xmlhttp.send();
}
This next function links to a page called task_info.php which echos a list of all the table entries.
function load_content_from_file( div_id, url ){
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(div_id).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
The <div> which should trigger these events looks as follows:
<div onClick="clear_tasks(); load_content_from_file('task_list', 'script_files/task_info.php');">Clear Tasks</div>
The load_content_from_file() function uses two parameters: div_id which is the div into which the content from task_info.php should be loaded, and url which of course is the source file itself (task_info.php)
The load_content_from_file() function is not being fired and I have to refresh the page to see the new content (I use load_content_from_file() in a $(document).ready() function).
How come the load_content_from_file() function is not firing? Ive tried using setInterval() and setTimeout() functions but to no avail.

I have checked your code on my own side. Both functions are 'fired clear_tasks()' and 'load_content_from_file' are firing when I click on 'Clear Tasks'.
The problem may be on your path with 'script_files/task_info.php', Or inside the task_info.php which is supposed to response the data for 'task_list' div.
Because if I return simple text by 'task_info.php', then the text would appended into 'task_list' div smoothly.

Related

e.preventDefault & e.stopImmediatePropagation not working

I got a problem where preventDefault() are not working properly.
This ajax request is working and I get the php page to show in the selected div, but the preventDefault is not working. For the map area that have a link I got redirected to the page, and for the ones that have no link, the address bar got an added "#" to the url. (in this last case, the ajax calls get correctly appended to the div, but still, preventDefault not doing its job).
After doing some digging I found out something : stopImmediatePropagation()
I was really hyped by this for a few seconds before seeing that it had absolutely no effect on my side too. I must be missing something but I can't find it.
More infos: The website is on joomla 3x, on localhost and showing K2 itemview categories on this ajax request.
Any help really really welcomed.
window.addEventListener('DOMContentLoaded', (event) => {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
let links = document.querySelectorAll('map area')
console.log(links)
for (let i = 0 ; i < links.length ; i++) {
let link = links[i]
link.addEventListener('click', function (e) {
e.preventDefault
e.stopImmediatePropagation()
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('maploc-loc').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", '../index.php?option=com_k2&view=itemlist&layout=category&task=category&id=1&id=Itemid=1',true);
xmlhttp.send();
})
}
});

onreadystatechange only called when blocked by alert()

I have a simple javascript html file that I am using to perform a function that is called from menu item that I added to the Internet Explorer default context menu (through windows registry). The menu click triggers the following javascript:
<script type="text/javascript">
var req = new ActiveXObject("Microsoft.XMLHTTP")
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
var serverResponse = req.responseText;
alert(serverResponse); // Shows "15"
}
}
};
req.open("POST", "https://www.googleapis.com/urlshortener/v1/url?key=myAPIkey", true)
req.setRequestHeader("Content-Type","application/json")
req.send('{"longUrl": "https://bing.com"}')
</script>
If I run this by opening the html file in IE it works fine. I get the response text. However, if I load it through the Context Menu the "onreadystatechange" function is never called.
If I add "alert("test") to the end of my script the test alert pops up followed a fraction of a second later by the serverResponse alert. I assume it has something to do with the alert blocking or forcing the browser to do something but I can't figure out why it works when loaded as a page but not through the Context menu.
I should note that the rest of the script DOES get called, so I know the menu item is working.
EDIT:
The above code snippet runs and displays an alert dialog containing the text of the response from the server whenever it's executed as an html page. If executed through the context menu I never get the "alert(serverResponse)".
However the following version does work when called from the context menu:
<script type="text/javascript">
var req = new ActiveXObject("Microsoft.XMLHTTP")
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
var serverResponse = req.responseText;
alert(serverResponse); // Shows "15"
}
}
};
req.open("POST", "https://www.googleapis.com/urlshortener/v1/url?key=myAPIkey", true)
req.setRequestHeader("Content-Type","application/json")
req.send('{"longUrl": "https://bing.com"}')
alert("test")
</script>
The only difference is the inclusion of the "alert("Test")" line at the end

How to implement jQuery's load() function in Javascript?

I am making an async call from a webpage to another resource at a url like /example/url/here.html which contains a partial view and inserting the response into the innerHTML of a div on the first page. However, the partial view here.html might contain <script> references and some inline script that doesn't get loaded/run when inserting to innerHTML.
I'm wondering if jQuery's load() function would solve this, and if so how to implement a similar function in javascript, as I cannot use jQuery.
Here's the code I'm using that isn't working:
function (elemId, url) {
var successCallback = function (responseText) {
var elem = document.getElementById(elemId);
elem.innerHTML(responseText);
};
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
successCallback(xmlhttp.responseText);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
I think what you want to do is load the html partial via jquery like this:
<div id="partial" ></div>
$('#partial').load('somefile.html');

Read page XML using Javascript

Hey guys, this is driving me absolutely insane so I wanted to ask the experts on this site to see if you know how to do it =)
I'm trying to create some javascript code that can read out elements of a web page (eg. what does the first paragraph say?). Here's what I have so far, but it doesnt work and I cant figure out why:
<script type="text/javascript">
<!--
var req;
// handle onreadystatechange event of req object
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
//document.write(req.responseText);
alert("done loading");
var responseDoc = new DOMParser().parseFromString(req.responseText, "text/xml");
alert(responseDoc.evaluate("//title",responseDoc,null,
XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue);
}
else {
document.write("<error>could not load page</error>");
}
}
}
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", "http://www.apple.com", true);
req.send(null);
// -->
The alert that keeps appearing is "null" and I can't figure out why. Any ideas?
This may be due to cross domain restriction... unless you're hosting your web page on apple.com. :) You could also use jQuery and avoid writing all that out and/or dealing with any common possible cross-browser XML loading/parsing issues. http://api.jquery.com/category/ajax/
Update:
Looks like it may have something to do with the source web site's Content-Type or something similar... For example, this code seems to work... (Notice the domain loaded...)
var req;
// handle onreadystatechange event of req object
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
//document.write(req.responseText);
//alert("done loading");
//alert(req.responseText);
var responseDoc = new DOMParser();
var xmlText = responseDoc.parseFromString(req.responseText, "text/xml");
try{
alert(xmlText.evaluate("//title",xmlText,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue);
}catch(e){
alert("error");
}
}
else {
document.write("could not load page");
}
}
}
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", "http://www.jquery.com", true);
req.send(null);
I also tried loading espn.com and google.com, and noticed they both have "Content-Encoding:gzip" so maybe that's the issue, just guessing though.

Javascript Not Executing In Dynamically Loading Content (AHAH)

I'm dynamically loading content into a div when the user clicks a link using this code:
function ahah(url, target) {
document.getElementById(target).innerHTML = 'Opening form...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}
function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}
}
function load(name, div) {
ahah(name,div);
return false;
}
This works fine, however I can't get any javascript to work in this new content, such as a jquery datapicker, or even just a document.write hello world. The js in there in the code, just not working. I've loaded the content directly in a browser and it works fine.
I'm at loss, any ideas greatly appreciated!
If you are using jquery anyways, might as well try using jquery.ajax().
You could include whatever scripts you need in the <head> and then call your datepicker or w/e in the callback function of your jquery ajax call.

Categories