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.
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
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
I am trying to add a panel as a child control of another panel in the codebehind of a master page, it's a simple as:
Panel1.Controls.Add(Panel2)
However when I try to do that, I get this error:
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
There are a number of questions that talk about having <%= %> elements in the head section, which I do not have. I have been so far as to remove all <% %> elements from this page, to no avail, the error still occurs. Can anyone suggest a way to get this to work?
* Example for Answer B *
=== code with error ===
<script type="text/javascript">
jQuery(document).ready(
function() {
alert('Hello!');
jQuery("#<%=TxtSampleId.ClientID %>").focus();
}
);
</script>
=== code without error ===
<asp:PlaceHolder id="dontCare" runat="server">
<script type="text/javascript">
jQuery(document).ready(
function() {
alert('Hello!');
jQuery("#<%=TxtSampleId.ClientID %>").focus();
}
);
</script>
</asp:PlaceHolder>
The "The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)." error can be very annoying to say the least. It's a bug that Microsoft refuses to fix because there are workarounds. It happens when you try to dynamically load controls from the code behind, but your page source conflicts. Could be a few things going on...
Note: Stack Overflow doesn't handle syntax of code examples well, so I'll reference each answer with a letter, and in a later post, I'll attempt to type out an example. But I don't want to clutter this post because I want to get my points across.
A.) you have a <% Response.Write("something") %> in your page source. Or a <% CodeBehindMethod() %>. Remove it and be creative to populate it a different way!! One way is to place an ASP.NET Panel control (like a Panel ==> turns into a div tag when it renders to HTML) onto your page and dynamically populate the inner HTML attribute of that control. There are other ways of dealing with this.
B.) you are trying to use jQuery inside of an inline script block within your control, you will also get this. Surround the inline javascript code block with an ASP.NET PlaceHolder tag. It's that simple. If you don't, some jQuery functionality will work, but not all of it!
C.) If you are using Script Manager without a Masterpage, I'd suggest you start using a Masterpage to avoid issues later. Then use an ASP.NET ContentPlaceHolder for your head and your body tags to make customizing pages easier. When you reference your javascript files within your masterpage, and you're using Script Manager, make sure to put a Scripts tag inside your ScriptManager tag. Then inside the Scripts tag, place a ScriptReference tag with a Path of the full path of your Javascript files in there. Make sure to put a tilda and forward slash "~/" in the beginning of your path from the root of your web app. Many will put their ScriptManager tag in their control. Don't do this. Put it in your masterpage! It makes life easier.
D.) If A, B or C didn't answer your question, then I'd suggest stripping away every piece of your page and all controls in it, and add each one at a time. If you have a huge hierarchy of page and control inheritance (if your application doesn't have a Masterpage), good luck! You'll eventually figure out what caused it.
* Example for Answer C *
=== code without error ===
Masterpage code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><meta http-equiv="X-UA-Compatible" content="IE=7" />
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Stack Overflow Example</title>
<link rel="stylesheet" type="text/css" href="/style/jquery-ui-1.8.10.custom.css">
<asp:ContentPlaceHolder id="head" runat="server">
<asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" method="post" runat="server">
<asp:ScriptManager ID="anything" runat="server">
<Scripts>
<asp:ScriptReference Path="~/scripts/md5.js" />
<asp:ScriptReference Path="~/scripts/jquery-1.4.4.min.js" />
<asp:ScriptReference Path="~/scripts/jquery-ui-1.8.10.custom.min.js" />
<asp:ScriptReference Path="~/custom_crap.js" />
</Scripts>
</asp:ScriptManager>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
====================================================
Page source:
<asp:Content runat="server" ID="headcontent" ContentPlaceHolderID="head">
.. place your page specific header files here (js, css, etc..)
</asp:Content>
<asp:Content runat="server" ID="bodycontent" ContentPlaceHolderID="body">
.. place your page specific body HTML or ASP.NET code here
</asp:Content>
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 inherited an ASP.net codebase and I have very limited ASP.net skills. I am struggling to understand why something works and also why it only works in IE.
The following code appears in a page :-
<%# Page Language="C#" AutoEventWireup="true" CodeFile="map.aspx.cs" Inherits="Romtrac.auth_map" Culture="auto" UICulture="auto" %>
<!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 id="Head1" runat="server">
<title>
<% = Resources.Resource.map %>
</title>
</head>
<body>
<form id="adminlw_map_form" action="<%=geturl()%>" method="post" >
<% = Resources.Resource.loading %>...
<textarea name="xml" id="xml" runat="server" style="display:none" cols="1" rows="1"></textarea>
</form>
<script language="javascript" type="text/javascript" >
//submit main form immediately
document.getElementById('adminlw_map_form').submit();
</script>
</body>
</html>
This code runs fine in ASP.net. The form is automatically submitted and the page returned is rendered correctly within an Iframe. My question is;
1) Does the javascript within the body just get executed when it is encountered? Is this good practice or should it be executed in response to an event?
2) Why does this not work in other browsers?
Yes
The javascript is being executed before the browser has fully rendered the page. In this case, the form has not been rendered and is not accessible via the DOM.
The execution needs to happen after the DOM is fully loaded by the browser and can be implemented by encapsulating the call within a function and calling that function via the onload event of the body or by using a javascript library like jquery to hook into the load event of the page.
1) Yes, No. jQuery does it best with it's $(document).ready() function, but you should wait for the page to finish loading before running Javascript.
2) Do #1 and you won't need to worry about this. However I'll leave the floor open to someone with a better answer.
Some browsers prevent the submission of a form without user interaction in the page's load 9it's a security risk). I've had this issue a number of times in the past. I would combine the page's load, with a window.setTimeout of say 100ms.
<body onload="window.setTimeout( document.getElementById('adminlw_map_form').submit, 100)">
....
Remember when using JavaScript to keep it unobtrusive. There are still people out there who have JS switched off and your page should not really on it. It should serve as an enhancement.
Same as Mike Robinson's answer but surely you can just use <body onload="myfunction();">?