I've been using uploadify in an app for a few years and it has always worked fine. When I upgraded to the 2.1.0 version, it now comes bundled with swfobject 2.2.
In firefox, safari, and chrome, the file upload and everything works perfectly. However, in all versions of IE, the javascript is not passing any of the parameters to the flash file properly.
Debugging the buttonImg for example works fine inside of the uploadify js, but from inside the flash file it reads as undefined. Again, this is only IE.
What could cause IE to not pass js parameters to the flash object? I'm running the latest flash version.
I've checked into the other related posts here and no one seems to have solved this issue. No javascript errors at all. The flash uploader loads and even appears to work, but only with default values.
I have narrowed the problem down a bit further but still don't understand what's happening. In SWFOjbject 2.2, line 436, the javascript is attempting to replace the "el" element with the new object and it's parameters.
When I alert out "par" I see the list of parameters, complete with the flashvar that I would expect.
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="allowScriptAccess" value="sameDomain">
<param name="flashvars" value="uploadifyID=fileInput&pagepath=/clients/WhackCMS/admin/js/tinymce/plugins/whackupload/&buttonImg=http%3A//192.168.0.4/clients/WhackCMS/admin/img/btn-browse.png&script=http://192.168.0.4/clients/WhackCMS/admin/pages/upload&folder=&scriptData=single-auth-token%3Dd06ac6f98b93d980fe7fa1e24fa91ab3f36622ea%26thumb-size%3D150x150&width=157&height=31&wmode=opaque&method=GET&queueSizeLimit=999&simUploadLimit=1&fileDesc=Images&fileExt=*.jpg;*.jpeg;*.gif;*.png&auto=true&fileDataName=Filedata">
I've tried the default el.outerHTML and the $(el).replaceWith methods, but when I try to view the updated "el" object, all I see are some default parameters:
<OBJECT style="VISIBILITY: visible" id=fileInputUploader classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=157 height=31>
<PARAM NAME="_cx" VALUE="4153">
<PARAM NAME="_cy" VALUE="820">
<PARAM NAME="FlashVars" VALUE="">
<PARAM NAME="Movie" VALUE="http://192.168.0.4/clients/WhackCMS/admin/uploader_tinymce.swf">
<PARAM NAME="Src" VALUE="http://192.168.0.4/clients/WhackCMS/admin/uploader_tinymce.swf">
<PARAM NAME="WMode" VALUE="Opaque">
<PARAM NAME="Play" VALUE="0">
<PARAM NAME="Loop" VALUE="-1">
<PARAM NAME="Quality" VALUE="High">
<PARAM NAME="SAlign" VALUE="LT">
<PARAM NAME="Menu" VALUE="-1">
<PARAM NAME="Base" VALUE="">
<PARAM NAME="AllowScriptAccess" VALUE="sameDomain">
<PARAM NAME="Scale" VALUE="NoScale">
<PARAM NAME="DeviceFont" VALUE="0">
<PARAM NAME="EmbedMovie" VALUE="0">
<PARAM NAME="BGColor" VALUE="">
<PARAM NAME="SWRemote" VALUE="">
<PARAM NAME="MovieData" VALUE="">
<PARAM NAME="SeamlessTabbing" VALUE="1">
<PARAM NAME="Profile" VALUE="0">
<PARAM NAME="ProfileAddress" VALUE="">
<PARAM NAME="ProfilePort" VALUE="0">
<PARAM NAME="AllowNetworking" VALUE="all">
<PARAM NAME="AllowFullScreen" VALUE="false">
</OBJECT>
It just seems like the el element is simply not being replaced properly. When I attempt this in firefox and safari, the html updates properly.
Related
I am quite proficient in WPF but new to the area of implementing UI validation where I need to ensure that certain values are ready for saving to a database. In my very large application I have a lot of different types of validation, which includes the simple single (TextBox requires a value or minimum characters), (Item must be selected), (At least one option must be chosen) and so on.
I have implemented the validation using INotifyDataErrorInfo and this works really well, except for a few issues that I am going around in circles with and need some guidance. In fact, this is probably more of styling question. The following is just one of my issues but if I solve this then it may solve the others so I’ll stick to this for now:
I have a set of radio button controls where one must be selected by the user but I do not want any to be selected by default, so are forced to make the choice. Until they choose one, a red border needs to be displayed around the radio buttons which are in a stack panel. Because this is something that I want to do in several places where I have a group of controls, I thought it would be good to create a Border control called ErrorBorderControl, that manages data errors using a property and then pop the items into this control. I create a DependecyProperty on this control called ValidationObject of type object, that just takes a property that can be tested to see if there is an error. This works perfectly and the red border is displayed when not selected and not when selected. Great so far. However, the ControlTemplate defined in the ErrorBorderControl bleeds to all other Border based controls in the UI, including the Border around the RadioButton controls.
I work a lot with styles and understand scope but this is very odd. The below is what I have done, although very basic as a first attempt:
User Control:
<UserControl
x:Class="Itec.Common.Wpf.CustomControls.Controls.ErrorBorderControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<!--
Provides a border around grouped controls that needs error feedback
-->
<Border>
<!-- Style -->
<Border.Style>
<Style
TargetType="{x:Type Border}"
x:Name="TheTemplate">
<!-- Error template definition -->
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<!-- Adorner for the error visual -->
<AdornedElementPlaceholder>
<!-- Simple border around the control -->
<Border
BorderBrush="#ec7063"
BorderThickness="1"/>
</AdornedElementPlaceholder>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Border.Style>
</Border>
</UserControl>
Code Behind:
/// <summary>
/// Interaction logic for ErrorBorderControl.xaml
/// </summary>
public partial class ErrorBorderControl : UserControl
{
#region Dependency Properties
/// <summary>
/// The validation object property
/// </summary>
public static readonly DependencyProperty ValidationObjectProperty =
DependencyProperty.Register("ValidationObject", typeof(object), typeof(ErrorBorderControl),
new FrameworkPropertyMetadata(OnValidationObjectChanged));
#endregion Dependency Properties
#region Ctors
/// <summary>
/// Initializes a new instance of the <see cref="ErrorBorderControl"/> class.
/// </summary>
public ErrorBorderControl()
{
InitializeComponent();
}
#endregion Ctors
#region Public Properties
/// <summary>
/// Gets or sets the validation object.
/// </summary>
/// <value>The validation object.</value>
public object ValidationObject
{
get { return (object)GetValue(ValidationObjectProperty); }
set { SetCurrentValue(ValidationObjectProperty, value); }
}
#endregion Public Properties
#region Private Methods
/// <summary>
/// Raises when the ValidationObject property value changes
/// </summary>
/// <param name="d">The d.</param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
private static void OnValidationObjectChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
((ErrorBorderControl)d).ValidationObject = e.NewValue;
}
#endregion Private Methods
}
Implementation:
<!-- Owner type -->
<itc:ErrorBorderControl
Grid.Row="1"
ValidationObject="{Binding Path=RecordType, ValidatesOnNotifyDataErrors=True}">
<StackPanel
Orientation="Horizontal">
<!-- Owner -->
<itc:ItecRadioButton
Content="{DynamicResource Language.SingleLine.Owner}"
Margin="0,4,4,4"
IsChecked="{Binding Path=RecordType, Converter={itc:EnumToBooleanConverter EnumValue={x:Static recordOwners:RecordOwnerRecordType.Owner}}}"/>
<!-- FAO -->
<itc:ItecRadioButton
Content="{DynamicResource Language.SingleLine.FAO}"
Margin="0,4,4,4"
IsChecked="{Binding Path=RecordType, Converter={itc:EnumToBooleanConverter EnumValue={x:Static recordOwners:RecordOwnerRecordType.Fao}}}"/>
<!-- Account Manager -->
<itc:ItecRadioButton
Content="{DynamicResource Language.SingleLine.Account_Manager}"
Margin="0,4,4,4"
IsChecked="{Binding Path=RecordType, Converter={itc:EnumToBooleanConverter EnumValue={x:Static recordOwners:RecordOwnerRecordType.AccountManager}}}"/>
<!-- Watcher -->
<itc:ItecRadioButton
Content="{DynamicResource Language.SingleLine.Watcher}"
Margin="0,4,4,4"
IsChecked="{Binding Path=RecordType, Converter={itc:EnumToBooleanConverter EnumValue={x:Static recordOwners:RecordOwnerRecordType.Watcher}}}"/>
</StackPanel>
</itc:ErrorBorderControl>
Output:
Invalid Selection
Notice that it looks like the template, although defined inside the user control, is affecting other Border controls inside other control. Look at when I have made the selection:
Valid Selection
The controls left in red do not event take part in validation. How does a control template inside another control affect all Borders? I just don't get it. What I need to do is to define a template that I can apply to the control I want it to be applied to only, and to be able to re-use it.
I'm trying to find out a way to apply a style to a TextBox element when it does not contain text. I want the TextBox to have a different background color (for instance) when it does or does not contain any text.
As Triggers are not something that I can use in Silverlight (afaik), is there another way to do this? Preferrably without writing a custom implementation of TextBox just for this behavior. Thanks.
I ended up using a default behavior (ConditionBehavior):
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<i:Interaction.Behaviors>
<ec:ConditionBehavior>
<ec:ConditionalExpression>
<ec:ComparisonCondition LeftOperand="{Binding Text, ElementName=textBox}" RightOperand="" Operator="NotEqual"/>
</ec:ConditionalExpression>
</ec:ConditionBehavior>
</i:Interaction.Behaviors>
<ec:ChangePropertyAction PropertyName="Background" Value="{StaticResource PhoneTextBoxBrush}" />
</i:EventTrigger>
<i:EventTrigger EventName="TextChanged">
<i:Interaction.Behaviors>
<ec:ConditionBehavior>
<ec:ConditionalExpression>
<ec:ComparisonCondition LeftOperand="{Binding Text, ElementName=textBox}" RightOperand="" Operator="Equal"/>
</ec:ConditionalExpression>
</ec:ConditionBehavior>
</i:Interaction.Behaviors>
<ec:ChangePropertyAction PropertyName="Background" Value="Transparent" />
</i:EventTrigger>
</i:Interaction.Triggers>
This should be fairly easy to accomplish with a custom behavior. Use this link to create a behavior that can be attached to a TextBox control. In the OnAttached method, you can handle the TextChanged event of even the LostFocus method to check whether the TextBox is empty or not. Accordingly, you can switch the style between the styles.
P.S: You might need to call the TextBox.ApplyTemplate() method after changing the style. Note sure about that though.
Create your styles
<Style x:Key="FilledStyle" TargetType="TextBox">
<Setter Property="Background" Value="Beige" />
</Style>
<Style x:Key="EmptyStyle" TargetType="TextBox">
<Setter Property="Background" Value="Yellow" />
</Style>
<Models:TextStyleConverter x:Key="TextStyleConverter" />
Create Converter
public class TextStyleConverter : IValueConverter
{
#region Implementation of IValueConverter
/// <summary>
/// Modifies the source data before passing it to the target for display in the UI.
/// </summary>
/// <returns>
/// The value to be passed to the target dependency property.
/// </returns>
/// <param name="value">The source data being passed to the target.</param><param name="targetType">The <see cref="T:System.Type"/> of data expected by the target dependency property.</param><param name="parameter">An optional parameter to be used in the converter logic.</param><param name="culture">The culture of the conversion.</param>
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var val = value as string;
if (String.IsNullOrEmpty(val)) return Application.Current.Resources["EmptyStyle"];
return Application.Current.Resources["FilledStyle"];
}
/// <summary>
/// Modifies the target data before passing it to the source object. This method is called only in <see cref="F:System.Windows.Data.BindingMode.TwoWay"/> bindings.
/// </summary>
/// <returns>
/// The value to be passed to the source object.
/// </returns>
/// <param name="value">The target data being passed to the source.</param><param name="targetType">The <see cref="T:System.Type"/> of data expected by the source object.</param><param name="parameter">An optional parameter to be used in the converter logic.</param><param name="culture">The culture of the conversion.</param>
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}
Usage
<TextBox x:Name="locationtbx" Style="{Binding ElementName=locationtbx, Path=Text, Converter={StaticResource TextStyleConverter}}" />
I have embedded silverlight control in my html page using object tag. I have to show and hide the parent of object tag by changing the display property of the parent tag. I need to do this because the layout of the page is tabbed, i.e. user can switch between tabs. Showing a tab requires to hide the content of previous tab and show the new content.
Below is the object tag code:
<div id="slControlDiv" style="width:0px; height:0px;">
<object id="slobj" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100" height="25" style="display: block;">
<param name="source" value="ILCFileUploader.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
</object>
When I hide the parent of object tag, i.e change the display to none and then show it back by changing display to block or empty, silverlight control reloads.
Is there anyway to prevent its reloading? I have tried changing visibility to collapse and then to visible, but this works only in IE8 and Firefox. In other browsers the element still keeps occupying the space, although it is hidden. I want the control to release the space as well when it is hidden.
Thanks & regards,
Nadeem Ullah
I found that setting "visibility=hidden|show" of a containing element (eg a div) allowed hiding|showing the contained object element without it reloading when re-shown. Using the "offsets" method also works (absolutely positioning it out of the visible area of the document).
I'm having a somewhat maddening issue just trying to get the Silverlight Pivot Control to work out of the box.
When I wire everything together, I see this stack trace in the JavaScript errors:
Unhandled Error in Silverlight Application Set property 'System.Windows.FrameworkElement.Style' threw an exception. [Line: 9 Position: 35] at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
at VehiclePivotViewer.MainPage.InitializeComponent()
at VehiclePivotViewer.MainPage..ctor(IDictionary`2 initParams)
at VehiclePivotViewer.App.Application_Startup(Object sender, StartupEventArgs e)
at MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)
I actually downloaded a helper library to dig further into that exception, and it looks like it's having a hard time with the MainPage.xaml markup, even though it all appears to be valid.
If it's helpful, I've listed the steps I took to set it all up below.
Create a new MVC3 web application
Create a Silverlight 4 application project in the same solution, and add it to the web project
Add the five System.Windows.Pivot assembly references
Add the control to my MainPage.xaml
<Grid x:Name="LayoutRoot" Background="White">
<Pivot:PivotViewer x:Name="Viewer" />
</Grid>
Wire up the collection URL: Viewer.LoadCollection(initParams["CollectionUrl"], null);
Set the appropriate values in the view:
`
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/xxxPivotViewer.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<param name="enableHtmlAccess" value="true" />
<param name="initParams" value="collectionUrl=#ViewBag.CollectionUrl %>" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
`
Anyone have any thoughts or suggestions? I'm extremely new to Silverlight, and am kinda sorta pulling my hair out.
It looks like you are missing <% in front of #ViewBag.CollectionUrl.
I noticed that I had this same problem using only one of my two Visual Studio development machines. The offending machine likely had some wrong versions of the Silverlight dependencies installed, or was missing something crucial. A clean install of VS 2010 and all the Silverlight development tools, as well as the Pivot Control solved the issue. So, for anyone who happens to run into this post, this error may be caused by an incorrect/incomplete Silverlight/Pivot development environment.
Required tools are:
Visual Studio 2010. Get a free version for academics at Dreamspark
Silverlight 4 Tools for VS 2010
Silverlight 4 Toolkit
Silverlight Developer Runtime
I have created a web page using cakephp. Now I feel like my boring map on the main page is killing it. I bought imapbuilder which lets you do flash effects on images, however I don't seem to be able to get the code working.
Here is the code I pasted in my home page, but it won't load. All I see is a blank square.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0"
width="800" height="747" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="imapbuilder/loader.swf" />
<param name="base" value="imapbuilder/" />
<param name="flashvars" value="datasource=urlife_map.xml" />
<param name="loop" value="false" />
<param name="menu" value="true" />
<param name="quality" value="best" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="imapbuilder/loader.swf" base="imapbuilder/" flashvars="datasource=urlife_map.xml" loop="false" menu="true" quality="best" wmode="transparent" bgcolor="#ffffff" width="800" height="747" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
This same code I pasted into a separate file and it worked. I kept the folder imapbuilder on the same directory as the home page file.
Does anyone have an idea why this won't load and work on my website?
Files can only be accessed if they are located inside the webroot directory of your app using a standard CakePHP setup.
I suggest you move the imapbuilder folder to the webroot folder and also append all references to it with a / (e.g. /imapbuilder/loader.swf instead of just imapbuilder/loader.swf).
I think an easier solution for you is to use iMapBuilder.net -- which is the online version of iMapbuilder. The map will then be remotely hosted on their server, and all you need to do is copy and paste their code so that no file copying / directory issues.
I have used imapbuilder.net on few CMS based sites, e.g. dotnetnuke and wordpress. And the online based map solution is a lot easier than their Windows version, at least for CMS based sites.