I have a page with a jqGrid. On that grid I've added a custom button to the pager that, when clicked, opens a file browser for the user to upload an excel file. The file input is wrapped in a form and targeted to a hidden iframe.
I know that in Internet explorer, you cannot submit a file using javascript. I'm trying to figure out a way to submit the iframe and actually get the file to pass to the server with a value.
In chrome I'm able to submit it by triggering a click on a submit button I have way off the page on file input change and get the file, but in Internet Exploder it comes back null.
HTML:
<form action="/ManagedCatalog/ImportContractsFromExcelFile" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="">
<input type="file" id="uploadedFile" name="uploadedFile" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<input type="submit" id="submitBtn" name="submitBtn" value="Upload" style="position: absolute; z-index: 19999; top: -1000px; left: -1000px;"/>
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width: 0; height: 0; border: 0px solid #fff;"></iframe>
The custom nav button fires this:
function ImportContractsFromExcelFile() {
$('#uploadedFile').trigger('click');
}
And what I've got to work in Chrome:
$('#uploadedFile').change(function () {
$('#submitBtn').trigger('click');
});
Any tips, tricks, advice, reviews, or beatings are fully encouraged.
plz help.
Edit:
I'm doing it this way, because the silverlight app my team and I are rewriting acts this way and the client would like to keep this behavior. I may go down a jquery dialog window route and give the user a button to click, but I'd like to try and keep it as similar as possible.
Related
I have the below code which I am using to open a aspx page inside a modal popup but the issue is as soon as I load the host page of the modal popup it is redirecting to the one which is inside the iFrame.
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" Style="display: none">
<iframe style="width: 350px; height: 300px;" id="irm1" src="PayrollScope.aspx?id=49437" runat="server"></iframe>
<br />
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
So the sequence is
MainPage.aspx -> Click PopUp -> Load PayrollScope.aspx inside the modal
But as soon as I hit the MainPage.aspx it is redirecting to PayrollScope.aspx. I tried to use jQuery modal popup also but the same issue is happening. Can someone please tell me why it's redirecting.
Thanks
If you use jQuery dialog to load that other page?
Well, it will display, but THEN if any code in the page has a post back, then yes, it will re-direct to that page.(jQuery dialog simply pulls the whole other page right into that div and "merges" it into your current page's dom. So, you can display the page, and no re-direct will occur. However, any server side button event code (button press, or even say a after update event of editing a text box (on changed) will cause a post back. And any post-back WILL thus cause the page to re-direct (after all any code behind event does send the WHOLE page back and the URL to IIS. So, it much depends on if you JUST displaying that page, or if you want/need/have user interaction on the 2nd page loaded as a dialog.
So, dump the ajax popup and controls reverence to the id of the popup. (don't try jQuery an the ajaxtool kit to "both" try and pop up a control/div - they tend to not play nice with each other.
I do suggest using jQuery.
This would work (but with above post back issues in mind).
<body>
<form id="form1" runat="server">
<br />
<asp:Button ID="Button1" runat="server" Text="Show page as dialog" OnClientClick="showpage1();return false"/>
<div id="poppage" runat="server" style="display:none">
</div>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
function showpage1() {
var mydiv = $('#poppage');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
position: { my: 'top', at: 'top+150' }
});
mydiv.load('MyOtherPage.aspx');
// Open the dialog
mydiv.dialog('open');
}
So, above will LOAD the other page (into that div), thus pop up the 2nd page when you click on the above button. (and note the return=false). If you have any postback on the page, then everything will quite much blow out the dialog. (and this also means the 2nd page we display (load) as per above.
However, if you need interaction on that 2nd page? (have to click on buttons etc.).
Then the idea of a iframe is a VERY good idea.
So, you have same as before, but we now don't "load" the page using jQuery.ui, but JUST display (and thus pop up) the div with a iframe you placed inside.
So,the div becomes this:
<div id="poppage" runat="server" style="display:none">
<iframe src="MyOtherPage.aspx" class="auto-style1"></iframe>
</div>
and the js code becomes this:
function showpage1() {
var mydiv = $('#poppage');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
position: { my: 'top', at: 'top+150' }
});
// Open the dialog
mydiv.dialog('open');
}
So, now the above will just display that other page in the div, and since it is a iFrame, then you can interact - and post backs in that iframe should work just fine.
So, remove the ajax panel stuff - give jQuery.ui a try. I used the ajaxtool kit stuff, but for displaying another whole page in a dialog, then i found jQuery.ui seems to work a lot better
I have a web page that has basic registration field like Name, DOB, Address etc. The page has some controls (text box, DOB etc) that will be shown or hidden based on a radio button selection. Currently, when the end user fills up the page using tab key the hidden controls are getting focus and tab out is not working as expected (Current implementation does not have tab indexes set).
I tried manually setting the tab indexes in a incremental order for all the controls. But moving back and forth or after switching between those radio button selections, tab out scenario is not working properly.
Is there any work around to handle this scenario? Any help would be appreciated.
You need to set display: none instead of opacity: 0 so controls are removed completely from the flow. opacity: 0 means that the controls are still there, just invisible, they can still receive focus and input, on the code snippet below, you can still click in the invisible control between the two visible controls.
display: none means the controls are not there anymore so they can't receive focus and input.
You can refer to code snippet below to see the comparison.
.opacity .hidden {
opacity: 0;
}
.display .hidden {
display: none;
}
<h3>Opacity: 0 style</h3>
<form class="opacity">
<input type="text" />
<input type="text" class="hidden" />
<input type="text" />
</form>
<h3>Display: none style</h3>
<form class="display">
<input type="text" />
<input type="text" class="hidden" />
<input type="text" />
</form>
I am generating excel file from sql database, sql datatable contain 50k data so that file took long time to download. so i want to display one waiting dialog box to user while downloading that file. Any suggestion?
you can try the way I did it using jquery. this will show a loading image during a long process.
Add a gif(loading image) in your _Layout.cshtml. Put this inside the body.
<div id="loaderblock"></div>
<div id="loadercontainer">
<img src="~/Images/sampleloadingimage.gif" />
</div>
add this to your Site.css
#loadercontainer { display:none;position: fixed;margin-top: 20%; margin-left: 45%; z-index: 999999;}
#loaderblock {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
add this javascript in your view.
function generateexcel() {
$('#loaderblock').fadeIn();
$('#loadercontainer').fadeIn();
$("#idofyourform").submit(); //submit your form
}
and change your submit button to something like this:
<input type="button" value="Generate Excel" onclick="generateexcel();" />
this sample will show you how it works: sample
that is not my issuse.i want that loading image display only while the file is downloading.when file is successfully download and save dialog appear on browser at that time loading image should disappear automatically.
I am working on a self design dashboard page. Users drag&drop custom sized boxes in a div element and place some data inside boxes. Once they finish, I would like to save the certain attributes of these boxes in a db, instead of saving whole html code.
<div id="widget0" class="box span2">
<div class="box-header well" style="padding-left: 3px;" data-original-title="">
<div style="float:left">
<i class=" icon-chevron-left"></i>
<i class=" icon-chevron-down"></i>
<i class=" icon-chevron-up"></i>
<i class=" icon-chevron-right"></i>
</div>
<div style="float: right !important; margin-right: -15px;">
<i class="icon-remove"></i>
</div>
</div>
<div class="box-content">
<div id="boxContent0" style="width:100%;height:250px;border-collapse:collapse;" class="ui-droppable">
</div>
</div>
</div>
Above is a sample html code of my box. I'll just save div id, class and contents.
What I've done so far is, I saved required values in an asphiddenfield on a button click event in this format:
"2|widget0,span4,content1,content2|widget1,span3,0,0"
I did this by handling form submit event using jquery, triggered by asp button click. But the db write operations required in my server button click function didn't work. I think this is because I handled the form submit event before btnSaveDashboard_Click(object sender, EventArgs e) function handles and submit the form from jquery..
What I would like to do is, when user click on "save dashboard" button, before redirecting to the dashboard view page, to save these values in my db then redirect.
I just couldn't find a way how to do this with one button click;
get the required html values
save them in a hidden field or somewhere else reachable like viewstate
save these values in my database
I can more provide more details in case needed.
Thanks.
You could use the Button's OnClientClick client side event to populate the HiddenField with the values you need before the Postback occurs.
If you accomplish that, you should have the values you want on the Button's OnClick server side event. You should be able to do whatever you want with them at this point.
I have what I think is a pretty basic setup for using the ajaxcontroltoolkit's AsyncFileUpload control. Basically the control works correctly if I take it out of the div, but when I put it inside the div it doesn't fire the OnUploadedComplete server-side event anymore.
How this works is you rollover the image you want to change, click 'update image' and it opens a dialog (which is the div the AsyncFileUpload control is in) and allows you to upload a new image.
<div id="dialog-message" style="display: none;" title="Upload a Headshot Photo">
<p>Upload a headshot photo of this person. Your photo will be uploaded once you select and crop your photo.</p>
<fieldset>
<legend>Choose a photo to upload</legend>
Acceptable formats: .jpeg, .jpg, .gif, and .png and should be at least 72 DPI and 221x221.
**<ajax:AsyncFileUpload ID="asyncImageUpload"
ThrobberID="throbber"
OnClientUploadComplete="uploadComplete"
OnUploadedComplete="AsyncFileUpload_Complete"
runat="server" />**
<img src="/images/ajax-loader.gif" id="throbber" runat="server" style="display: none;" align="absmiddle" alt="loading" />
</fieldset>
</div>
Above is the div which contains the AsyncFileUpload control. Like I said, if I move it outside the div it works fine. I have already tried to change the enctype in the form and this is what it currently looks like:
<form id="form1" enctype="multipart/form-data" method="post" runat="server">
I have tried every suggestion I could find while trying to find a solution to this problem, but none seem to be working. This isn't even in an update panel, so I'm not sure why it's not firing.
The only thing I can think of is that it has something to do with the div being hidden at first and then shown once the user clicks on the link. I really hope someone can help cause I'm about to throw my computer out the window haha. Thanks in advance!
Code-behind:
protected void AsyncFileUpload_Complete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(4000);
if (this.asyncImageUpload.HasFile)
{
string path = MapPath("~/images/uploads/") + Path.GetFileName(e.filename);
this.asyncImageUpload.SaveAs(path);
}
}