I am developing some enhancements for a web page and I need some assistance. I have added a button that when clicked will take the html from a jqgrid and export it to Excel. I thought I had it all working and then I did the cross browser test and Internet Explorer does not like the following method:
function exportGrid()
{
var grid = "#diamondpassConferencePreregistrantGrid";
var mya=new Array();
mya=$(grid).getDataIDs(); // Get All IDs
var data=$(grid).getRowData(mya[0]); // Get First row to get the labels
var colNames=new Array();
var ii=0;
for (var i in data){colNames[ii++]=i;} // capture col names
var html="";
var columnNames = $(grid).jqGrid('getGridParam','colNames');
for(i=0;i<columnNames.length-1;i++)
{
html = html + columnNames[i+1]+"\t";
}
html=html+"\n";
for(i=0;i<mya.length;i++)
{
data=$(grid).getRowData(mya[i]); // get each row
for(j=0;j<colNames.length-1;j++)
{
html=html+data[colNames[j+1]]+"\t"; // output each column as tab delimited
}
html=html+"\n"; // output each row with end of line
}
html=html+"\n"; // end of line at the end
alert(html);
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
}
This all seems to work fine for me in Firefox and Chrome. The problem is that when I test in IE, the line:
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
opens up a new tab telling me the webpage cannot be displayed.
I got some info from the following webpage:
http://www.jquerybyexample.net/2012/10/export-table-data-to-excel-using-jquery.html
that basically tells me that line will not work in IE, that I need to set the response header as so:
Response.AddHeader("Content-Disposition", "attachment;filename=download.xls");
My problem is that I do not know what this entails. I tried adding this line and as I would have expected, I get "Response is undefined" or something of this nature.
I was just curious if anyone had an idea as to the best way to move forward from this point. I know how to detect the browser and I can always use different code to accomplish my Excel export for Internet Explorer but my problem is that I do not know the correct way to do the equivalent line in IE.
Any help would be greatly appreciated.
Thank you!
-Dave
Related
I am exporting a HTML table to and Excel format file and then downloading it as an .xls. This works fine in Firefox, Chrome etc. but not as expected in IE.
Below is the function I am using. The final if statement finds out if the browser is IE or otherwise.
function exportTable(obj) {
var tab_text="<table border='2px'><tr>";
var textRange; var j=0;
tab = obj;
for(j = 0 ; j < tab.rows.length ; j++){
tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text=tab_text+"</table>";
tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if you want links in your table
tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if you want images in your table
tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // removes input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1 = window.open();
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa=txtArea1.document.execCommand("SaveAs",false,"export.xls");
txtArea1.window.close()
} else { //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
}
If it's IE, it creates a new window, writes the HTML output to it and then asks the user where to save the file. When the dialog appears, the user is forced to save the file as .html or .txt.
This is where it gets weird. Although the save as box forces the user to download it as either .html or .txt the file itself is saved as an .xls.
Is it possible to disable this prompt? Or is there another work around for this? I do not want the end user to be confused by this.
Try using a hidden iframe instead of a new window. That solved alot of issues for me. To support IE9, I ended up with this snippet:
if (event.data.browser !== 'IE') {
$.util.open('data:application/vnd.ms-excel,' + event.data.content);
return true;
}
else {
// The iframe already has to be included in the HTML, or you'll get a 'no access error'.
frame.document.open("txt/html","replace");
frame.document.write(event.data.content);
frame.document.close();
frame.focus();
command = frame.document.execCommand("SaveAs", true, "data_table.xls");
return command;
}
The only downside is that its not a 'real' excel .xls file yet until you open it the first time and resave it as a .xls
This technique is just leveraging excels ability to understand basic html markup.
A better, but way more complicated method is to actually construct a base64 encoded 'string' as shown in msdn documentation, but in the end this sufficed for the project.
Or as with all things, there's lotsa libraries that will do this for you.
I am currently facing issue with JS and IE compatibility.
I applied a new function in my webap in its JS part its working fine in IE11,Firefox and chrome but when the user access the site using IE9 some code wont work.
is there a way to fix this ?
I am always redirected to a blank page
Ive also tried using .replace and .assign and even
var url = 'link'
$(location).attr('href', url);
Ive already place a tag in my htm but still not working:
Any help or suggestion will be highly appreciated.
<meta http-equiv="X-UA-Compatible" content="IE9">
JS
$scope.isVerify = function ()
{
if (UserLevel == '0010')
{
window.location.href = 'mailto:?subject='' + '&body='';
return false;
}
else {
$window.location.href = $scope.details.(returntoprevpage)
}
};
As per checking the issue is not on the windows.location it appears that the issue we on the email body which pass the allowable length on IE9
I am able to create a work around using iframe
I am trying to get the icon url/name corresponding to document retrieved from a SharePoint document library using the following javascript code (i am using JSOM):
function GetIcon(filename)
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var iconName;
iconName = web.mapToIcon(filename, '', SP.Utilities.IconSize.Size16);
var iconUrl = "/_layouts/images/" + iconName.get_value();
alert(iconUrl);
}
i cant observe any problem in the code but it always shows icon name as '0' than displaying the real icon name (i.e. icdoc.gif, ictxt.gif etc).
Am i missing something here?
Please guide me through this.
Your code works fine for me. It even works if the file does not exist and with an unrecognized file extension. Also, permissions do not appear to be involved.
If you browse to the page using Chrome and look on the Network tab of the Developer Tools (F12), you can view the raw response of the request. The name of the request is "Process Query". The image below shows the area I am referring to. This should give you some more insight on the problem.
iconName will be only populated after calling executeQueryAsync
context.executeQueryAsync(function() {
var iconUrl = "/_layouts/images/" + iconName.get_value();
alert(iconUrl);
}, function() { alert("Errors"); });
Found solution from Microsoft Blog... see below
OK, to start I don't like the word random but I cannot find any correlation in test cases for this problem so I am going to use random to describe parts of this problem.
The setup: I have a list where i have crated a customized UI for the EditForm.aspx and NewForm.aspx. I use the same JS file and JavaScript between the two of them. I have added in a google map to help illustrate the location selection. I have added extra code to the "OK" button for some dynamic validation. I have done a lot of dynamic menu things as well. All users use IE 9 and the site is on a MOSS 2007 server.
The problem: Only on the EditForm.aspx, clicking OK "Randomly" results in an immediate white screen. The form is not saved and when viewing the source code of the white screen i find a blank html page.
What I have tried to find this problem:
- I tried to narrow down the user and computer this happens on and found that it happens for everyone on every computer(once again "Randomly").
- I tried disabling the code that is pre-pended to the "OK" button
- I tried following the code with the IE9's external script debugged and found no errors
I can provide the code but it is a bit long and I really do not know where to begin. So i can provide it if needed.
Thanks for the help ahead of time.
Edit:
This is the code re-wiring my OK button(i reset the value to "Save" earlier)
var okBtns = $('input[value="Save"]')
$.each(okBtns, function(index,value){
okFunction=$(value).attr('onclick');
$(value).attr('onclick','return false;')
$(value).bind('click', function(){
if ($('#'+StatusBox).val()=='Draft') {$('#'+StatusBox).val('New Request')}
var err = clickOKbutton();
if(err==0) {okFunction()};
});
});
This is the clickOKbutton function witch is th code prepended to the orgianal sharepoint operations:
function clickOKbutton()
{
//all of the imput validation i could ever wish for!!!!
var NoteVal = ''
var NameAry = $('#'+PersonnelBox).parent().children(":first").children("SPAN").children("SPAN");
$.each(NameAry, function(index,value){
var $n=$(value).html();
if(NoteVal.length==0) {NoteVal=$n} else {NoteVal=NoteVal+';'+$n};
});
//$('#'+AddNotes).val(NoteVal);
var plh = $('#'+PersonnelBox).parent().html()
userNameTx = $('#zz8_Menu').text();
userNameTx = userNameTx.replace('Welcome ','');
$.each(OICUsers, function(i,v){
if(plh.indexOf(v) > -1 && st=='New Request'){
$('#'+StatusBox).val('OIC Bypassed')
$('#'+CommentsBox).val('OIC is travling on this TDY/TAD and cannot approve. So this request is bypassing the "OIC Approval" step')
}
});
/*userNameTx = $('#zz8_Menu').text();
userNameTx = userNameTx.replace('Welcome ','')
$('#' + ModBox).closest('TR').show();*/
var message=''
message = detectFieldChanges(AllFieldsArray,AllOrgValArray,"Draft,New Request,Modified")
if(message.length>0){
$('#'+ModBox).val(message);
AutoResizeTextarea(ModBox);
}
message = detectFieldChanges(ValFieldsArray,OrgValuesArray,"Draft,New Request,Modified,OIC Approved,OIC Bypassed,Pending RFI,Ready for COS")
userNameTx = $('#zz8_Menu').text();
userNameTx = userNameTx.replace('Welcome ','');
if(message.length>0&&$.inArray(userNameTx,COSUsers)==-1){
$('#'+StatusBox).val('Modified').change;
$('#'+StatusLongBox).val('Modified').change;
}
//Subject box
var pb = NoteVal;
var ep = $('#'+ExtPersonnel).val();
var ab = $('#'+AddressBox).val();
var sd = $('#'+sDateBox).val();
var ed = $('#'+eDateBox).val();
var st = $('#'+StatusBox).val();
var p = pb+';'+ep;
var p = p.replace(/mossaspnetmembershipprovider:/g,'');
var p = p.slice(0,-1);
var ad = ab+' '+sd+' to '+ed;
var s = 'eTDY | '+st+' - '+p+' - '+ad;
if(s.length>255){
var l = s.length-255;
p = p.substring(0,p.length-l);
s = 'eTDY | '+p+' - '+ad;
}
$('#'+Subject).val(s);
//check Lat/Lng value
if($('#'+LatBox).val()=='' || $('#'+LngBox).val()==''){
//alert("Cannot continue unless the Lat Lng has a vallid coordinate");
if($('#LatLngError').length==0){
errorHTML='<br><span class="ms-error" id="LatLngError">You must specify a value for Lat and Lng</span>'
$('#'+AddressBox).closest('TD').append(errorHTML)
}
return -1
}
return 0
};
It is messy but hopefully you can make sense of it.
Edit 2:
I think I have tracked the randomness down... I completely turned off all custom code and still have the problem. I then tried comparing a working record with a non working record. Everything looked normal until i got to the field with a multiple people picker. If i have more than 2 people in that field it will save normal but when i go to make a modification on that record with more than 2 people in the people picker field is causes this problem. I am going to do some more research and will post my results.
Edit 3:
http://blogs.msdn.com/b/jorman/archive/2009/12/22/mystery-of-the-sharepoint-white-screens.aspx
This problem all boils down to IIS configuration and the Impersonation Level. Apparently our server admins decided to change it without telling anyone.
Usually, when you get [seemingly random] behavior from a web page (especially in MOSS), it means that you have ambiguous events defined on the page. Usually, I get this when I add some kind of JScript to a button or form on_submit.
Without seeing your code, I can't really narrow it down further than that. I recommend: look for JavaScript events on your HTML form or on your button click events or look for anchor [a] tags that point to nowhere (href=#) but have javascript. Then decide to do it (strictly) the HTML way (forms, submit buttons) or the javascript way, (no forms, no asp:button) and un-wire the other.
This problem all boils down to IIS configuration and the Impersonation Level. Apparently our server admins decided to change it without telling anyone.
http://blogs.msdn.com/b/jorman/archive/2009/12/22/mystery-of-the-sharepoint-white-screens.aspx
i'm writing an greasemonkey script for somebody else. he is a moderator and i am not. and the script will help him do some moderating things.
now the script works for me. as far as it can work for me.(as i am not a mod)
but even those things that work for me are not working for him..
i checked his version of greasemonkey plugin and firefox and he is up to date.
only thing that's really different is that i'm on a mac and he is pc, but i wouldn't think that would be any problem.
this is one of the functions that is not working for him. he does gets the first and third GM_log message. but not the second one ("got some(1) ..").
kmmh.trackNames = function(){
GM_log("starting to get names from the first "+kmmh.topAmount+" page(s) from leaderboard.");
kmmh.leaderboardlist = [];
for (var p=1; p<=(kmmh.topAmount); p++){
var page = "http://www.somegamesite.com/leaderboard?page="+ p;
var boardHTML = "";
dojo.xhrGet({
url: page,
sync: true,
load: function(response){
boardHTML = response;
GM_log("got some (1) => "+boardHTML.length);
},
handleAs: "text"
});
GM_log("got some (2) => "+boardHTML.length);
//create dummy div and place leaderboard html in there
var dummy = dojo.create('div', { innerHTML: boardHTML });
//search through it
var searchN = dojo.query('.notcurrent', dummy).forEach(function(node,index){
if(index >= 10){
kmmh.leaderboardlist.push(node.textContent); // add names to array
}
});
}
GM_log("all names from "+ kmmh.topAmount +" page(s) of leaderboard ==> "+ kmmh.leaderboardlist);
does anyone have any idea what could be causing this ??
EDIT: i know i had to write according to what he would see on his mod screen. so i asked him to copy paste source of pages and so on. and besides that, this part of the script is not depending on being a mod or not.
i got everything else working for him. just this function still doesn't on neither of his pc's.
EDIT2 (changed question): OK. so after some more trial and error, i got it to work, but it's still weird.
when i removed the www-part of the url thats being use in the dojo.xhrGet() i got the finally the same error he got. so i had him add www to his and now it works.
the odd thing is he now uses a script with the url containing "www" and i'm using a script with an url without "www"...
so for me:
var page = "http://somegamesite.com/leaderboard?page="+ p;
and for him:
var page = "http://www.somegamesite.com/leaderboard?page="+ p;
Why don't you have him try logging into an account that is not a moderator account so that you eliminate one of your variables from your problem space.
It's possible that the DOM of the page is different for a moderator than for a regular user. If you're making assumptions about the page as a regular user that are not true as a moderator, that could cause problems.
I suspect that to fix it, you may need access to a moderator account so you can more easily replicate the behavior.
ooops. it seemed that the url of this gamesite is accessible as www.gamesite.com as well as gamesite.com (without the www.part). this caused the problem.
sorry to bother you'all.
i go hide in shame now...