Problem
I'm trying to upload file using XMLHttpRequest and it seems to work only with small file (such as under 2MO of size). I tried many things so far and came to code shown at the end of the post. But, there is nothing to do; I keep getting the ::ERR_CONNECTION_RESET error. It is not a code issue as under 2MO files are getting unploaded correctly... What am I forgetting? I know this is probably a IIS or web.config issues but I can put my finger on it by googling this problem.
Error given by Chrome
POST WEBSITEANDSERVICEURL/Service/MyService.asmx/UploadFilesWithAJAX net::ERR_CONNECTION_RESET
handleFileSelect
x.event.dispatch
v.handle
Javascript
<script type="text/javascript">
$(function() {
$('#<%= files.ClientID %>').change(handleFileSelect);
});
function handleFileSelect(e) {
if (!e.target.files || !window.FileReader) return;
var fd = new FormData();
var file = document.getElementById("<%= files.ClientID %>");
for (var i = 0; i < file.files.length; i++) {
fd.append('_file', file.files[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '<%= ResolveURL("~/Services/MyService.asmx/UploadFilesWithAJAX") %>', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
xhr.upload.addEventListener("progress", updateProgress, false);
xhr.send(fd);
}
function updateProgress(oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total;
$("#progress").text(oEvent.loaded + " ON " + oEvent.total);
}
}
</script>
HTML Markup
<asp:FileUpload ID="files" runat="server" multiple="true" />
<br />
<table id="selectedFiles">
</table>
<span id="progress"></span>
MyService.asmx
<ScriptService()> _
<ToolboxItem(False)> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
Public Class AJAXServices : Inherits WebService
<WebMethod(EnableSession:=True)> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> _
Public Function UploadFilesWithAJAX()
' Some code which work fine, I'm sure of it.
End Function
End Class
Web.config
<!-- [...] -->
<system.web>
<httpRuntime maxRequestLength="2097151" executionTimeout="180" /><!-- MAXIMUM DURING TESTING -->
<!-- [...] -->
</system.web>
<!-- [...] -->
Ok, I solved it...
Solution
If this happen to someone else, be sure to at least access to Context.Request.Files once in your WebService.
Because, during my tests, I was simply :
Public Function UploadFilesWithAJAX()
Return "RETURN SOMETHING"
End Function
But it was not enough... If I only access to Context.Request.Files like :
Public Function UploadFilesWithAJAX()
Dim files = Context.Request.Files '<---- Simply adding this... make it works :|
Return "RETURN SOMETHING"
End Function
It works.
Hope it helps someone else.
By the way, if someone can explain me why it is working by doing this.
In your web config, you defined maxRequestLength="2097151" which is around 2mb, for this reason if you try to upload files more than 2mb it will fail eventually.
Example config below( it will allow up to 2gb )
<httpRuntime maxRequestLength="2048576000" executionTimeout="300" />
Related
this js is at index.html between "<script type="text/javascript">"
function callanular() {
peticion_http = new XMLHttpRequest();
peticion_http.onreadystatechange = showContent;
peticion_http.open('GET', 'anular.js', true);
peticion_http.send(null);
function showContent() {
if(peticion_http.readyState == 4) {
if(peticion_http.status == 200) {
document.getElementById("notice").innerHTML=peticion_http.responseText;
}
else
document.getElementById("notice").innerHTML="ERROR "+peticion_http.status;
}
}
}
index.html HTML code I have, looking to show box on div with id=notice
<div id="notice"></div>
<input type="submit" value="RESTRICTED ACCESS" onclick="callanular()">
At the same folder I have anular.js created, I want to show a simple box with a text, in this case I only have an alert to know it's working.
window.onload = function() {
return (alert("asdasdsa"));
}
Whatever I write I can only receive the literally code. e.g.
window.onload = function() {return (alert("asdasdsa")); }
You have to include the imported code in a script tag. Adding it to document body in a doc will not work. See answers here
Is it possible to load new Javascript files with AJAX?
So this is how I solved it by using Jquery in first case, AJAX in second case.
First Case
Javascript code on index.html
function callanular() {
$.getScript("anular.js", function(){
//You can write an alert or something
//In my case it wasn't necessary.
});
}
anular.js content
document.getElementById("notice").innerHTML = "<div id='nopul' onclick='getText()'>YOU SHOULDN`T PRESS THIS BUTTON</div><br>";
Back to index.html where I got:
<div id="notice"></div> //here anular.js is going to show the div box
<input type="submit" value="RESTRICTED ACCESS" onclick="callanular()">
At that point it was working fine as I wanted. So I added AJAX to get text from txt file simply doing a call to
XMLHTTPRequest();
peticion_http.open('GET', 'text.txt', true);
-
Second Case
anular.js file
<div id='nopulses' onclick='getTexto()'>YOU SHOULDN`T PRESS THIS BUTTON</div><br>
index.html javascript code
peticion_http = new XMLHttpRequest();
peticion_http.onreadystatechange = showContent;
peticion_http.open('GET', 'anular.js', true);
peticion_http.send(null);
function muestraContenido() {
if(peticion_http.readyState == 4) {
if(peticion_http.status == 200) {
document.getElementById("notice").innerHTML=peticion_http.responseText;
}
else
document.getElementById("notice").innerHTML="ERROR 404 Not Found "+peticion_http.status;
}
}
I have installed Rand Dusing's BLE Cordova Plugin and following his example to initialize bluetooth but I cannot get past that. Here is my index.js
var blePlugin = window.bluetoothle;
function bleInitialize() {
var paramsObj = {
request: true,
statusReceiver: true
};
document.getElementById("BTHWStatus").innerHTML = 'Initialze BLE: Checking BT status...';
blePlugin.initialize(bleInitializeSuccess, bleInitializeError, paramsObj);
document.getElementById("BTHWStatus").innerHTML = 'Initialze BLE: Complete';
return false;
}
function bleInitializeSuccess(obj) {
if (obj.status == "enabled")
document.getElementById("BTHWStatus").innerHTML = 'BT is turned ON';
else
document.getElementById("BTHWStatus").innerHTML = 'BLE:Initialize: Unexpected error';
}
function bleInitializeError(obj) {
document.getElementById("BTHWStatus").innerHTML = "Initialize Error : " + JSON.stringify(obj);
}
This is index.html
<h3>Bluetooth Test App</h3>
<br>
<div>
<a id="BTHWStatus">BT is turned OFF</a>
<br/>
<br/>
<span>Enable/Disable Bluetooth :</span>
<input type="checkbox" id="BTSelect">
<button id="BTApply">Apply</button>
<br/>
</div>
Can anyone tell me if I have anything incorrect in theindex.js file that may prevent the plugin to not work? I have verified that the plugin is installed correctly in the command prompt using command cordova plugin.
Are the callback functions coded correctly or did I miss something? I can get the blePlugin.initialize function to print Initialze BLE: Checking BT status... on the app page but nothing after that.
Thanks and appreciate your help.
Is your application code executed after the deviceready event? From your code I can't see it so the problem could be this.
If you don't wait for the deviceready event, the js code will work but the Cordova related functions will be not available.
Context : I'm working on a site that runs on my university's server (IIS, not Apache), no way to use PHP.
I want the site to be so simple that people with very little HTML/CSS/js knowledge can put new content when I'll be done with it. I'm a grad student in health sciences and I've learned HTML, CSS, etc. by myself since a few years (so I'm definitely not a pro), so pardon me if my question is a little naive.
I'd really need some script/tool that would allow me to :
Get content from an external file (blog post) on the server (let's say a list of ".html" files located in a folder on the server, let's say the folder "/blog-posts/", containing a bunch of files named "jan-15.html", "feb-15.html", etc.)
Pick the last 4 files (4 most recent)
Insert this content at a precise point in a html file
(Optional, but it would really be nice) Pull the date the file was last edited, put it in a string and insert said string before the blog post, in the home page
So :
Do anyone know if anything like this already exists ?
If not, do you guys think it's possible with some js/jQuery to "manipulate" external files like that ?
If it's possible, any hints how :) ?
Thanks a million times, I know I'm asking a lot, but I've been searching for a viable solution for this for the last few months... It's my first time writing here but I've been an avid reader since a very long time.
Have a great day !
You can store a simple blog configuration as a JSON object and update it as you add new posts. Let's say you have the files jan.html and feb.html in your blog-posts folder.
Now in the main folder, create a file content.json as follows this:
{
"posts": [
{ "uri": "feb.html", "date": "2/12/15" },
{ "uri": "jan.html", "date": "1/3/15" }
]
}
Now you can get the blog content with AJAX requests from JavaScript. Example:
<script>
function Init(posts)
{
var e = document.getElementById('content');
var s = '';
posts.forEach(function(post)
{
console.log(post.content);
s += '<div><h2>Date: ' + post.date + '</h2><p>' + post.content + '</p></div>';
});
e.innerHTML = s;
}
function LoadContent(config)
{
var remain = config.posts.length;
var posts = [];
config.posts.forEach(function(post)
{
var req = new XMLHttpRequest();
req.open('GET', 'blog-posts/' + post.uri, true);
req.onload = function()
{
remain--;
posts.push({ content: req.responseText, date: post.date });
if(remain === 0)
{
Init(posts);
}
};
req.send(null);
});
}
function LoadConfig()
{
var req = new XMLHttpRequest();
req.open('GET', 'content.json', true);
req.onload = function()
{
LoadContent(JSON.parse(req.responseText));
};
req.send(null);
}
window.addEventListener('load', LoadConfig);
</script>
<div id="content"></div>
I'm trying to implement an image uploader which will allow users to upload pictures and set them as the background of a div (in this case .mm11 is a post-it style card which contains a 'choose file' and an 'upload file' button and starts off with no background image
I have worked out how to upload the pictures to a folder in my tomcat directory, and I can display them using
<img src='uploads/<%=fileName%>' />
but I'm struggling to set the picture as the background! Any advice would be much appreciated, have been struggling with this for hours..
<div id="uploadsContainer" class="mm11Container" style="top:100px; left: 100px;">
<div id="g" class="mm11 card front face">
<!--button id="uploadbutton" type="button">Upload Image11</button-->
<form action="
<%# page import="java.io.*,java.util.*, javax.servlet.*" %>
<%# page import="javax.servlet.http.*" %>
<%# page import="org.apache.commons.fileupload.*" %>
<%# page import="org.apache.commons.fileupload.disk.*" %>
<%# page import="org.apache.commons.fileupload.servlet.*" %>
<%# page import="org.apache.commons.io.output.*" %>
<%
File file ;
String fileName = "";
int maxFileSize = 5000 * 1024;
int maxMemSize = 5000 * 1024;
ServletContext context = pageContext.getServletContext();
String filePath = context.getInitParameter("file-upload");
// Verify the content type
String contentType = request.getContentType();
//if (contentType.indexOf("multipart/form-data") >= 0) {
DiskFileItemFactory factory = new DiskFileItemFactory();
// maximum size that will be stored in memory
factory.setSizeThreshold(maxMemSize);
// Location to save data that is larger than maxMemSize.
factory.setRepository(new File("uploads/"));
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("ISO-8858-2");
// maximum file size to be uploaded.
upload.setSizeMax( maxFileSize );
try {
// Parse the request to get file items.
List fileItems = upload.parseRequest(request);
// Process the uploaded file items
Iterator iter = fileItems.iterator();
while ( iter.hasNext () ) {
FileItem fi = (FileItem)iter.next();
if ( !fi.isFormField () ) {
// Get the uploaded file parameters
String fieldName = fi.getFieldName();
fileName = fi.getName();
boolean isInMemory = fi.isInMemory();
long sizeInBytes = fi.getSize();
// Write the file
if( fileName.lastIndexOf("\\") >= 0 ){
file = new File( filePath + fileName.substring( fileName.lastIndexOf("\\"))) ;
}
else {
file = new File( filePath + fileName.substring(fileName.lastIndexOf("\\")+1)) ;
}
fi.write( file ) ;
}
}
} catch(Exception ex) {
System.out.println(ex);
}
%>"
method="post" enctype="multipart/form-data">
<input class="uploads" type="file" name="file" size="50"/>
<input class="uploadFile" type="submit" value="Upload File"/>
<script type="text/javascript">
/*$(this).parents().eq(2).css('background-size', '100%');$(this).parents().eq(2).empty().css('background-image', 'uploads/<%=fileName%>');*/
$('.mm11').css('background-image', 'uploads/<%=fileName%>');
alert("here filename = "+'uploads/<%=fileName%>');
</script>
<!--img src='uploads/<%=fileName%>' /-->
</form>
</div>
</div>
I have also tried ajax by replacing the code in the script tags with
var ajx=new XMLHttpRequest();
ajx.onreadystatechange=function()
{
if (ajx.readyState==4 && ajx.status==200)
{
$("#g").css('background-image', 'uploads/<%=fileName%>');
}
}
ajx.open("GET","index.jsp",true);
ajx.send();
But this doesn't work either..to test I was correctly accessing the div, I added this to the css line:
$("#g").empty().css('background-image', 'uploads/<%=fileName%>');
which does clear the div...so why isn't the background image being set??
Another possibly related problem is that if I don't include the line
if (contentType.indexOf("multipart/form-data") >= 0)
(currently commented out), the alert pops up anyway the first time I visit the page, and fileName is set to the last file I tried to upload. However, if I DO include it, I get a Null Pointer Exception as contentType is null...does anyone know what this is about?
Your code:
background-image', 'uploads/<%=fileName%>'
Correct code:
background-image:url("uploads/<%=fileName%");
slightly different.
Hope it helps.
I am trying to load 2 scripts (or more) on one page and Only the 1st one is working. I do not have access to edit the javascript so I cannot make changes to it.
Here is the code:
<div style="z-index:0; min-height:600px;">
<script language="javascript" src="http://tickettransaction.com/?bid=1202&sitenumber=0&tid=ticket_results2&evtid=2175269"></script>
<noscript></noscript>
</div>
<div style="z-index:0; min-height:600px;">
<script language="javascript" src="http://tickettransaction.com/?bid=1202&sitenumber=0&tid=ticket_results2&evtid=2175270"></script>
<noscript></noscript>
</div>
When I run the page, the 1st one loads fine but the second one does not. Any help is greatly appreciated.
Jsfiddle links:
Not working: http://jsfiddle.net/6E6ZC/
Working seperately 1: http://jsfiddle.net/5LZ8d/
Working seperately 2: http://jsfiddle.net/SQ778/
DO NOT REMOVE CACHE.
What is happening is that the browser thinks it is being asked to retrieve the same file on each request.
I had the same issue and here is how to resolve it.
Add one more querystring paramater like I have. I added the '&t='+ new Date().getTime()
'/api/drawings?a=e&f=img&id=' + eID + '&t=' + new Date().getTime()
Will work like a champ!
Here is a way to dynamically add the scripts to the page, and this is a FOR SURE WILL WORK WAY.
<script type="text/javascript">
setTimeout(function () {
var script1 = document.createElement('script'),
script2 = document.createElement('script');
script1.setAttribute('type', 'text/javascript');
script1.setAttribute('id', 'script1');
script1.setAttribute('src', 'http://tickettransaction.com/?bid=1202&sitenumber=0&tid=ticket_results2&evtid=2175269&t=' + new Date().getTime());
script1.setAttribute('type', 'text/javascript');
script1.setAttribute('id', 'script2');
script1.setAttribute('src', 'http://tickettransaction.com/?bid=1202&sitenumber=0&tid=ticket_results2&evtid=2175269&t=' + new Date().getTime());
document.getElementsByTagName("head")[0].appendChild(script1);
document.getElementsByTagName("head")[0].appendChild(script2);
},500);
</script>
**With the script above you do not have to add the scripts statically. Just let the script that I've provided run.
This is all assuming that you're not attempting to load two JS files with the same exact script in each file. If your trying to continually check for changes you only need one file and an interval. "setInterval(function(){//this would be something totally different and a lot more work})"
You may have a caching problem. Try setting headers on the JavaScript so that it doesn't allow browser caching.
There is no caching problem and both scripts load correctly with a http 200 status message. When used separately, they produce results but when used together the 2nd one doesn't produce any result.
This could be happening as 2nd script expects something in the page where it can put its contents, but it doesn't find there s it was removed by 1st script. This looks to me as the most probable cause.
Example:
http://jsfiddle.net/6E6ZC/
<div style="z-index:0; min-height:600px;">
<script language="javascript" src="http://tickettransaction.com/?bid=1202&sitenumber=0&tid=ticket_results2&evtid=2175269"></script>
<noscript></noscript>
</div>
<div style="z-index:0; min-height:600px;">
<script language="javascript" src="http://tickettransaction.com/?bid=1202&sitenumber=0&tid=ticket_results2&evtid=2175270"></script>
<noscript></noscript>
</div>
Okay, I feel bound to answer this one after seeing so many wrong turns.
Cache or not is a non-issue. Even if the browser does cache the request (and it most likely will, since the URLs are exactly the same), it all depends on what the loaded code is supposed to do.
Unless the code changes the name of its functions and/or variables on the fly or does other very smart things, including basically the same code a second time will very likely overwrite the first copy, thus doing nothing more than if the file had been included only once.
I would be very surprised if the guys at http://tickettransaction.com did design an interface relying on the user adding some random junk at the tail of the URL to allow a second execution of the very same request result on the same page.
Would they have wanted to support such an usage, they would simply have added a cache-control: no-cache or equivalent directive in their response headers.
But after all, I've seen weirdest things in my programmer's life.
Maybe the guy at tickettransaction.com was badly hungover the day he coded that or something?
To get rid of this cache false problem, simply open your dev tools and watch the network traffic. You will most likely see the request being fetched twice from the cache (or once from the server and once from the cache if you hit Ctrl+F5).
If you really want to have your request fetched twice from the server, simply disable the cache, and make sure you get a full server transfer twice.
Having jumped through all these hoops, you will very likely witness the same result, namely the second response code overwriting the first.
Last update.
Just to get rid of this caching non-issue, I added a variable parameter in the URL.
I used the dev tools to make sure the browser was NOT caching the second request.
Cache being dealt with once and for all, I did have a look at the code of this mysterious script:
document.write('<!--MA-WS-C23-->');
document.write('');
document.write('<script type="text/javascript" src="http://seatics.tickettransaction.com/jquery_tn.js"></' + 'script>');
document.write('');
var TN_ticketResults = null;
function TN_populateTicketData(data) {
TN_ticketResults = data;
if(typeof TN_tryCreateTicketTable == "function")
TN_tryCreateTicketTable();
}
(function() {
var cysct = document.createElement("script");
cysct.type = "text/javascript";
cysct.src= '//tickets.tickettransaction.com/Tickets/ByEvent/?' +
'eventId=2175270&websiteConfigId=669&sort=retail&callback=TN_populateTicketData';
cysct.async = true;
var pnode = document.getElementsByTagName('script')[0];
pnode.parentNode.insertBefore(cysct, pnode);
})();
document.write('');
document.write('<script type="text/javascript" src="http://seatics.tickettransaction.com/swfobject_tn.js"></' + 'script>');
document.write('');
document.write('<script type="text/javascript" src="http://seatics.tickettransaction.com/maincontrol_tnservice_tn.js" ></' + 'script>');
document.write('');
// ppcsrc
var cookie_tn_ppc_src ='';
var tn_cookies = '; '+document.cookie + ';';
var cookie_ppc_src_start =tn_cookies.indexOf('; tn_ppc_src=') + 13;
if(cookie_ppc_src_start != 12)
cookie_tn_ppc_src = '&ppcsrc=' + tn_cookies.substring(cookie_ppc_src_start, tn_cookies.indexOf(';', cookie_ppc_src_start));
var acct_start =tn_cookies.indexOf('; rcaid=') + 8;
if(acct_start != 7)
cookie_tn_ppc_src +='&rcaid=' + tn_cookies.substring(acct_start, tn_cookies.indexOf(';', acct_start));
//map css suppliment
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute('href', 'http://seatics.tickettransaction.com/tnservice_map_suppliment_tn.css');
document.getElementsByTagName('head')[0].appendChild(fileref);
//maps
var webParms = {
swfMapURL : "http://seatics.tickettransaction.com/FenwayPark_Baseball_2013-04-24_2013-04-24_1120_tn.swf",
staticMapURL : "http://seatics.tickettransaction.com/FenwayPark_Baseball_2013-04-24_2013-04-24_1120_tn.gif",
mapShellURL : 'http://seatics.tickettransaction.com/mapshell_tn.swf'
};
webParms.vfsFilterAnimate = 'vertical-list';
webParms.vfsImageAnimate = 'vertical-list';
webParms.vfsEnable = 'selected-hover';
var TN_docFinishedLoading = false;
window.onload = function() {
ssc.EH.buyTickets = function(buyObj) {
var purchaseUrl = 'https://tickettransaction2.com/Checkout.aspx?wcid=669&e=' + escape(buyObj.tgSds) + cookie_tn_ppc_src + '&treq=' + buyObj.buyQty + '&SessionId=' + makeGuid();
if (typeof AppendToPurchaseUrl == "function") {
try {
purchaseUrl = AppendToPurchaseUrl(purchaseUrl);
} catch(e) {
}
}
if (typeof PopupCheckOut == "function" && PopupCheckOut())
window.open(purchaseUrl, '_blank', 'location=no,scrollbars=yes,resizable=yes,menubar=yes,toolbar=yes');
else
location.href = purchaseUrl;
};
TN_docFinishedLoading = true;
TN_tryCreateTicketTable();
};
var TN_onEmptyEvent = TN_onEmptyEvent || function(title) {
$("#tn_loading").css("display", "none");
$("#ssc_listAndMapDiv").css("display", "none");
$("#tn_tblNoResults").css("display", "");
};
function TN_tryCreateTicketTable() {
if (TN_docFinishedLoading && TN_ticketResults) {
if (TN_ticketResults.TicketsAvailable) {
$("#tn_loading").css("display", "none");
ssc.loadTgList(TN_ticketResults.TicketData, webParms);
} else {
TN_onEmptyEvent('Boston+Red+Sox+vs.+Tampa+Bay+Rays+on+Tue%2c+Apr+29+2014');
}
}
}
function makeGuid() {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
var guidLength = 5;
var guid = '';
for (var i = 0; i < guidLength; i++) {
var rnum = Math.floor(Math.random() * chars.length);
guid += chars.substring(rnum, rnum + 1);
}
return guid;
}
function GoToOtherGame(eventid) {
if (eventid != '')
document.location = 'ResultsTicket.aspx?evtid=' + eventid;
}
document.write('<table class="tn_results_header"> <tr class="tn_results_header_title"> <td class="tn_results_header_title"> Boston Red Sox vs. Tampa Bay Rays </td> <td class="tn_results_header_venue"> Fenway Park <br /> Boston, MA </td> <td class="tn_results_header_datetime"> Tue, Apr 29 2014 <br /> 7:10 PM </td> </tr> <tr class="tn_results_header_divider"> <td colspan="3" class="tn_results_header_divider"> </td> </tr></table> <div id="tn_loading" style="text-align:center;"><img src="//s3.amazonaws.com/TNService/Images/spinner.gif"/></div><div id="ssc_listAndMapDiv"></div><table style="display: none;" id="tn_tblNoResults" class="tn_results_notfound" cellspacing="0" cellpadding="4"> <tr class="tn_results_notfound"> <td class="tn_results_notfound"> There is currently no online inventory available for this event. <br /> <br /> Please contact <span class=\'tn_results_notfound_name\'> TicketSociety.com</span> at <span class="tn_results_notfound_phone"> (866) 459-9233</span> or <a class="tn_results_notfound_email" href="mailto:CustomerSupport#TicketSociety.com"> CustomerSupport#TicketSociety.com</a> to check availability for this event. </td> </tr> <tr valign="middle" class="tn_results_divider"> <td class="tn_results_divider"> </td>');
document.write(' </tr></table>');
As expected, it does some inline Javascript that actually WORKS twice. You can see it when looking at the 2 lines header before the big table. They indeed appear twice.
You can also inspect the DOM and you will see that your second div is populated with a skeleton table, but the table is never filled.
Unfortunately, the code also defines some variables and functions that are overwritten by the second include. The result is an Ajax request that cannot succeed (basically because the code was not designed to handle the same Ajax request twice on the same page).