I am looking to open a aspx page to act an an image uploader.. this is the code I use to open the page:
$("#btnUpload").on("click", function (s) {
s.preventDefault();
var id = $('#hdnId').val();
var response = window.showModalDialog("/imageUpload.aspx/", id);
alert(response);
});
the page opens fine and looks like this:
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<label>Choose New Image:</label>
<br/>
<asp:FileUpload ID="imageUploader" runat="server"></asp:FileUpload>
<asp:Button id="UploadButton" OnClick="UploadButton_Click" Text="Upload file" runat="server"></asp:Button>
</div>
</form>
</body>
</html>
The fileupload renders ok on the page - but the choose file button doesn't work at all! ive watched in chrome & there are no jquery errors on page load or on click of the choose file button.
I've done a bit of googling and found that ajax and update panels are dodge with the fileuploader - But i'm not using either :-/
anyone know whats occurring here?? many thanks
I was having the same exact issue with the Chrome modal dialog. This is a Chrome v26 issue. You can take a look at following url for chrome bug tracker details.
https://code.google.com/p/chromium/issues/detail?id=225365
However they’ve fixed the defect but according to them it'll take up to 6 weeks to include fix into release. You can get the Chrome canary version to verify.
https://www.google.com/intl/en/chrome/browser/canary.html
Related
Field renderer was working fine on mvc but now we moved to web pages, and i am converting my layouts & renderings to webpages but field renderer are not working in page editor mode but in published mode looking fine. page editor screen shot is attached.
Field rendered as
<sc:Text ID="Title" Item="<%# ((Sitecore.Data.Items.Item)Container.DataItem) %>" Field="Navigation Title" runat="server" />
and
<%# FieldRenderer.Render(Container.DataItem as Sitecore.Data.Items.Item, "Navigation Title") %>
tryied both but same result :) any help would be appreciated.
I have av vague memory of seeing this error before. If I remember right, the problem was that Sitecore couldn't do all its Page Editor magic properly by inserting scripts etc into the html header and body. It's worth I try to just verify that your layout forms a proper html document and having the head and a form accessible from the server, such as this:
<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<form runat="server">
</form>
</body>
</html>
I was a long time ago I used webforms with Sitecore, so I don't remember exactly what components Sitecore hooks into in order to make the editor works, but having a page structure as above should be good to go.
Hope it helps
// Mikael
Educating myself about Juice UI and have an issue with some of the properties of juice:Dialog control, hopefully it is a noob thing.
Iam Using VS 2010, .net 4.0 as required, created new ASP.net empty web application to keep it simple.
I have installed Juice UI using NuGet, no issues with install.
My aspx page is below, nothing added to code behind.
I can successfully open the dialog using the button, so next step was to have a play with the different dialog properties.
In the Juice:Dialog control I have added the property Height="300px". As I understand it this should open the dialog with a height of 300px. The dialog actually opens 'collapsed' ie I can't see the text at all and the dialog is sized as if you had resized it using the resizing handle to it's minimum height.
What am I missing here?
Edit : Ok if I put
$("#dialog").dialog({ height: 500 });
in the click event I can set the size when my button clicked. So this must mean the properties of the dialog control are only relevant if AutoOpen=True ie the dialog opens on the initial page load. Am I close?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Employees.aspx.cs" Inherits="JuiceSkeleton.Employees" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<button id="accept" runat="server" class="open-dialog" type="button">
Accept</button>
<juice:Button ID="acceptButton" runat="server" TargetControlID="accept" />
</div>
<div id="dialog" class="basic-dialog" runat="server">
<p>
Default Dialog says No!
</p>
</div>
<juice:Dialog Draggable="True" ID="dialogButton" Height="300px" runat="server" TargetControlID="dialog"
AutoOpen="False" />
</form>
</body>
<script type="text/javascript">
// Respond to the click
$(".open-dialog").click(function (e) {
e.preventDefault();
// Open the dialog
$(".basic-dialog").dialog("open");
});
</script>
The problem is that the property only takes a numeric value. However, because jQuery UI Dialog accepts "auto" as a value, we had to make the property type dynamic to accept numbers and "auto". Dropping the "px" unit decl. from your value will give you the correct output.
However, due to a problem with internal code, this will throw an exception in the current version.
The issue has been tracked here, https://github.com/appendto/juiceui/issues/23, and a fix has already been committed. The next maintenance release will contain this fix. At the moment, your workaround using javascript will work just fine. When the next release is out, you'll be able to use that property as per usual.
My testers have discovered that if you type free text into a file upload input then none of the buttons on the page work until that text is removed (so the page cannot be submitted).
I am able to replicate this with the following ASPX code (with no code behind):
<%# Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fuTest" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
(Note that I haven't bound any handlers to the page; despite this, the page is submitted when the submit button is clicked only if no text is entered into the upload text box)
Is there any way to prevent users from typing free text into a file upload control? It seems that this is only possible in IE - Firefox and Chrome natively prevent text from being entered into upload input fields.
I've seen solutions elsewhere which suggest hiding input and replacing it with a label / button combo, but this seems like it might cause more problems and work inconsistently across browsers.
Any thoughts?
As per #Jer's suggestion, I was able to prevent input into the file upload without breaking any of the other functionality by handling keypress events on the upload. Using jQuery:
$(document).ready() {
$('input:file').keypress(function() {
return false;
});
}
I'm not sure if this would work as expected, but have you tried: <input readonly="readonly">
The accepted answer is perfectly fine for all the existing file controls.
But in most of the practical situations, we provide functionality to add more file controls on the fly so that users can select more than one file.
Key for the solution in this case was the .live function.
The solution will be as follows:
$('input:file').live('keypress', function() { return false; });
I have a custom date control which is essentially a text box and the ajaxToolKit calendarExtender. I want to include Javascript in the control and have it work properly no matter what page the control is on. The control is called DateControl.ascx
So I have two Javascript functions, dateEditor_OnShown and dateEditor_OnHiding. They get tied up in the page load of DateControl.ascx via...
CalendarExtender.OnClientShown = "dateEditor_OnShown";
CalendarExtender.OnClientHiding = "dateEditor_OnHiding";
The DateControl tool is used on two separate pages. If I put the straight Javascript directly into the DateControl's HTML it will work only on the default page but crashes when I load up the next page with the control. The error is a js runtime error 'dateEditor_OnHiding' is undefined.
If I try to link to the Javascript file from my DateControl's html via...
<script type="text/javascript" src="../JavaScript/IE6CalendarExtenderFix.js"></script>
... instead of having the Javascript directly in the page, it crashes immediately with the same error. I should note that the path to the js is correct.
The only way I can really get it to work is if I link to the javascript on every page that the control is used.
UPDATE: I feel the need to clarify a little bit. The solutions suggested are much appreciated, but either I am not understanding or they just will not work in my case for whatever reason (quite possibly the former).
So, this is basically what my control looks like...
<div id="CustomDateControl" style="<%# ControlStyle %>">
<div id="TextBox" style="display:inline; white-space:nowrap;">
<asp:TextBox runat="server" ID="txtCalender" Style="<%# TextBoxStyle %>" />
</div>
<div id="Calendar" runat="server">
<ajaxToolkit:CalendarExtender
runat="server"
ID="CalendarExtender"
Format="MM/dd/yyyy"
TargetControlID="txtCalender"
PopupButtonID="CalenderImage" />
</div>
</div>
In the aspx page, with that exact code, if I put the exact javascript in script tags so the page looks about like so...
<script type="text/javascript">
function dateEditor_OnShown(dateControl, emptyEventArgs) {
...
}
function dateEditor_OnHiding(dateControl, emptyEventArgs) {
...
}
</script>
<div id="CustomDateControl" style="<%# ControlStyle %>">
<div id="TextBox" style="display:inline; white-space:nowrap;">
<asp:TextBox runat="server" ID="txtCalender" Style="<%# TextBoxStyle %>" />
</div>
<div id="Calendar" runat="server">
<ajaxToolkit:CalendarExtender
runat="server"
ID="CalendarExtender"
Format="MM/dd/yyyy"
TargetControlID="txtCalender"
PopupButtonID="CalenderImage" />
</div>
</div>
This still crashes when accessing the control in the second page (not the first which is the default page) saying 'dateEditor_OnHiding' is undefined. Now, if I link to a js file with the same code using a relative path as suggested below I still get the same results.
Also, if as suggested below, I override OnPreRender and run RegisterClientScriptInclude, I once again get the same results. The control always works on the default page but never on the second page even though as far as I can tell the script is included in the control.
Any ideas?
append following code in your User Control.
protected override void OnPreRender(EventArgs e)
{
Page.ClientScript.RegisterClientScriptInclude("DateControl", this.ResolveClientUrl("~/JavaScript/IE6CalendarExtenderFix.js"));
base.OnPreRender(e);
}
Problem with control-relative file paths
You are probably having problems with relative paths to your JS file. You are specifying relative path to your custom control. You should probably write user control. Anyway. Your JS file is relative path to your custom control, but not relative to the containing page, so your JS file actually never loads. That's why your event handlers are undefined.
The easiest way would be to use absolute paths. Since you're working with user controls you can easily prepend application root folder.
I have a strange scenario wherein I am having to delete the data from the table once a report is generated. The data gets uploaded to the table when the user clicks on a "Generate Report" button on the web page.
My problem is that once the report is generated and shown on the report viewer control I don't want the user to click on the "Refresh" button on the ReportViewer pane. Is there a way I can hide it?
Forget it, very stupid of me. Its under "Toolbar" properties on the ReportViewer control. ShowRefreshButton.
Thanks :)
<rsweb:ReportViewer ID="viewerName" runat="server" ShowRefreshButton="false" AsyncRendering="false" SizeToReportContent="True" >
</rsweb:ReportViewer>
Do you have control over the web page? If so, add a bit of javascript that hides the button.
Using jQuery:
<html>
<head>
<script>
$(document).ready(function() {
$('#btnid').hide(); }
)
</script>
</head>
<body>
...
</body>
</html>