button - Page 277 - Developer IT

Infragistics UltraWebTab

- by user354089

Im using Infragistcs UltraWebTab. The code is shown below ` <div class="tab-content"> <asp:Panel ID="PnlGeneral" runat="server"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tab-list"> <tr> <td style="border-bottom-color: White"> <asp:Label ID="LblErrors" runat="server" CssClass="ErrorMessage1"></asp:Label> <asp:Label ID="LblSuccessMsg" runat="server" CssClass="SuccessMessage1"></asp:Label> </td> </tr> <tr> <td> <table cellpadding="0" cellspacing="0" width="100%" border="0" class="tab-list"> <tr> <th width="205" class="FormLabel1"> Campaign Name <span class="ErrorMessage">*</span> </th> <td width="80%"> <asp:TextBox ID="TxtCampaignName" runat="server" CssClass="TextBox1"></asp:TextBox> </td> </tr> <tr> <th width="205" class="FormLabel1"> CRM Name <span class="ErrorMessage">*</span> </th> <td width="80%"> <asp:TextBox ID="TxtCRMName" runat="server" CssClass="TextBox1"></asp:TextBox> </td> </tr> <tr> <th class="FormLabel1"> Campaign Type <span class="ErrorMessage">*</span> </th> <td> <asp:DropDownList ID="DDLCampaignType" runat="server" CssClass="TextBox1" AutoPostBack="true" Width="117px" OnSelectedIndexChanged="DDLCampaignType_SelectedIndexChanged"> </asp:DropDownList> </td> </tr> <tr visible="false" id="trCompanyRow" runat="server"> <th class="FormLabel1"> Company <span class="ErrorMessage">*</span> </th> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td class="style2" style="border-bottom-color: White"> <asp:DropDownList ID="DDLCompany" runat="server" CssClass="TextBox1" Width="117px" OnSelectedIndexChanged="DDLCompany_SelectedIndexChanged"> </asp:DropDownList> </td> <td class="style3" style="border-bottom-color: White"> <asp:LinkButton ID="btnlnknewCompany" runat="server" Style="font-size: 100%;" Text="Add New" OnClick="btnlnknewCompany_Click"></asp:LinkButton> </td> <td style="border-bottom-color: White"> <table cellpadding="0" cellspacing="0" border="0" width="100%" id="tdNewComapny" visible="false" runat="server"> <tr> <td class="style4" style="border-bottom-color: White"> <asp:TextBox ID="txtCompanyName" runat="server"></asp:TextBox> </td> <td style="border-bottom-color: White"> <asp:Button ID="btnCompanyAdd" runat="server" CssClass="btn1" Height="20px" Text="Add" Width="25%" OnClick="btnCompanyAdd_Click" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr id="trBannerImage" runat="server" visible="false"> <th class="FormLabel1"> Banner Image <span class="ErrorMessage">*</span> </th> <td> <asp:FileUpload ID="FileUploadBannerImage" runat="server" ToolTip="Add images for banner" /> </td> </tr> <tr> <th class="FormLabel1"> Start Date <span class="ErrorMessage">*</span> </th> <td> <asp:TextBox ID="TxtStartDate" runat="server" CssClass="TextBox1"></asp:TextBox><rjs:PopCalendar ID="CalStartDate" runat="server" Control="TxtStartDate" Format="dd mm yyyy" ShowErrorMessage="false" />  dd-mm-yyyy </td> </tr> <tr> <th class="FormLabel1"> End Date <span class="ErrorMessage">*</span> </th> <td> <asp:TextBox ID="TxtEndDate" runat="server" CssClass="TextBox1"></asp:TextBox><rjs:PopCalendar ID="CalEndDate" runat="server" Control="TxtEndDate" Format="dd mm yyyy" ShowErrorMessage="false" />  dd-mm-yyyy </td> </tr> <tr> <th class="FormLabel1"> Enabled? </th> <td> <asp:CheckBox ID="ChkEnabled" runat="server" /> </td> </tr> <tr style="border-bottom-color: White" id="tblVerificationFields" visible="false" runat="server"> <th style="border-bottom-color: White"> Company's Verification Fields </th> <td style="border-bottom-color: White"> <table border="0" cellspacing="0" cellpadding="0" class="tab-form" width="100%"> <tr> <td colspan="3" align="center"> <br /> <p> <label style="font-size: 14px; font-weight: bold; text-align: center;"> Select from existing verification fields below</label></p> </td> </tr> <tr> <td colspan="2"> <asp:Repeater ID="RptrVeriFieldsParamType" runat="server"> <HeaderTemplate> <table border="0" cellpadding="0" cellspacing="0" class="tab-grid" style="border: 0px"> <tr> <th> </th> <th> Field Name </th> <th> Type </th> <th> </th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td style="border-bottom-color: White"> <asp:CheckBox ID="RptrChkVeriFields" runat="server" /> </td> <td style="border-bottom-color: White"> <asp:Label ID="RptrFieldName" runat="server" Text='<%# Eval("FieldName") %>'> </asp:Label> </td> <td style="border-bottom-color: White"> <asp:Label ID="RptrParamterTypeName" runat="server" Text='<%# Eval("PARAMETERTYPENAME") %>'> </asp:Label> </td> <td> <asp:Label ID="RptrHdnFieldId" runat="server" Text='<%# Eval("FIELDID") %>' Visible="false"></asp:Label> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </td> </tr> <tr> <td style="border-bottom-color: White"> </td> </tr> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%" runat="server"> <tr> <td colspan="6" style="border-bottom-color: White" align="center"> <br /> <p> <label style="font-size: 14px; font-weight: bold; text-align: center; width: 100%;"> Or Add New verification field</label> </p> </td> </tr> <tr id="trVerifcationFields" runat="server" visible="false"> <th style="border-bottom-color: White" width="110px"> <strong>Verification Name</strong> </th> <td style="border-bottom-color: White" width="50px"> <asp:TextBox ID="TxtVeriField" runat="server"> </asp:TextBox> </td> <th style="border-bottom-color: White" width="100px"> <strong>Parameter Type</strong> </th> <td style="border-bottom-color: White" width="100px"> <asp:DropDownList ID="DDLParameterType" runat="server"> </asp:DropDownList> </td> <th> </th> <td align="left" style="border-bottom-color: White"> <asp:Button ID="BtnAddVeriField" runat="server" CssClass="btn1" Height="20px" Text="Add" OnClick="BtnAddVeriField_Click" Width="75%" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td> <table cellpadding="0" cellspacing="0" width="100%" border="0" class="tab-list"> <tr align="right"> <td> </td> <td align="right" class="tab-list"> <asp:Button runat="server" ID="Next" Visible="true" Text="Next >" CssClass="btn" /> </td> </tr> </table> </td> </tr> </table> </asp:Panel> </div> </ContentTemplate> </igtab:Tab> <igtab:Tab Text="CRM Deals (Step-2)" Key="Tab2"> <ContentTemplate> <div style="clear: both"> </div> <div class="tab-content"> <asp:Panel ID="PnlCRMDeals" runat="server" ScrollBars="Vertical" Height="500px"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tab-list"> <tr> <td> <asp:GridView ID="GridDeals" AutoGenerateColumns="False" runat="server" BorderStyle="none" BorderWidth="0" CellPadding="0" CellSpacing="0" GridLines="None" ShowFooter="false" HorizontalAlign="Left" CssClass="tab-grid" Width="100%"> <HeaderStyle CssClass="header" HorizontalAlign="Center" /> <PagerStyle CssClass="pager" /> <AlternatingRowStyle CssClass="odd" /> <Columns> <asp:TemplateField> <ItemStyle Width="5%" /> <ItemTemplate> <asp:CheckBox ID="ChkDeals" runat="server" Visible="true" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Deal Name"> <ItemStyle Width="25%" /> <ItemTemplate> <asp:Label ID="DealName" runat="server" Text='<%# Eval("DealName") %>' /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Name in CRM"> <ItemTemplate> <asp:Label ID="CRMDealName" runat="server" Text='<%# Eval("CRM_NAME") %>' /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Deal Code"> <ItemTemplate> <asp:Label ID="PartNum" runat="server" Text='<%# Eval("PARTNUM") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </td> </tr> </table> </asp:Panel> </div> </ContentTemplate> </igtab:Tab> ` The problem im facing is after the "BtnAddVeriField" add button is clicked the Panel for the next tab gets displayed below the first tab's Panel. Furthermore, that Add button is not displayed as well.

Read the article

how to use 3D map Actionscript class in mxml file for display map.

- by nemade-vipin

hello friends, I have created the application in which I have to use 3D map Action Script class in mxml file to display a map in form. that is in tab navigator last tab. My ActionScript 3D map class is(FlyingDirections):- package src.SBTSCoreObject { import src.SBTSCoreObject.JSONDecoder; import com.google.maps.InfoWindowOptions; import com.google.maps.LatLng; import com.google.maps.LatLngBounds; import com.google.maps.Map3D; import com.google.maps.MapEvent; import com.google.maps.MapOptions; import com.google.maps.MapType; import com.google.maps.MapUtil; import com.google.maps.View; import com.google.maps.controls.NavigationControl; import com.google.maps.geom.Attitude; import com.google.maps.interfaces.IPolyline; import com.google.maps.overlays.Marker; import com.google.maps.overlays.MarkerOptions; import com.google.maps.services.Directions; import com.google.maps.services.DirectionsEvent; import com.google.maps.services.Route; import flash.display.Bitmap; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import flash.display.Loader; import flash.display.LoaderInfo; import flash.display.Sprite; import flash.events.Event; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.TimerEvent; import flash.filters.DropShadowFilter; import flash.geom.Point; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.navigateToURL; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import flash.utils.Timer; import flash.utils.getTimer; public class FlyingDirections extends Map3D { /** * Panoramio home page. */ private static const PANORAMIO_HOME:String = "http://www.panoramio.com/"; /** * The icon for the car. */ [Embed("assets/car-icon-24px.png")] private static const Car:Class; /** * The Panoramio icon. */ [Embed("assets/iw_panoramio.png")] private static const PanoramioIcon:Class; /** * We animate a zoom in to the start the route before the car starts * to move. This constant sets the time in seconds over which this * zoom occurs. */ private static const LEAD_IN_DURATION:Number = 3; /** * Duration of the trip in seconds. */ private static const TRIP_DURATION:Number = 40; /** * Constants that define the geometry of the Panoramio image markers. */ private static const BORDER_T:Number = 3; private static const BORDER_L:Number = 10; private static const BORDER_R:Number = 10; private static const BORDER_B:Number = 3; private static const GAP_T:Number = 2; private static const GAP_B:Number = 1; private static const IMAGE_SCALE:Number = 1; /** * Trajectory that the camera follows over time. Each element is an object * containing properties used to generate parameter values for flyTo(..). * fraction = 0 corresponds to the start of the trip; fraction = 1 * correspondsto the end of the trip. */ private var FLY_TRAJECTORY:Array = [ { fraction: 0, zoom: 6, attitude: new Attitude(0, 0, 0) }, { fraction: 0.2, zoom: 8.5, attitude: new Attitude(30, 30, 0) }, { fraction: 0.5, zoom: 9, attitude: new Attitude(30, 40, 0) }, { fraction: 1, zoom: 8, attitude: new Attitude(50, 50, 0) }, { fraction: 1.1, zoom: 8, attitude: new Attitude(130, 50, 0) }, { fraction: 1.2, zoom: 8, attitude: new Attitude(220, 50, 0) }, ]; /** * Number of panaramio photos for which we load data. We'll select a * subset of these approximately evenly spaced along the route. */ private static const NUM_GEOTAGGED_PHOTOS:int = 50; /** * Number of panaramio photos that we actually show. */ private static const NUM_SHOWN_PHOTOS:int = 7; /** * Scaling between real trip time and animation time. */ private static const SCALE_TIME:Number = 0.001; /** * getTimer() value at the instant that we start the trip. If this is 0 then * we have not yet started the car moving. */ private var startTimer:int = 0; /** * The current route. */ private var route:Route; /** * The polyline for the route. */ private var polyline:IPolyline; /** * The car marker. */ private var marker:Marker; /** * The cumulative duration in seconds over each step in the route. * cumulativeStepDuration[0] is 0; cumulativeStepDuration[1] adds the * duration of step 0; cumulativeStepDuration[2] adds the duration * of step 1; etc. */ private var cumulativeStepDuration:/*Number*/Array = []; /** * The cumulative distance in metres over each vertex in the route polyline. * cumulativeVertexDistance[0] is 0; cumulativeVertexDistance[1] adds the * distance to vertex 1; cumulativeVertexDistance[2] adds the distance to * vertex 2; etc. */ private var cumulativeVertexDistance:Array; /** * Array of photos loaded from Panoramio. This array has the same format as * the 'photos' property within the JSON returned by the Panoramio API * (see http://www.panoramio.com/api/), with additional properties added to * individual photo elements to hold the loader structures that fetch * the actual images. */ private var photos:Array = []; /** * Array of polyline vertices, where each element is in world coordinates. * Several computations can be faster if we can use world coordinates * instead of LatLng coordinates. */ private var worldPoly:/*Point*/Array; /** * Whether the start button has been pressed. */ private var startButtonPressed:Boolean = false; /** * Saved event from onDirectionsSuccess call. */ private var directionsSuccessEvent:DirectionsEvent = null; /** * Start button. */ private var startButton:Sprite; /** * Alpha value used for the Panoramio image markers. */ private var markerAlpha:Number = 0; /** * Index of the current driving direction step. Used to update the * info window content each time we progress to a new step. */ private var currentStepIndex:int = -1; /** * The fly directions map constructor. * * @constructor */ public function FlyingDirections() { key="ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g"; super(); addEventListener(MapEvent.MAP_PREINITIALIZE, onMapPreinitialize); addEventListener(MapEvent.MAP_READY, onMapReady); } /** * Handles map preintialize. Initializes the map center and zoom level. * * @param event The map event. */ private function onMapPreinitialize(event:MapEvent):void { setInitOptions(new MapOptions({ center: new LatLng(-26.1, 135.1), zoom: 4, viewMode: View.VIEWMODE_PERSPECTIVE, mapType:MapType.PHYSICAL_MAP_TYPE })); } /** * Handles map ready and looks up directions. * * @param event The map event. */ private function onMapReady(event:MapEvent):void { enableScrollWheelZoom(); enableContinuousZoom(); addControl(new NavigationControl()); // The driving animation will be updated on every frame. addEventListener(Event.ENTER_FRAME, enterFrame); addStartButton(); // We start the directions loading now, so that we're ready to go when // the user hits the start button. var directions:Directions = new Directions(); directions.addEventListener( DirectionsEvent.DIRECTIONS_SUCCESS, onDirectionsSuccess); directions.addEventListener( DirectionsEvent.DIRECTIONS_FAILURE, onDirectionsFailure); directions.load("48 Pirrama Rd, Pyrmont, NSW to Byron Bay, NSW"); } /** * Adds a big blue start button. */ private function addStartButton():void { startButton = new Sprite(); startButton.buttonMode = true; startButton.addEventListener(MouseEvent.CLICK, onStartClick); startButton.graphics.beginFill(0x1871ce); startButton.graphics.drawRoundRect(0, 0, 150, 100, 10, 10); startButton.graphics.endFill(); var startField:TextField = new TextField(); startField.autoSize = TextFieldAutoSize.LEFT; startField.defaultTextFormat = new TextFormat("_sans", 20, 0xffffff, true); startField.text = "Start!"; startButton.addChild(startField); startField.x = 0.5 * (startButton.width - startField.width); startField.y = 0.5 * (startButton.height - startField.height); startButton.filters = [ new DropShadowFilter() ]; var container:DisplayObjectContainer = getDisplayObject() as DisplayObjectContainer; container.addChild(startButton); startButton.x = 0.5 * (container.width - startButton.width); startButton.y = 0.5 * (container.height - startButton.height); var panoField:TextField = new TextField(); panoField.autoSize = TextFieldAutoSize.LEFT; panoField.defaultTextFormat = new TextFormat("_sans", 11, 0x000000, true); panoField.text = "Photos provided by Panoramio are under the copyright of their owners."; container.addChild(panoField); panoField.x = container.width - panoField.width - 5; panoField.y = 5; } /** * Handles directions success. Starts flying the route if everything * is ready. * * @param event The directions event. */ private function onDirectionsSuccess(event:DirectionsEvent):void { directionsSuccessEvent = event; flyRouteIfReady(); } /** * Handles click on the start button. Starts flying the route if everything * is ready. */ private function onStartClick(event:MouseEvent):void { startButton.removeEventListener(MouseEvent.CLICK, onStartClick); var container:DisplayObjectContainer = getDisplayObject() as DisplayObjectContainer; container.removeChild(startButton); startButtonPressed = true; flyRouteIfReady(); } /** * If we have loaded the directions and the start button has been pressed * start flying the directions route. */ private function flyRouteIfReady():void { if (!directionsSuccessEvent || !startButtonPressed) { return; } var directions:Directions = directionsSuccessEvent.directions; // Extract the route. route = directions.getRoute(0); // Draws the polyline showing the route. polyline = directions.createPolyline(); addOverlay(directions.createPolyline()); // Creates a car marker that is moved along the route. var car:DisplayObject = new Car(); marker = new Marker(route.startGeocode.point, new MarkerOptions({ icon: car, iconOffset: new Point(-car.width / 2, -car.height) })); addOverlay(marker); transformPolyToWorld(); createCumulativeArrays(); // Load Panoramio data for the region covered by the route. loadPanoramioData(directions.bounds); var duration:Number = route.duration; // Start a timer that will trigger the car moving after the lead in time. var leadInTimer:Timer = new Timer(LEAD_IN_DURATION * 1000, 1); leadInTimer.addEventListener(TimerEvent.TIMER, onLeadInDone); leadInTimer.start(); var flyTime:Number = -LEAD_IN_DURATION; // Set up the camera flight trajectory. for each (var flyStep:Object in FLY_TRAJECTORY) { var time:Number = flyStep.fraction * duration; var center:LatLng = latLngAt(time); var scaledTime:Number = time * SCALE_TIME; var zoom:Number = flyStep.zoom; var attitude:Attitude = flyStep.attitude; var elapsed:Number = scaledTime - flyTime; flyTime = scaledTime; flyTo(center, zoom, attitude, elapsed); } } /** * Loads Panoramio data for the route bounds. We load data about more photos * than we need, then select a subset lying along the route. * @param bounds Bounds within which to fetch images. */ private function loadPanoramioData(bounds:LatLngBounds):void { var params:Object = { order: "popularity", set: "full", from: "0", to: NUM_GEOTAGGED_PHOTOS.toString(10), size: "small", minx: bounds.getWest(), miny: bounds.getSouth(), maxx: bounds.getEast(), maxy: bounds.getNorth() }; var loader:URLLoader = new URLLoader(); var request:URLRequest = new URLRequest( "http://www.panoramio.com/map/get_panoramas.php?" + paramsToString(params)); loader.addEventListener(Event.COMPLETE, onPanoramioDataLoaded); loader.addEventListener(IOErrorEvent.IO_ERROR, onPanoramioDataFailed); loader.load(request); } /** * Transforms the route polyline to world coordinates. */ private function transformPolyToWorld():void { var numVertices:int = polyline.getVertexCount(); worldPoly = new Array(numVertices); for (var i:int = 0; i < numVertices; ++i) { var vertex:LatLng = polyline.getVertex(i); worldPoly[i] = fromLatLngToPoint(vertex, 0); } } /** * Returns the time at which the route approaches closest to the * given point. * @param world Point in world coordinates. * @return Route time at which the closest approach occurs. */ private function getTimeOfClosestApproach(world:Point):Number { var minDistSqr:Number = Number.MAX_VALUE; var numVertices:int = worldPoly.length; var x:Number = world.x; var y:Number = world.y; var minVertex:int = 0; for (var i:int = 0; i < numVertices; ++i) { var dx:Number = worldPoly[i].x - x; var dy:Number = worldPoly[i].y - y; var distSqr:Number = dx * dx + dy * dy; if (distSqr < minDistSqr) { minDistSqr = distSqr; minVertex = i; } } return cumulativeVertexDistance[minVertex]; } /** * Returns the array index of the first element that compares greater than * the given value. * @param ordered Ordered array of elements. * @param value Value to use for comparison. * @return Array index of the first element that compares greater than * the given value. */ private function upperBound(ordered:Array, value:Number, first:int=0, last:int=-1):int { if (last < 0) { last = ordered.length; } var count:int = last - first; var index:int; while (count > 0) { var step:int = count >> 1; index = first + step; if (value >= ordered[index]) { first = index + 1; count -= step - 1; } else { count = step; } } return first; } /** * Selects up to a given number of photos approximately evenly spaced along * the route. * @param ordered Array of photos, each of which is an object with * a property 'closestTime'. * @param number Number of photos to select. */ private function selectEvenlySpacedPhotos(ordered:Array, number:int):Array { var start:Number = cumulativeVertexDistance[0]; var end:Number = cumulativeVertexDistance[cumulativeVertexDistance.length - 2]; var closestTimes:Array = []; for each (var photo:Object in ordered) { closestTimes.push(photo.closestTime); } var selectedPhotos:Array = []; for (var i:int = 0; i < number; ++i) { var idealTime:Number = start + ((end - start) * (i + 0.5) / number); var index:int = upperBound(closestTimes, idealTime); if (index < 1) { index = 0; } else if (index >= ordered.length) { index = ordered.length - 1; } else { var errorToPrev:Number = Math.abs(idealTime - closestTimes[index - 1]); var errorToNext:Number = Math.abs(idealTime - closestTimes[index]); if (errorToPrev < errorToNext) { --index; } } selectedPhotos.push(ordered[index]); } return selectedPhotos; } /** * Handles completion of loading the Panoramio index data. Selects from the * returned photo indices a subset of those that lie along the route and * initiates load of each of these. * @param event Load completion event. */ private function onPanoramioDataLoaded(event:Event):void { var loader:URLLoader = event.target as URLLoader; var decoder:JSONDecoder = new JSONDecoder(loader.data as String); var allPhotos:Array = decoder.getValue().photos; for each (var photo:Object in allPhotos) { var latLng:LatLng = new LatLng(photo.latitude, photo.longitude); photo.closestTime = getTimeOfClosestApproach(fromLatLngToPoint(latLng, 0)); } allPhotos.sortOn("closestTime", Array.NUMERIC); photos = selectEvenlySpacedPhotos(allPhotos, NUM_SHOWN_PHOTOS); for each (photo in photos) { var photoLoader:Loader = new Loader(); // The images aren't on panoramio.com: we can't acquire pixel access // using "new LoaderContext(true)". photoLoader.load( new URLRequest(photo.photo_file_url)); photo.loader = photoLoader; // Save the loader info: we use this to find the original element when // the load completes. photo.loaderInfo = photoLoader.contentLoaderInfo; photoLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, onPhotoLoaded); } } /** * Creates a MouseEvent listener function that will navigate to the given * URL in a new window. * @param url URL to which to navigate. */ private function createOnClickUrlOpener(url:String):Function { return function(event:MouseEvent):void { navigateToURL(new URLRequest(url)); }; } /** * Handles completion of loading an individual Panoramio image. * Adds a custom marker that displays the image. Initially this is made * invisible so that it can be faded in as needed. * @param event Load completion event. */ private function onPhotoLoaded(event:Event):void { var loaderInfo:LoaderInfo = event.target as LoaderInfo; // We need to find which photo element this image corresponds to. for each (var photo:Object in photos) { if (loaderInfo == photo.loaderInfo) { var imageMarker:Sprite = createImageMarker(photo.loader, photo.owner_name, photo.owner_url); var options:MarkerOptions = new MarkerOptions({ icon: imageMarker, hasShadow: true, iconAlignment: MarkerOptions.ALIGN_BOTTOM | MarkerOptions.ALIGN_LEFT }); var latLng:LatLng = new LatLng(photo.latitude, photo.longitude); var marker:Marker = new Marker(latLng, options); photo.marker = marker; addOverlay(marker); // A hack: we add the actual image after the overlay has been added, // which creates the shadow, so that the shadow is valid even if we // don't have security privileges to generate the shadow from the // image. marker.foreground.visible = false; marker.shadow.alpha = 0; var imageHolder:Sprite = new Sprite(); imageHolder.addChild(photo.loader); imageHolder.buttonMode = true; imageHolder.addEventListener( MouseEvent.CLICK, createOnClickUrlOpener(photo.photo_url)); imageMarker.addChild(imageHolder); return; } } trace("An image was loaded which could not be found in the photo array."); } /** * Creates a custom marker showing an image. */ private function createImageMarker(child:DisplayObject, ownerName:String, ownerUrl:String):Sprite { var content:Sprite = new Sprite(); var panoramioIcon:Bitmap = new PanoramioIcon(); var iconHolder:Sprite = new Sprite(); iconHolder.addChild(panoramioIcon); iconHolder.buttonMode = true; iconHolder.addEventListener(MouseEvent.CLICK, onPanoramioIconClick); panoramioIcon.x = BORDER_L; panoramioIcon.y = BORDER_T; content.addChild(iconHolder); // NOTE: we add the image as a child only after we've added the marker // to the map. Currently the API requires this if it's to generate the // shadow for unprivileged content. // Shrink the image, so that it doesn't obcure too much screen space. // Ideally, we'd subsample, but we don't have pixel level access. child.scaleX = IMAGE_SCALE; child.scaleY = IMAGE_SCALE; var imageW:Number = child.width; var imageH:Number = child.height; child.x = BORDER_L + 30; child.y = BORDER_T + iconHolder.height + GAP_T; var authorField:TextField = new TextField(); authorField.autoSize = TextFieldAutoSize.LEFT; authorField.defaultTextFormat = new TextFormat("_sans", 12); authorField.text = "author:"; content.addChild(authorField); authorField.x = BORDER_L; authorField.y = BORDER_T + iconHolder.height + GAP_T + imageH + GAP_B; var ownerField:TextField = new TextField(); ownerField.autoSize = TextFieldAutoSize.LEFT; var textFormat:TextFormat = new TextFormat("_sans", 14, 0x0e5f9a); ownerField.defaultTextFormat = textFormat; ownerField.htmlText = "<a href=\"" + ownerUrl + "\" target=\"_blank\">" + ownerName + "</a>"; content.addChild(ownerField); ownerField.x = BORDER_L + authorField.width; ownerField.y = BORDER_T + iconHolder.height + GAP_T + imageH + GAP_B; var totalW:Number = BORDER_L + Math.max(imageW, ownerField.width + authorField.width) + BORDER_R; var totalH:Number = BORDER_T + iconHolder.height + GAP_T + imageH + GAP_B + ownerField.height + BORDER_B; content.graphics.beginFill(0xffffff); content.graphics.drawRoundRect(0, 0, totalW, totalH, 10, 10); content.graphics.endFill(); var marker:Sprite = new Sprite(); marker.addChild(content); content.x = 30; content.y = 0; marker.graphics.lineStyle(); marker.graphics.beginFill(0xff0000); marker.graphics.drawCircle(0, totalH + 30, 3); marker.graphics.endFill(); marker.graphics.lineStyle(2, 0xffffff); marker.graphics.moveTo(30 + 10, totalH - 10); marker.graphics.lineTo(0, totalH + 30); return marker; } /** * Handles click on the Panoramio icon. */ private function onPanoramioIconClick(event:MouseEvent):void { navigateToURL(new URLRequest(PANORAMIO_HOME)); } /** * Handles failure of a Panoramio image load. */ private function onPanoramioDataFailed(event:IOErrorEvent):void { trace("Load of image failed: " + event); } /** * Returns a string containing cgi query parameters. * @param Associative array mapping query parameter key to value. * @return String containing cgi query parameters. */ private static function paramsToString(params:Object):String { var result:String = ""; var separator:String = ""; for (var key:String in params) { result += separator + encodeURIComponent(key) + "=" + encodeURIComponent(params[key]); separator = "&"; } return result; } /** * Called once the lead-in flight is done. Starts the car driving along * the route and starts a timer to begin fade in of the Panoramio * images in 1.5 seconds. */ private function onLeadInDone(event:Event):void { // Set startTimer non-zero so that the car starts to move. startTimer = getTimer(); // Start a timer that will fade in the Panoramio images. var fadeInTimer:Timer = new Timer(1500, 1); fadeInTimer.addEventListener(TimerEvent.TIMER, onFadeInTimer); fadeInTimer.start(); } /** * Handles the fade in timer's TIMER event. Sets markerAlpha above zero * which causes the frame enter handler to fade in the markers. */ private function onFadeInTimer(event:Event):void { markerAlpha = 0.01; } /** * The end time of the flight. */ private function get endTime():Number { if (!cumulativeStepDuration || cumulativeStepDuration.length == 0) { return startTimer; } return startTimer + cumulativeStepDuration[cumulativeStepDuration.length - 1]; } /** * Creates the cumulative arrays, cumulativeStepDuration and * cumulativeVertexDistance. */ private function createCumulativeArrays():void { cumulativeStepDuration = new Array(route.numSteps + 1); cumulativeVertexDistance = new Array(polyline.getVertexCount() + 1); var polylineTotal:Number = 0; var total:Number = 0; var numVertices:int = polyline.getVertexCount(); for (var stepIndex:int = 0; stepIndex < route.numSteps; ++stepIndex) { cumulativeStepDuration[stepIndex] = total; total += route.getStep(stepIndex).duration; var startVertex:int = stepIndex >= 0 ? route.getStep(stepIndex).polylineIndex : 0; var endVertex:int = stepIndex < (route.numSteps - 1) ? route.getStep(stepIndex + 1).polylineIndex : numVertices; var duration:Number = route.getStep(stepIndex).duration; var stepVertices:int = endVertex - startVertex; var latLng:LatLng = polyline.getVertex(startVertex); for (var vertex:int = startVertex; vertex < endVertex; ++vertex) { cumulativeVertexDistance[vertex] = polylineTotal; if (vertex < numVertices - 1) { var nextLatLng:LatLng = polyline.getVertex(vertex + 1); polylineTotal += nextLatLng.distanceFrom(latLng); } latLng = nextLatLng; } } cumulativeStepDuration[stepIndex] = total; } /** * Opens the info window above the car icon that details the given * step of the driving directions. * @param stepIndex Index of the current step. */ private function openInfoForStep(stepIndex:int):void { // Sets the content of the info window. var content:String; if (stepIndex >= route.numSteps) { content = "<b>" + route.endGeocode.address + "</b>" + "<br /><br />" + route.summaryHtml; } else { content = "<b>" + stepIndex + ".</b> " + route.getStep(stepIndex).descriptionHtml; } marker.openInfoWindow(new InfoWindowOptions({ contentHTML: content })); } /** * Displays the driving directions step appropriate for the given time. * Opens the info window showing the step instructions each time we * progress to a new step. * @param time Time for which to display the step. */ private function displayStepAt(time:Number):void { var stepIndex:int = upperBound(cumulativeStepDuration, time) - 1; var minStepIndex:int = 0; var maxStepIndex:int = route.numSteps - 1; if (stepIndex >= 0 && stepIndex <= maxStepIndex && currentStepIndex != stepIndex) { openInfoForStep(stepIndex); currentStepIndex = stepIndex; } } /** * Returns the LatLng at which the car should be positioned at the given * time. * @param time Time for which LatLng should be found. * @return LatLng. */ private function latLngAt(time:Number):LatLng { var stepIndex:int = upperBound(cumulativeStepDuration, time) - 1; var minStepIndex:int = 0; var maxStepIndex:int = route.numSteps - 1; if (stepIndex < minStepIndex) { return route.startGeocode.point; } else if (stepIndex > maxStepIndex) { return route.endGeocode.point; } var stepStart:Number = cumulativeStepDuration[stepIndex]; var stepEnd:Number = cumulativeStepDuration[stepIndex + 1]; var stepFraction:Number = (time - stepStart) / (stepEnd - stepStart); var startVertex:int = route.getStep(stepIndex).polylineIndex; var endVertex:int = (stepIndex + 1) < route.numSteps ? route.getStep(stepIndex + 1).polylineIndex : polyline.getVertexCount(); var stepVertices:int = endVertex - startVertex; var stepLeng

Read the article

2 javascripts problem

- by pradeep

<?php global $user; $userId = $user->uid; /* start with default */ $myresult = ""; /* All Includes - start */ include_once('db.php'); include_once('valid-scripts/validateData.php'); /* All Includes - end */ /* Build All required Variables - start */ $alias = $_GET['alias']; $product = $_GET['product']; $product = strtolower(substr($product,0,-1)); $master_table = $product.'_master'; $rating_master_table = $product.'_rating_master'; $rating_table = $product.'_rating'; $numProperties = 15; /* Build All required Variables - end */ /* Add all Styles required - start */ $myresult .= '<link href="/jquery.rating.css" type="text/css" rel="stylesheet"/>'; /* Add all Styles required - end */ /* Show Hide Variables/parameters - start */ include_once('all_include_files/show_hide.php'); /* Show Hide Variables/parameters - end */ /* All Javascript - start */ //$myresult .= '<script src="/jquery.rating.js" type="text/javascript" language="javascript"></script>'; ?> <style> #tabs { //font-size: 90%; //margin: 20px 0; margin: 2px 0; } #tabs ul { float: right; background: #E3FEFA; width: 600px; //padding-top: 4px; } #tabs li { margin-left: 8px; list-style: none; } * html #tabs li { display: inline; /* ie6 double float margin bug */ } #tabs li, #tabs li a { float: left; } #tabs ul li a { text-decoration: none; //padding: 8px; color: #0073BF; font-weight: bold; } #tabs ul li.active { background: #CEE1EF url(/all_include_files/img/nav-right.gif) no-repeat right top; } #tabs ul li.active a { background: url(/all_include_files/img/nav-left.gif) no-repeat left top; color: #333333; } #tabs div { //background: #CEE1EF; clear: both; //padding: 20px; min-height: 200px; } #tabs div h3 { text-transform: uppercase; margin-bottom: 10px; letter-spacing: 1px; #tabs div p { line-height: 150%; } </style> <script src="/jquery.rating.js" type="text/javascript" language="javascript"></script> <script src="/jquery.metadata.js" type="text/javascript" language="javascript"></script> <script type='text/javascript'> function openComment(number) { alert('working'); $('#comment'+number).css('display',''); } $('.star').rating({ callback: function(value, link){ alert(value); } }); $(document).ready(function() { //$('#tabs div').hide(); //$('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function() { $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; }); $("#clickit").click(function() { $.post("/mobile/tablechange.php",{ p1:'<?php echo $brand ?>',p2:'<?php echo $model ?>',userid:'<?php echo $userid ?>' } ,function(data){ $("#changetable").html(data); }); }); $('div.expandable p').expander({ slicePoint: 200, // default is 100 expandText: 'more »', // default is 'read more...' collapseTimer: 0, // re-collapses after 5 seconds; default is 0, so no re-collapsing userCollapseText: '[^]' // default is '[collapse expanded text]' }); }); </script> <?php /* All Javascript - end */ /* Form Processing after submit - start */ /* Form Processing after submit - end */ /* Actual Form or Page - start */ /*fetch all data needed */ /* initial query */ $result_product = query_product_table($product,$alias); /*fetch property names of product */ $product_properties = master_table($master_table); /*rating table query */ $master_rating_properties = master_rating_table($rating_master_table); /*get user ratings*/ $user_ratings = user_ratings($userId,$alias,$rating_table); $myresult .= '<div class=\'Services\'>'; //$myresult .="<form name ='form1' id='form1' method = 'POST' action='".$_SERVER['php_self'] ."'>"; if(!$result_product) { header('Location: /page-not-found'); } else { $row_product = mysql_fetch_array($result_product); $myresult .= "<h3 class='newstyle'>".$row_product['alias']." <a style='float:right;padding-right:20px;color:white;text-decoration:underline;' href='/'>Back</a> </h3>"; /* start actual product display - start*/ $myresult .= "<div class=\"product\">"; /* start table 1*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\'>'; $myresult .= '<tr>'; $myresult .='<td valign=\'top\'>'; /* start table 2*/ $myresult .='<table width=\'100%\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'; $myresult .= '<tr>'; $myresult .= '<td valign=\'top\' style=\'width:164px;\'>'; /* start table 3*/ $myresult .= '<table style=\'width:164px;\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'; $myresult .= "<tr>"; /* start of the pic row */ $myresult .= '<td align=\'center\' class=\'various_product\'>'; if($row_product['pic'] != "") { $myresult .= '<ul id=\'mycarousel\' style=\'display:\';>'; $myresult .= '<li><a href=\'/all_image_scripts/origpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic&p= \'rel=\'lightbox[roadtrip]\'><img src=\'/all_image_scripts/picdisplay1.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'\'></img></a></li>'; for($p = 1; $p <= 4; $p++) { if($row_product['pic'.$p] != "") { $myresult .= '<li><a href=\'/all_image_scripts/origpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic'.rawurlencode($p).'&p='.rawurlencode($p).'\' rel=\'lightbox[roadtrip]\'><img src=\'/all_image_scripts/thumbpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic'.rawurlencode($p).'\'></img></a></li>'; } } $myresult .= '</ul>'; } else { $myresult .= "<img width='50' height='70' src='/images/no-image.gif'></img>"; } jcarousel_add('#mycarousel', array('horizontal' => TRUE,'scroll' => 1,'visible' => 1)); $myresult .= "</td>"; /* end display of pic td*/ $myresult .= "</tr>"; /* end display of pic tr*/ $myresult .= "</table></td>"; /* end display of pic table and earlier td - Still 1 open TR td table tr -hint*/ $myresult .= '<td style=\'width:450px;\'>'; /*table - 4*/ $myresult .= '<table width=\'100%\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'display:block;\'>'; /* Start showing property and values */ $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.ucfirst($product).':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['alias'] .'</td>'; $myresult .= "</tr>"; for($j = 3; $j <= 5 ; $j++){ if($product_properties['property'.$j.'_name'] != "") { if($row_product['property'.$j] != "") { $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.$product_properties['property'.$j.'_name'].':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['property'.$j] .'</td>'; $myresult .= '</tr>'; } /* end if*/ } /* end if*/ } /* end for*/ /* show hide block */ $myresult .= '<tbody id=\'extra_properties\' style=\'display: none;\'>'; for($j = 6; $j <= 15 ; $j++){ if($product_properties['property'.$j.'_name'] != "") { if($row_product['property'.$j] != "") { $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.$produtc_properties['property'.$j.'_name'].':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['property'.$j] .'</td>'; $myresult .= '</tr>'; } /* end if*/ } /* end if*/ } /* end for */ $myresult .= '</tbody>'; /* end show/hide tbody */ $myresult .= '<tr>'; $myresult .= '<td>'; $myresult .= ' '; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= ' '; $myresult .= '</td>'; $myresult .= '<td align=\'right\' style=\'text-align:right;text-decoration:underline;\'>'; $myresult .= '<a class=\'right_link\' href=\'javascript:showMore()\'>Show Additional Details...</a>'; $myresult .= '</td>'; $myresult .= '</tr>'; /* End showing property and values */ $showreview = 'display:'; /* review show hide */ /*$myresult .= '<tbody '.$showreview.'>'; $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'><span class=\'reviews\'>'; //check //$numreviews = getreviewcount($brand,$model,'mobile_user_reviews'); if($numreviews > 0) { $myresult .= '<a href=\'mobilereviews?alias='.rawurlencode($alias).'\'> <span>$numreviews Reviews</span></a>'; } else { $myresult .= " $numreviews Reviews"; } $myresult .= "</span></td>"; $myresult .= "</tr>"; */ $myresult .= "</tbody>"; /* review show hide - end */ /* count show hide */ $myresult .= '<tbody '.$showcount.'>'; $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'><span class=\'reviews\'>'; //check //$totalvotes = gettotalvotes($row['property1'],$row['property2'],'mobile_rating'); $myresult .= "</td>"; $myresult .= "</tr>"; $myresult .= "</tbody>"; /* count show hide - end */ $myresult .= "</table></td>"; /* end table 4 */ $myresult .= '</tr>'; /* end 1 row and remaining tr , td ,table */ $myresult .= '</table></td>'; $myresult .= '</tr>'; /* remianing only 1 table */ /* ratings - positive last section starts here */ $max= array(); for ($l = 1 ; $l < 15; $l++){ if($row_product['property'.$l.'_avg']){ $maxarray = 0; $maxarray = $row_product['property'.$l.'_avg']; $max['rating'.$l.'_name'] = $maxarray; } } if(count($max) >0 ) { include('all_include_files/min_max_properties.php'); } if(($row_product['freshness'] <= strtotime("-3 month"))) { $image_type= 'old'; } else if(($row_product['freshness'] <= strtotime("-2 month"))) { $image_type= 'bitold'; } else if(($row_product['freshness'] <= strtotime("-1 month")) || ($row_product['freshness'] > strtotime("-1 month"))) { $image_type= 'new'; } $img_name = $image_type; $myresult .= "<tr>"; $myresult .= "<td>"; $myresult .= "<table width='100%' border='0'>"; $myresult .= "<tr>"; $myresult .= "<td width='170' class=\"ratingz\"><span><u>Overall rating</u></span></td>"; $myresult .= "<td width='150' class=\"ratingz\"><span><u>Positive</u></span></td>"; $myresult .= "<td width='150' class=\"ratingz\"><span><u>Negative</u></span></td>"; if($img_name == 'new'){ $images = "<img src='/sites/default/files/battery-discharging-100.png' width='40' height='40'></img>"; } else if($img_name == 'bitold'){ $images = "<img src='/sites/default/files/battery-discharging-80.png' width='40' height='40'></img>"; } else if($img_name == 'old'){ $images = "<img src='/sites/default/files/battery-discharging-0.png' width='40' height='40'></img>"; } else { $images = ""; } $myresult .= "<td rowspan='2'><p ".$showbattery.">". $images ."</p></td>"; $myresult .= "</tr>"; $myresult .= "<tr>"; $myresult .= "<td>"; $i++; for($k = 0.5; $k <= 10.0; $k+=0.5) { $overall = roundOff($row_product['overall_rating']); if($overall == $k) { $chk ="checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' disabled />'; } $myresult .= '</td>'; $myresult .= '<td ><span>'.$positive.'</span></td>'; $myresult .= '<td ><span>'.$negative.'</span></td>'; $myresult .= '</tr>'; $myresult .= '</table></td>'; $myresult .= '</tr>'; /* ratings - positive last section ends here */ $myresult .= '<tr>'; if($row_product['description'] != ""){ if(words_count($row_product['description']) > 8){ $myresult .= '<td><p><span class=\'description\'><strong><u>Description</u>:</strong></span>   <div class=\'expandable\'><p>'.$row_product['description'].'</div></p></p></td>'; } else { $myresult .= '<td><p><span class=\'description\'><strong><u>Description</u>:</strong></span>  '. $row_product['description'] .'</p></td>'; } } $myresult .= '</tr>'; $myresult .= '</table>'; /* end 1st table */ $myresult .= '</div>'; /* start actual product display - end*/ /*start the form to take ratings */ $myresult .= '<div id=\'tabs\'>'; $myresult .= '<ul>'; $myresult .= '<li><a href=\'#tab-1\'>Ratings</a></li>'; $myresult .= '<li><a href=\'#tab-2\'>Click here to rate</a></li>'; $myresult .= '</ul>'; $myresult .= '<div id=\'tab-1\'>'; /* actual rating table - start - jsut display ratings */ $myresult .= '<table id=\'rounded-corner\'>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'30%\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Ratings</span></th>'; $myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'><a href=\'#rounded-corner\' id=\'clickit\' style=\'color:white;text-decoration:underline;\' $disabled ></a></th> '; /*$myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'><a href=\'#rounded-corner\' id=\'clickit\' style=\'color:white;text-decoration:underline;\' $disabled >Click here to rate</a></th> ';*/ $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ /* tbody - start */ $myresult .= '<tbody>'; /*start printing the table wth feature and ratings */ for ($i = 1 ; $i < $numProperties; $i++){ if($master_rating_properties['rating'.$i.'_name']){ $myresult .= '<tr>'; $myresult .= '<td width=\'22%\'>'; $indfeature = 0; $indfeature = $row_product['property'.$i.'_avg']; $myresult .= $master_rating_properties['rating'.$i.'_name'].' ( '.$indfeature .')'; $myresult .= '</td>'; $myresult .= '<td colspan=\'0\' width=\'38%\' >'; $tocheck = $indfeature; for($k = 0.5; $k <= 10.0; $k+=0.5){ $tocheck = roundOff($tocheck); if(($tocheck) == $k) { $chk = "checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' name=\'drating'.$i.'\' id=\'drating'.$i.''.$k.'\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' disabled \'/>'; } /* for k loop end */ $myresult .= '</tr>'; } /* end if loop */ } /* end i for loop */ $myresult .= '</tbody>'; /* end tbody */ /* footer round corner start */ $myresult .= '<tfoot>'; $myresult .= '<tr>'; $myresult .= '<td class=\'rounded-foot-left\'> </td>'; $myresult .= '<td class=\'rounded-foot-right\' colspan=\'4\' >'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '</tfoot>'; $myresult .= '</table>'; /*round corner table end */ $myresult .= '</div>'; /*end 1st tab */ /*start 2nd tab */ $myresult .= '<div id=\'tab-2\'>'; $myresult .= '<form name =\'form1\' id=\'form1\' method = \'POST\' action=\''.$_SERVER['php_self'] .'\'>'; /* actual rating table - start - actual rate/update */ $myresult .= '<table id=\'rounded-corner\'>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'30%\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Ratings</span></th>'; $myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ /* tbody - start */ $myresult .= '<tbody>'; unset($i); /*start printing the table wth feature and ratings */ for ($i = 1 ; $i < $numProperties; $i++){ if($master_rating_properties['rating'.$i.'_name']){ $myresult .= '<tr>'; /*fetch ratings and comments - 1st make it to null */ $indfeature = 0; $comment = ''; $indfeature = $user_ratings['rating'.$i]; if($indfeature == NULL){ $indfeature = 0; } $comment = $user_ratings['rating'.$i.'_comment']; $myresult .= '<td width=\'22%\'>'; $myresult .= $master_rating_properties['rating'.$i.'_name'].' ( '.$indfeature.' )'; $myresult .= '</td>'; $myresult .= '<td colspan=\'0\' width=\'38%\' >'; if(($userId != '0') && (is_array($user_ratings))) { $tocheck = $indfeature; } else { $tocheck = '0'; } for($k = 0.5; $k <= 10.0; $k+=0.5){ $tocheck = roundOff($tocheck); if(($tocheck) == $k) { $chk = "checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' name=\'rating'.$i.'\' id=\'rating'.$i.''.$k.'\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' '.$disabled.' \' />'; } /* for k loop end */ $myresult .= '</td>'; $myresult .= '<td width=\'40%\'>'; $myresult .= '<input title=\'Reason for this Rating.. \'type=\'text\' size=\'25\' name=\'comment'.$i.'\' id=\'comment'.$i.'\' style=\'display:;\' maxlength=\'255\' value="'.$comment.'">'; $myresult .= '</td>'; $myresult .= '</tr>'; } /* end if loop */ } /* end i for loop */ $myresult .= '</tbody>'; /* end tbody */ /* footer round corner start */ $myresult .= '<tfoot>'; $myresult .= '<tr>'; $myresult .= '<td class=\'rounded-foot-left\'> </td>'; $myresult .= '<td class=\'rounded-foot-right\' colspan=\'4\' >'; if(($userId != '0') && (is_array($user_ratings))) { $myresult .= '<input type=\'button\' id=\'update_form\' value=\'Update\'>'; } else { $myresult .= '<input type=\'button\' id=\'save_form\' value=\'Save\'>'; } $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '</tfoot>'; $myresult .= '</table>'; /*round corner table end */ $myresult .= '</form>'; /*end the form to take ratings */ $myresult .= '</div>'; /*end 2nd tab */ $myresult .= '</div>'; /*end tabs div */ /* actual rating table - end */ /* 1st form ends here id- ratings_form */ } /* end of if loop result_product loop */ /* start table 3 - overall comment*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\' id=\'rounded-corner\'>'; $myresult .= '<tbody>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'100%\' colspan=\'2\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Overall Comments</span></th>'; $myresult .= '<th colspan=\'3\' class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ $myresult .= '<tr>'; $myresult .= '<td colspan=\'4\'>'; $myresult .= '<textarea title=\'OverAll Comment\' name=\'overall_comment\' cols=\'65\'></textarea>'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '<tbody>'; $myresult .= '</table>'; /* end table 3 - overall comment*/ /* start table 4 - summary*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\' id=\'rounded-corner\'>'; $myresult .= '<tbody>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th colspan=\'2\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Your Opinion</span></th>'; $myresult .= '<th colspan=\'2\'class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'>'; $myresult .= 'Do you Agree with the Ratings'; $myresult .= '</td>'; $myresult .= '<td colspan=\'2\'>'; $myresult .= 'Was the Information Helpful'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '<tr>'; $myresult .= '<form name=\'form2\' id=\'form2\' method=\'post\'>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'agree\' value=\'agree\'>'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'disagree\' value=\'disagree\'>'; $myresult .= '</td>'; $myresult .= '<input type=\'hidden\' name=\'agree_disagree\' id=\'agree_disagree\'>'; $myresult .= '</form>'; $myresult .= '<form name=\'form3\' id=\'form3\' method=\'post\'>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'helpful\' value=\'Helpful\'>'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'nothelpful\' value=\'Not Helpful\'>'; $myresult .= '</td>'; $myresult .= '<input type=\'hidden\' name=\'help_nohelp\' id=\'help_nohelp\'>'; $myresult .= '</form>'; $myresult .= '</tr>'; $myresult .= '</tbody>'; $myresult .= '</table>'; /*end table 4 summary table */ $myresult .= '</div>'; /* Actual Form or Page - end */ echo $myresult; //echo 'Product: '.$product; //echo '<br/>Alias: '.$alias; ?> hey this code is working fine for me . as required. the star class code is taken from http://www.fyneworks.com/jquery/star-rating/ ... it works well.. but when i insert code to add tabs for content ,the starts is not visible at all. but when i check source code. the stars are actually there . dono whats the prob. any suggestions on this this is the tabs code $('#tabs div').hide(); ('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function() { $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; });

Read the article

HTML5 Form: Page Is Reloading Instantly After Restyling (And It Shouldn't Be)

- by user3689753

I have a form. I have made it so that if your name is not put in, a red border is put on the name field. That works, BUT...it's for a split second, and then the page reloads. I want the red border to appear, and then stay there. For some reason it's for a split second. Can someone help me make it so the page doesn't reload after displaying the red border? Here's the script. window.onload = function() { document.getElementById("Hogwarts").onsubmit = function () { window.alert("Form submitted. Owl being sent..."); var fname = document.getElementById("fName"); if(!fName.value.match("^[A-Z][A-Za-z]+( [A-Z][A-Za-z]*)*$")) { window.alert("You must enter your name."); addClass(fName, "errorDisp"); document.getElementById("fName").focus(); } else return true; } } function addClass(element, classToAdd) { var currentClassValue = element.className; if (currentClassValue.indexOf(classToAdd) == -1) { if ((currentClassValue == null) || (currentClassValue === "")) { element.className = classToAdd; } else { element.className += " " + classToAdd; } } } function removeClass(element, classToRemove) { var currentClassValue = element.className; if (currentClassValue == classToRemove) { element.className = ""; return; } var classValues = currentClassValue.split(" "); var filteredList = []; for (var i = 0 ; i < classValues.length; i++) { if (classToRemove != classValues[i]) { filteredList.push(classValues[i]); } } element.className = filteredList.join(" "); } Here's the HTML. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Hogwarts School of Witchcraft And Wizardry Application Form</title> <link rel="stylesheet" type="text/css" href="main.css" media="screen"/> <script src="script.js" type="text/javascript"></script> </head> <body> <section> <header> <h1>Hogwarts School of Witchcraft And Wizardry</h1> <nav></nav> </header> <main> <form method="post" id="Hogwarts"> <!--<form action="showform.php" method="post" id="Hogwarts">--!> <fieldset id="aboutMe"> <legend id="aboutMeLeg">About Me</legend> <div class="fieldleading"> <label for="fName" class="labelstyle">First name:</label> <input type="text" id="fName" name="fName" autofocus maxlength="50" value="" placeholder="First Name" size="30"> <label for="lName" class="labelstyle">Last name:</label> <input type="text" id="lName" name="lName" required maxlength="50" value="" placeholder="Last Name" pattern="^[A-Za-z ]{3,}$" size="30"> <label for="age" class="labelstyle">Age:</label> <input type="number" id="age" name="age" required min="17" step="1" max="59" value="" placeholder="Age"> </div> <div class="fieldleading"> <label for="date" class="labelstyle">Date Of Birth:</label> <input type="date" name="date1" id="date" required autofocus value=""> </div> <div id="whitegender"> <div class="fieldleading"> <label class="labelstyle">Gender:</label> </div> <input type="radio" name="sex" value="male" class="gender" required="required">Male<br/> <input type="radio" name="sex" value="female" class="gender" required="required">Female<br/> <input type="radio" name="sex" value="other" class="gender" required="required">Other </div> </fieldset> <fieldset id="contactInfo"> <legend id="contactInfoLeg">Contact Information</legend> <div class="fieldleading"> <label for="street" class="labelstyle">Street Address:</label> <input type="text" id="street" name="street" required autofocus maxlength="50" value="" placeholder="Street Address" pattern="^[0-9A-Za-z\. ]+{5,}$" size="35"> <label for="city" class="labelstyle">City:</label> <input type="text" id="city" name="city" required autofocus maxlength="30" value="" placeholder="City" pattern="^[A-Za-z ]{3,}$" size="35"> <label for="State" class="labelstyle">State:</label> <select required id="State" name="State" > <option value="Select Your State">Select Your State</option> <option value="Delaware">Delaware</option> <option value="Pennsylvania">Pennsylvania</option> <option value="New Jersey">New Jersey</option> <option value="Georgia">Georgia</option> <option value="Connecticut">Connecticut</option> <option value="Massachusetts">Massachusetts</option> <option value="Maryland">Maryland</option> <option value="New Hampshire">New Hampshire</option> <option value="New York">New York</option> <option value="Virginia">Virginia</option> </select> </div> <div class="fieldleading"> <label for="zip" class="labelstyle">5-Digit Zip Code:</label> <input id="zip" name="zip" required autofocus maxlength="5" value="" placeholder="Your Zip Code" pattern="^\d{5}$"> <label for="usrtel" class="labelstyle">10-Digit Telephone Number:</label> <input type="tel" name="usrtel" id="usrtel" required autofocus value="" placeholder="123-456-7890" pattern="^\d{3}[\-]\d{3}[\-]\d{4}$"> </div> <div class="fieldleading"> <label for="email1" class="labelstyle">Email:</label> <input type="email" name="email1" id="email1" required autofocus value="" placeholder="[email protected]" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" size="35"> <label for="homepage1" class="labelstyle">Home Page:</label> <input type="url" name="homepage1" id="homepage1" required autofocus value="" placeholder="http://www.hp.com" pattern="https?://.+" size="35"> </div> </fieldset> <fieldset id="yourInterests"> <legend id="yourInterestsLeg">Your Interests</legend> <label for="Major" class="labelstyle">Major/Program Choice:</label> <select required id="Major" name="Major" > <option value="">Select Your Major</option> <option value="Magic1">Magic Horticulture</option> <option value="Magic2">Black Magic</option> <option value="White">White Magic</option> <option value="Blue">Blue Magic</option> <option value="Non">Non-Wizardry Studies</option> </select> </fieldset> <button type="submit" value="Submit" class="submitreset">Submit</button> <button type="reset" value="Reset" class="submitreset">Reset</button> </form> </main> <footer> © 2014 Bennett Nestok </footer> </section> </body> </html> Here's the CSS. a:link { text-decoration: none !important; color:black !important; } a:visited { text-decoration: none !important; color:red !important; } a:active { text-decoration: none !important; color:green !important; } a:hover { text-decoration: none !important; color:blue !important; background-color:white !important; } ::-webkit-input-placeholder { color: #ffffff; } /* gray80 */ :-moz-placeholder { color: #ffffff; } /* Firefox 18- (one color)*/ ::-moz-placeholder { color: #ffffff; } /* Firefox 19+ (double colons) */ :-ms-input-placeholder { color: #ffffff; } body { margin: 0px auto; text-align:center; background-color:grey; font-weight:normal; font-size:12px; font-family: verdana; color:black; background-image:url('bgtexture.jpg'); background-repeat:repeat; } footer { text-align:center; margin: 0px auto; bottom:0px; position:absolute; width:100%; color:white; background-color:black; height:20px; padding-top:4px; } h1 { color:white; text-align:center; margin: 0px auto; margin-bottom:50px; width:100%; background-color:black; padding-top: 13px; padding-bottom: 14px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } button.submitreset { -moz-border-radius: 400px; -webkit-border-radius: 400px; border-radius: 400px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .labelstyle { background-color:#a7a7a7; color:black; -moz-border-radius: 400px; -webkit-border-radius: 400px; border-radius: 400px; padding:3px 3px 3px 3px; } #aboutMe, #contactInfo, #yourInterests { margin-bottom:30px; text-align:left !important; padding: 10px 10px 10px 10px; } #Hogwarts { text-align:center; margin:0px auto; width:780px; padding-top: 20px !important; padding-bottom: 20px !important; background: -webkit-linear-gradient(#474747, grey); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#474747, grey); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#474747, grey); /* For Firefox 3.6 to 15 */ background: linear-gradient(#474747, grey); /* Standard syntax */ border-color:black; border-style: solid; border-width: 2px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } @media (max-width: 800px){ .labelstyle { display: none; } #Hogwarts { width:300px; } h1 { width:304px; margin-bottom:0px; } .fieldleading { margin-bottom:0px !important; } ::-webkit-input-label { /* WebKit browsers */ color: transparent; } :-moz-label { /* Mozilla Firefox 4 to 18 */ color: transparent; } ::-moz-label { /* Mozilla Firefox 19+ */ color: transparent; } :-ms-input-label { /* Internet Explorer 10+ */ color: transparent; } ::-webkit-input-placeholder { /* WebKit browsers */ color: grey !important; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: grey !important; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: grey !important; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: grey !important; } #aboutMe, #contactInfo, #yourInterests { margin-bottom:10px; text-align:left !important; padding: 5px 5px 5px 5px; } } br { display: block; line-height: 10px; } .fieldleading { margin-bottom:10px; } legend { color:white; } #whitegender { color:white; } #moreleading { margin-bottom:10px; } /*opera only hack attempt*/ @media not all and (-webkit-min-device-pixel-ratio:0) { .fieldleading { margin-bottom:30px !important; } } .errorDisp { border-color: red; border-style: solid; border-width: 2px; }

Read the article

How can I add headers to DualList control wpf

- by devnet247

Hi all I am trying to write a Dual List usercontrol in wpf. I am new to wpf and I am finding it quite difficult. This is something I have put together in a couple of hours.It's not that good but a start. I would be extremely grateful if somebody with wpf experience could improve it. The aim is to simplify the usage as much as possible I am kind of stuck. I would like the user of the DualList Control to be able to set up headers how do you do that. Do I need to expose some dependency properties in my control? At the moment when loading the user has to pass a ObservableCollection is there a better way? Could you have a look and possibly make any suggestions with some code? Thanks a lot!!!!! xaml <Grid ShowGridLines="False"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="25px"></ColumnDefinition> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <StackPanel Orientation="Vertical" Grid.Column="0" Grid.Row="0"> <Label Name="lblLeftTitle" Content="Available"></Label> <ListView Name="lvwLeft"> </ListView> </StackPanel> <WrapPanel Grid.Column="1" Grid.Row="0"> <Button Name="btnMoveRight" Content=">" Width="25" Margin="0,35,0,0" Click="btnMoveRight_Click" /> <Button Name="btnMoveAllRight" Content=">>" Width="25" Margin="0,05,0,0" Click="btnMoveAllRight_Click" /> <Button Name="btnMoveLeft" Content="<" Width="25" Margin="0,25,0,0" Click="btnMoveLeft_Click" /> <Button Name="btnMoveAllLeft" Content="<<" Width="25" Margin="0,05,0,0" Click="btnMoveAllLeft_Click" /> </WrapPanel> <StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="0"> <Label Name="lblRightTitle" Content="Selected"></Label> <ListView Name="lvwRight"> </ListView> </StackPanel> </Grid> Client public partial class DualListTest { public ObservableCollection<ListViewItem> LeftList { get; set; } public ObservableCollection<ListViewItem> RightList { get; set; } public DualListTest() { InitializeComponent(); LoadCustomers(); LoadDualList(); } private void LoadDualList() { dualList1.Load(LeftList, RightList); } private void LoadCustomers() { //Pretend we are getting a list of Customers from a repository. //Some go in the left List(Good Customers) some go in the Right List(Bad Customers). LeftList = new ObservableCollection<ListViewItem>(); RightList = new ObservableCollection<ListViewItem>(); var customers = GetCustomers(); foreach (var customer in customers) { if (customer.Status == CustomerStatus.Good) { LeftList.Add(new ListViewItem { Content = customer }); } else { RightList.Add(new ListViewItem{Content=customer }); } } } private static IEnumerable<Customer> GetCustomers() { return new List<Customer> { new Customer {Name = "Jo Blogg", Status = CustomerStatus.Good}, new Customer {Name = "Rob Smith", Status = CustomerStatus.Good}, new Customer {Name = "Michel Platini", Status = CustomerStatus.Good}, new Customer {Name = "Roberto Baggio", Status = CustomerStatus.Good}, new Customer {Name = "Gio Surname", Status = CustomerStatus.Bad}, new Customer {Name = "Diego Maradona", Status = CustomerStatus.Bad} }; } } UserControl public partial class DualList:UserControl { public ObservableCollection<ListViewItem> LeftListCollection { get; set; } public ObservableCollection<ListViewItem> RightListCollection { get; set; } public DualList() { InitializeComponent(); } public void Load(ObservableCollection<ListViewItem> leftListCollection, ObservableCollection<ListViewItem> rightListCollection) { LeftListCollection = leftListCollection; RightListCollection = rightListCollection; lvwLeft.ItemsSource = leftListCollection; lvwRight.ItemsSource = rightListCollection; EnableButtons(); } public static DependencyProperty LeftTitleProperty = DependencyProperty.Register("LeftTitle", typeof(string), typeof(Label)); public static DependencyProperty RightTitleProperty = DependencyProperty.Register("RightTitle", typeof(string), typeof(Label)); public static DependencyProperty LeftListProperty = DependencyProperty.Register("LeftList", typeof(ListView), typeof(DualList)); public static DependencyProperty RightListProperty = DependencyProperty.Register("RightList", typeof(ListView), typeof(DualList)); public string LeftTitle { get { return (string)lblLeftTitle.Content; } set { lblLeftTitle.Content = value; } } public string RightTitle { get { return (string)lblRightTitle.Content; } set { lblRightTitle.Content = value; } } public ListView LeftList { get { return lvwLeft; } set { lvwLeft = value; } } public ListView RightList { get { return lvwRight; } set { lvwRight = value; } } private void EnableButtons() { if (lvwLeft.Items.Count > 0) { btnMoveRight.IsEnabled = true; btnMoveAllRight.IsEnabled = true; } else { btnMoveRight.IsEnabled = false; btnMoveAllRight.IsEnabled = false; } if (lvwRight.Items.Count > 0) { btnMoveLeft.IsEnabled = true; btnMoveAllLeft.IsEnabled = true; } else { btnMoveLeft.IsEnabled = false; btnMoveAllLeft.IsEnabled = false; } if (lvwLeft.Items.Count != 0 || lvwRight.Items.Count != 0) return; btnMoveLeft.IsEnabled = false; btnMoveAllLeft.IsEnabled = false; btnMoveRight.IsEnabled = false; btnMoveAllRight.IsEnabled = false; } private void MoveRight() { while (lvwLeft.SelectedItems.Count > 0) { var selectedItem = (ListViewItem)lvwLeft.SelectedItem; LeftListCollection.Remove(selectedItem); RightListCollection.Add(selectedItem); } lvwRight.ItemsSource = RightListCollection; lvwLeft.ItemsSource = LeftListCollection; EnableButtons(); } private void MoveAllRight() { while (lvwLeft.Items.Count > 0) { var item = (ListViewItem)lvwLeft.Items[lvwLeft.Items.Count - 1]; LeftListCollection.Remove(item); RightListCollection.Add(item); } lvwRight.ItemsSource = RightListCollection; lvwLeft.ItemsSource = LeftListCollection; EnableButtons(); } private void MoveAllLeft() { while (lvwRight.Items.Count > 0) { var item = (ListViewItem)lvwRight.Items[lvwRight.Items.Count - 1]; RightListCollection.Remove(item); LeftListCollection.Add(item); } lvwRight.ItemsSource = RightListCollection; lvwLeft.ItemsSource = LeftListCollection; EnableButtons(); } private void MoveLeft() { while (lvwRight.SelectedItems.Count > 0) { var selectedCustomer = (ListViewItem)lvwRight.SelectedItem; LeftListCollection.Add(selectedCustomer); RightListCollection.Remove(selectedCustomer); } lvwRight.ItemsSource = RightListCollection; lvwLeft.ItemsSource = LeftListCollection; EnableButtons(); } private void btnMoveLeft_Click(object sender, RoutedEventArgs e) { MoveLeft(); } private void btnMoveAllLeft_Click(object sender, RoutedEventArgs e) { MoveAllLeft(); } private void btnMoveRight_Click(object sender, RoutedEventArgs e) { MoveRight(); } private void btnMoveAllRight_Click(object sender, RoutedEventArgs e) { MoveAllRight(); } }

Read the article

Contact Form + jQuery validationengine

- by BigMad

I created this contact form, inserting jQuery fadeLabel and validationEngine to beautify the form the file index.php / .html (I have not yet figured out which of the two versions put it) scripts are index: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="/js/backtop.js"></script> <script src="/js/fadeLabel.js"></script> <script> $(document).ready(function () { $('form .fadeLabel').fadeLabel(); }); </script> <script src="/js/validationEngine-it.js"></script> <script src="/js/validationEngine.js"></script> <script> $(document).ready(function(){ $("#form_box").validationEngine({ ajaxSubmit: true, ajaxSubmitFile: "contact.php", ajaxSubmitMessage: "Thank you, We will contact you soon !", success : false, failure : function() {} }) }); </script> <script src="/js/contactform.js"></script> however this is the part of the form's code <p id="form_success" class="success hide"><strong>Grazie!</strong> Il tuo messaggio è stato inviato con successo.</p> <form id="form_box"> <fieldset> <p><label for="name">Nome*</label><input type="text" id="name" name="name" class="validate[required] fadeLabel" value=""/></p> <p><label for="email">E-mail*</label><input type="email" id="email" name="email" class="validate[required,custom[email]] fadeLabel" value=""/></p> <p><label for="website">Sito web</label><input type="url" id="website" name="website" class="fadeLabel" value=""/></p> <p><label for="message">Messaggio*</label><textarea id="message" name="message" class="validate[required] fadeLabel" cols="30" rows="10" value=""></textarea></p> </fieldset> <p id="form_submit" class="submit"><button class="send">Invia</button> *Campi obbligatori</p> <p id="form_send" class="send hide">Invio in corso…</p> <p id="form_error" class="submit error hide"><button class="send">Invia</button> Si prega di correggere l'errore e re-inviarlo.</p> </form> This is the contact.php where it receives the data and sends 2 emails (one for me with the data and a thank you to those who contacted me) contact.php: <?php //include variables $my_email = "[email protected]"; $my_site = "adrianogenovese.com"; session_start(); $name = $_POST['name']; $email = $_POST['email']; $website = $_POST['website']; $message = $_POST['message']; $ip = $_SERVER['REMOTE_ADDR']; //beginning to email me $to = $my_email; $sbj = "Richiesta Informazioni - $my_site"; $msg = " <html> ... //the body of the email to me ... </html> "; $from = $email; $headers = 'MIME-Version: 1.0' . "\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\n"; $headers .= "From: $from"; mail($to,$sbj,$msg,$headers); //email sent to me //beginning of the email recipient $toClient = $email; $msgClient = " <html> ... //the body of the email recipient ... </html> "; $fromClient = $my_email; $sbjClient = "Grazie $name per aver contattato $my_site "; $headersClient = 'MIME-Version: 1.0' . "\r\n"; $headersClient .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; $headersClient .= "From: $fromClient"; mail($toClient,$sbjClient,$msgClient,$headersClient); //mail inviata al cliente //order confirmation email //Reset error session_destroy(); exit; ?> this is the contact form jscript contactform.js: $(document).ready(function() { $(".send").click(function(){ $("#form_send").removeClass('hide'); $("#form_submit").addClass('hide'); $("#form_error").addClass('hide'); var name = $("#name").val(); var email = $("#email").val(); var website = $("#website").val(); var message = $("#message").val(); if (name == "" || email == "" ) { $("#form_send").addClass('hide'); $("#form_error").removeClass('hide'); } else { $.ajax({ type: "POST", url: "contatti/contact.php", data: "name=" + name + "&email=" + email + "&message=" + message + "&website=" + website, dataType: "html", success: function(msg) { $("#form_send").addClass('hide').delay(3000).fadeOut(3000); $("#form_success").removeClass('hide'); $("#form_box").addClass('hide').slideUp(2000).fadeOut(); }, error: function() { alert("An unexpected error occurred..."); } }); } }); //end form });//end Dom The jQuery seem to work very well, I wanted to make sure that the page is not of the form updated or go to another page (the only thing that works for now) compensation reflected in the following problems: I always leave the alert of contactform.js Does not send any mail, it to me to recipient I can not do the work properly. delay () .fadeOut / fadeIn and. SlideUp (). FadeOut () so that the sending of this email appears for 3 seconds "$ (" # form_send "). addClass ('hide')" before you do anything else then the form disappears up using some second type slideUp "$ (" # form_box "). addClass ('hide')" by displaying just the "$ (" # form_success "). removeClass ('hide')" in the address bar also appears the form data (e.g. ../index.php?name=test&email=example%40mail.com&website=&message=helloworld)

Read the article

asp.net grid view hyper link pass values to new window

- by srihari

hai guys here is my question please help me I have a gridview with hyperlink fields here my requirement is if I click on hyperlink of particular row I need to display that particular row values into other page in that page user will edit record values after that if he clicks on update button I need to update that record values and get back to previous home page. if iam clicking hyper link in first window new window should open with out any url tool bar and minimize close buttons like popup modular Ajax ModalPopUpExtender but iam un able to ge that that one please help me the fillowing code is defalut.aspx <head runat="server"> <title>PassGridviewRow values </title> <style type="text/css"> #gvrecords tr.rowHover:hover { background-color:Yellow; font-family:Arial; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView runat="server" ID="gvrecords" AutoGenerateColumns="false" HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" DataKeyNames="UserId" RowStyle-CssClass="rowHover"> <Columns> <asp:TemplateField HeaderText="Change Password" > <ItemTemplate> <a href ='<%#"UpdateGridviewvalues.aspx?UserId="+DataBinder.Eval(Container.DataItem,"UserId") %>'> <%#Eval("UserName") %> </a> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> <asp:BoundField DataField="LastName" HeaderText="LastName" /> <asp:BoundField DataField="Email" HeaderText="Email" /> </Columns> </asp:GridView> </div> </form> </body> </html> following code default.aspx.cs code using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGridview(); } } protected void BindGridview() { SqlConnection con = new SqlConnection("Data Source=.;Integrated Security=SSPI;Initial Catalog=testdb1"); con.Open(); SqlCommand cmd = new SqlCommand("select * from UserDetails", con); SqlDataAdapter da = new SqlDataAdapter(cmd); cmd.ExecuteNonQuery(); con.Close(); DataSet ds = new DataSet(); da.Fill(ds); gvrecords.DataSource = ds; gvrecords.DataBind(); } } this is updategridviewvalues.aspx <head runat="server"> <title>Update Gridview Row Values</title> <script type="text/javascript"> function Showalert(username) { alert(username + ' details updated successfully.'); if (alert) { window.location = 'Default.aspx'; } } </script> </head> <body> <form id="form1" runat="server"> <div> <table> <tr> <td colspan="2" align="center"> <b> Edit User Details</b> </td> </tr> <tr> <td> User Name: </td> <td> <asp:Label ID="lblUsername" runat="server"/> </td> </tr> <tr> <td> First Name: </td> <td> <asp:TextBox ID="txtfname" runat="server"></asp:TextBox> </td> </tr> <tr> <td> Last Name: </td> <td> <asp:TextBox ID="txtlname" runat="server"></asp:TextBox> </td> </tr> <tr> <td> Email: </td> <td> <asp:TextBox ID="txtemail" runat="server"></asp:TextBox> </td> </tr> <tr> <td> </td> <td> <asp:Button ID="btnUpdate" runat="server" Text="Update" onclick="btnUpdate_Click" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" onclick="btnCancel_Click"/> </td> </tr> </table> </div> </form> </body> </html> and my updategridviewvalues.aspx.cs code is follows using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class UpdateGridviewvalues : System.Web.UI.Page { SqlConnection con = new SqlConnection("Data Source=.;Integrated Security=SSPI;Initial Catalog=testdb1"); private int userid=0; protected void Page_Load(object sender, EventArgs e) { userid = Convert.ToInt32(Request.QueryString["UserId"].ToString()); if(!IsPostBack) { BindControlvalues(); } } private void BindControlvalues() { con.Open(); SqlCommand cmd = new SqlCommand("select * from UserDetails where UserId=" + userid, con); SqlDataAdapter da = new SqlDataAdapter(cmd); cmd.ExecuteNonQuery(); con.Close(); DataSet ds = new DataSet(); da.Fill(ds); lblUsername.Text = ds.Tables[0].Rows[0][1].ToString(); txtfname.Text = ds.Tables[0].Rows[0][2].ToString(); txtlname.Text = ds.Tables[0].Rows[0][3].ToString(); txtemail.Text = ds.Tables[0].Rows[0][4].ToString(); } protected void btnUpdate_Click(object sender, EventArgs e) { con.Open(); SqlCommand cmd = new SqlCommand("update UserDetails set FirstName='" + txtfname.Text + "',LastName='" + txtlname.Text + "',Email='" + txtemail.Text + "' where UserId=" + userid, con); SqlDataAdapter da = new SqlDataAdapter(cmd); int result= cmd.ExecuteNonQuery(); con.Close(); if(result==1) { ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowSuccess", "javascript:Showalert('"+lblUsername.Text+"')", true); } } protected void btnCancel_Click(object sender, EventArgs e) { Response.Redirect("~/Default.aspx"); } } My requirement is new window should come like pop window as new window with out having url and close button my database tables is ColumnName DataType ------------------------------------------- UserId Int(set identity property=true) UserName varchar(50) FirstName varchar(50) LastName varchar(50) Email Varchar(50)

Read the article

Wired component null in seam EntityHome action

- by rangalo

I have a custom EntityHome class. I wire the dependent entity in the wire method, but when I call the action (persist) the wired component is always null. What could be the reason, similar code generated by seam gen is apparently working. Here is the entity class. I have overrden persist method to log the value of the wired element. @Name("roundHome") @Scope(ScopeType.CONVERSATION) public class RoundHome extends EntityHome<Round>{ @In(required = false) private Golfer currentGolfer; @In(create = true) private TeeSetHome teeSetHome; @Override public String persist() { logger.info("Persist called"); if (null != getInstance().getTeeSet() ) { logger.info("teeSet not null in persist"); } else { logger.info("teeSet null in persist"); // wire(); } String retVal = super.persist(); //To change body of overridden methods use File | Settings | File Templates. return retVal; } @Logger private Log logger; public void wire() { logger.info("wire called"); TeeSet teeSet = teeSetHome.getDefinedInstance(); if (null != teeSet) { getInstance().setTeeSet(teeSet); logger.info("Successfully wired the teeSet instance with color: " + teeSet.getColor()); } } public boolean isWired() { logger.info("is wired called"); if(null == getInstance().getTeeSet()) { logger.info("wired teeSet instance is null, the button will be disabled !"); return false; } else { logger.info("wired teeSet instance is NOT null, the button will be enabled !"); logger.info("teeSet color: "+getInstance().getTeeSet().getColor()); return true; } } @RequestParameter public void setRoundId(Long id) { super.setId(id); } @Override protected Round createInstance() { Round round = super.createInstance(); round.setGolfer(currentGolfer); round.setDate(new java.sql.Date(System.currentTimeMillis())); return round; } } Here the xhtml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:a="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml"> <ui:define name="body"> <h:form id="roundform"> <rich:panel> <f:facet name="header>"> #{roundHome.managed ? 'Edit' : 'Add' } Round </f:facet> <s:decorate id="dateField" template="layout/edit.xhtml"> <ui:define name="label">Date:</ui:define> <rich:calendar id="date" datePattern="dd/MM/yyyy" value="#{round.date}"/> </s:decorate> <s:decorate id="notesField" template="layout/edit.xhtml"> <ui:define name="label">Notes:</ui:define> <h:inputTextarea id="notes" cols="80" rows="3" value="#{round.notes}" /> </s:decorate> <s:decorate id="totalScoreField" template="layout/edit.xhtml"> <ui:define name="label">Total Score:</ui:define> <h:inputText id="totalScore" value="#{round.totalScore}" /> </s:decorate> <s:decorate id="weatherField" template="layout/edit.xhtml"> <ui:define name="label">Weather:</ui:define> <h:selectOneMenu id="weather" value="#{round.weather}"> <s:selectItems var="_weather" value="#{weatherCategories}" label="#{_weather.label}" noSelectionLabel=" Select " /> <s:convertEnum/> </h:selectOneMenu> </s:decorate> <div style="clear: both;"> <span class="required">*</span> required fields </div> </rich:panel> <div class="actionButtons"> <h:commandButton id="save" value="Save" action="#{roundHome.persist}" rendered="#{!roundHome.managed}" />  <h:commandButton id="update" value="Update" action="#{roundHome.update}" rendered="#{roundHome.managed}" /> <h:commandButton id="delete" value="Delete" action="#{roundHome.remove}" rendered="#{roundHome.managed}" /> <s:button id="discard" value="Discard changes" propagation="end" view="/Round.xhtml" rendered="#{roundHome.managed}" /> <s:button id="cancel" value="Cancel" propagation="end" view="/#{empty roundFrom ? 'RoundList' : roundFrom}.xhtml" rendered="#{!roundHome.managed}" /> </div> <rich:tabPanel> <rich:tab label="Tee Set"> <div class="association"> <h:outputText value="Tee set not selected" rendered="#{round.teeSet == null}" /> <rich:dataTable var="_teeSet" value="#{round.teeSet}" rendered="#{round.teeSet != null}"> <h:column> <f:facet name="header">Course</f:facet>#{_teeSet.course.name} </h:column> <h:column> <f:facet name="header">Color</f:facet>#{_teeSet.color} </h:column> <h:column> <f:facet name="header">Position</f:facet>#{_teeSet.pos} </h:column> </rich:dataTable> </div> </rich:tab> </rich:tabPanel> </h:form> </ui:define> </ui:composition>

Read the article

Dealing with external processes

- by Jesse Aldridge

I've been working on a gui app that needs to manage external processes. Working with external processes leads to a lot of issues that can make a programmer's life difficult. I feel like maintenence on this app is taking an unacceptably long time. I've been trying to list the things that make working with external processes difficult so that I can come up with ways of mitigating the pain. This kind of turned into a rant which I thought I'd post here in order to get some feedback and to provide some guidance to anybody thinking about sailing into these very murky waters. Here's what I've got so far: Output from the child can get mixed up with output from the parent. This can make both outputs misleading and hard to read. It can be hard to tell what came from where. It becomes harder to figure out what's going on when things are asynchronous. Here's a contrived example: import textwrap, os, time from subprocess import Popen test_path = 'test_file.py' with open(test_path, 'w') as file: file.write(textwrap.dedent(''' import time for i in range(3): print 'Hello %i' % i time.sleep(1)''')) proc = Popen('python -B "%s"' % test_path) for i in range(3): print 'Hello %i' % i time.sleep(1) os.remove(test_path) I guess I could have the child process write its output to a file. But it can be annoying to have to open up a file every time I want to see the result of a print statement. If I have code for the child process I could add a label, something like print 'child: Hello %i', but it can be annoying to do that for every print. And it adds some noise to the output. And of course I can't do it if I don't have access to the code. I could manually manage the process output. But then you open up a huge can of worms with threads and polling and stuff like that. A simple solution is to treat processes like synchronous functions, that is, no further code executes until the process completes. In other words, make the process block. But that doesn't work if you're building a gui app. Which brings me to the next problem... Blocking processes cause the gui to become unresponsive. import textwrap, sys, os from subprocess import Popen from PyQt4.QtGui import * from PyQt4.QtCore import * test_path = 'test_file.py' with open(test_path, 'w') as file: file.write(textwrap.dedent(''' import time for i in range(3): print 'Hello %i' % i time.sleep(1)''')) app = QApplication(sys.argv) button = QPushButton('Launch process') def launch_proc(): # Can't move the window until process completes proc = Popen('python -B "%s"' % test_path) proc.communicate() button.connect(button, SIGNAL('clicked()'), launch_proc) button.show() app.exec_() os.remove(test_path) Qt provides a process wrapper of its own called QProcess which can help with this. You can connect functions to signals to capture output relatively easily. This is what I'm currently using. But I'm finding that all these signals behave suspiciously like goto statements and can lead to spaghetti code. I think I want to get sort-of blocking behavior by having the 'finished' signal from QProcess call a function containing all the code that comes after the process call. I think that should work but I'm still a bit fuzzy on the details... Stack traces get interrupted when you go from the child process back to the parent process. If a normal function screws up, you get a nice complete stack trace with filenames and line numbers. If a subprocess screws up, you'll be lucky if you get any output at all. You end up having to do a lot more detective work everytime something goes wrong. Speaking of which, output has a way of disappearing when dealing external processes. Like if you run something via the windows 'cmd' command, the console will pop up, execute the code, and then disappear before you have a chance to see the output. You have to pass the /k flag to make it stick around. Similar issues seem to crop up all the time. I suppose both problems 3 and 4 have the same root cause: no exception handling. Exception handling is meant to be used with functions, it doesn't work with processes. Maybe there's some way to get something like exception handling for processes? I guess that's what stderr is for? But dealing with two different streams can be annoying in itself. Maybe I should look into this more... Processes can hang and stick around in the background without you realizing it. So you end up yelling at your computer cuz it's going so slow until you finally bring up your task manager and see 30 instances of the same process hanging out in the background. Also, hanging background processes can interefere with other instances of the process in various fun ways, such as causing permissions errors by holding a handle to a file or someting like that. It seems like an easy solution to this would be to have the parent process kill the child process on exit if the child process didn't close itself. But if the parent process crashes, cleanup code might not get called and the child can be left hanging. Also, if the parent waits for the child to complete, and the child is in an infinite loop or something, you can end up with two hanging processes. This problem can tie in to problem 2 for extra fun, causing your gui to stop responding entirely and force you to kill everything with the task manager. F***ing quotes Parameters often need to be passed to processes. This is a headache in itself. Especially if you're dealing with file paths. Say... 'C:/My Documents/whatever/'. If you don't have quotes, the string will often be split at the space and interpreted as two arguments. If you need nested quotes you can use ' and ". But if you need to use more than two layers of quotes, you have to do some nasty escaping, for example: "cmd /k 'python \'path 1\' \'path 2\''". A good solution to this problem is passing parameters as a list rather than as a single string. Subprocess allows you to do this. Can't easily return data from a subprocess. You can use stdout of course. But what if you want to throw a print in there for debugging purposes? That's gonna screw up the parent if it's expecting output formatted a certain way. In functions you can print one string and return another and everything works just fine. Obscure command-line flags and a crappy terminal based help system. These are problems I often run into when using os level apps. Like the /k flag I mentioned, for holding a cmd window open, who's idea was that? Unix apps don't tend to be much friendlier in this regard. Hopefully you can use google or StackOverflow to find the answer you need. But if not, you've got a lot of boring reading and frusterating trial and error to do. External factors. This one's kind of fuzzy. But when you leave the relatively sheltered harbor of your own scripts to deal with external processes you find yourself having to deal with the "outside world" to a much greater extent. And that's a scary place. All sorts of things can go wrong. Just to give a random example: the cwd in which a process is run can modify it's behavior. There are probably other issues, but those are the ones I've written down so far. Any other snags you'd like to add? Any suggestions for dealing with these problems?

Read the article

Execption Error in c#

- by Kumu

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.IO; using System.Runtime.Serialization.Formatters.Binary; namespace FoolballLeague { public partial class MainMenu : Form { FootballLeagueDatabase footballLeagueDatabase; Game game; Login login; public MainMenu() { InitializeComponent(); changePanel(1); } public MainMenu(FootballLeagueDatabase footballLeagueDatabaseIn) { InitializeComponent(); footballLeagueDatabase = footballLeagueDatabaseIn; } private void Form_Loaded(object sender, EventArgs e) { } private void gameButton_Click(object sender, EventArgs e) { int option = 0; changePanel(option); } private void scoreboardButton_Click(object sender, EventArgs e) { int option = 1; changePanel(option); } private void changePanel(int optionIn) { gamePanel.Hide(); scoreboardPanel.Hide(); string title = "Football League System"; switch (optionIn) { case 0: gamePanel.Show(); this.Text = title + " - Game Menu"; break; case 1: scoreboardPanel.Show(); this.Text = title + " - Display Menu"; break; } } private void logoutButton_Click(object sender, EventArgs e) { login = new Login(); login.Show(); this.Hide(); } private void addGameButton_Click(object sender, EventArgs e) { if ((homeTeamTxt.Text.Length) == 0) MessageBox.Show("You must enter a Home Team"); else if (homeScoreUpDown.Value > 9 || homeScoreUpDown.Minimum < 0) MessageBox.Show("You must enter one digit between 0 and 9"); else if ((awayTeamTxt.Text.Length) == 0) MessageBox.Show("You must enter a Away Team"); else if (homeScoreUpDown.Value > 9 || homeScoreUpDown.Value < 0) MessageBox.Show("You must enter one digit between 0 to 9"); else { //checkGameInputFields(); game = new Game(homeTeamTxt.Text, int.Parse(homeScoreUpDown.Value.ToString()), awayTeamTxt.Text, int.Parse(awayScoreUpDown.Value.ToString())); MessageBox.Show("Home Team -" + '\t' + homeTeamTxt.Text + '\t' + "and" + '\r' + "Away Team -" + '\t' + awayTeamTxt.Text + '\t' + "created"); footballLeagueDatabase.AddGame(game); //clearCreateStudentInputFields(); } } private void timer1_Tick(object sender, EventArgs e) { displayDateAndTime(); } private void displayDateAndTime() { dateLabel.Text = DateTime.Today.ToLongDateString(); timeLabel.Text = DateTime.Now.ToShortTimeString(); } private void displayResultsButton_Click(object sender, EventArgs e) { Game game = new Game(homeTeamTxt.Text, int.Parse(homeScoreUpDown.Value.ToString()), awayTeamTxt.Text, int.Parse(awayScoreUpDown.Value.ToString())); gameResultsListView.Items.Clear(); gameResultsListView.View = View.Details; ListViewItem row = new ListViewItem(); row.SubItems.Add(game.HomeTeam.ToString()); row.SubItems.Add(game.HomeScore.ToString()); row.SubItems.Add(game.AwayTeam.ToString()); row.SubItems.Add(game.AwayScore.ToString()); gameResultsListView.Items.Add(row); } private void displayGamesButton_Click(object sender, EventArgs e) { Game game = new Game("Home", 2, "Away", 4);//homeTeamTxt.Text, int.Parse(homeScoreUpDown.Value.ToString()), awayTeamTxt.Text, int.Parse(awayScoreUpDown.Value.ToString())); modifyGamesListView.Items.Clear(); modifyGamesListView.View = View.Details; ListViewItem row = new ListViewItem(); row.SubItems.Add(game.HomeTeam.ToString()); row.SubItems.Add(game.HomeScore.ToString()); row.SubItems.Add(game.AwayTeam.ToString()); row.SubItems.Add(game.AwayScore.ToString()); modifyGamesListView.Items.Add(row); } } } This is the whole code and I got same error like previous question. Unhandled Execption has occuredin you application.If you click...............click Quit.the application will close immediately. Object reference not set to an instance of an object. And the following details are in the error message. See the end of this message for details on invoking just-in-time (JIT) debugging instead of this dialog box. ***** Exception Text ******* System.NullReferenceException: Object reference not set to an instance of an object. at FoolballLeague.MainMenu.addGameButton_Click(Object sender, EventArgs e) in C:\Users\achini\Desktop\FootballLeague\FootballLeague\MainMenu.cs:line 91 at System.Windows.Forms.Control.OnClick(EventArgs e) at System.Windows.Forms.Button.OnMouseUp(MouseEventArgs mevent) at System.Windows.Forms.Control.WmMouseUp(Message& m, MouseButtons button, Int32 clicks) at System.Windows.Forms.Control.WndProc(Message& m) at System.Windows.Forms.ButtonBase.WndProc(Message& m) at System.Windows.Forms.Button.WndProc(Message& m) at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m) at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam) ***** Loaded Assemblies ******* mscorlib Assembly Version: 2.0.0.0 Win32 Version: 2.0.50727.4927 (NetFXspW7.050727-4900) CodeBase: file:///C:/Windows/Microsoft.NET/Framework64/v2.0.50727/mscorlib.dll ---------------------------------------- FootballLeague Assembly Version: 1.0.0.0 Win32 Version: 1.0.0.0 CodeBase: file:///C:/Users/achini/Desktop/FootballLeague/FootballLeague/bin/Debug/FootballLeague.exe ---------------------------------------- System.Windows.Forms Assembly Version: 2.0.0.0 Win32 Version: 2.0.50727.4927 (NetFXspW7.050727-4900) CodeBase: file:///C:/Windows/assembly/GAC_MSIL/System.Windows.Forms/2.0.0.0__b77a5c561934e089/System.Windows.Forms.dll ---------------------------------------- System Assembly Version: 2.0.0.0 Win32 Version: 2.0.50727.4927 (NetFXspW7.050727-4900) CodeBase: file:///C:/Windows/assembly/GAC_MSIL/System/2.0.0.0__b77a5c561934e089/System.dll ---------------------------------------- System.Drawing Assembly Version: 2.0.0.0 Win32 Version: 2.0.50727.4927 (NetFXspW7.050727-4900) CodeBase: file:///C:/Windows/assembly/GAC_MSIL/System.Drawing/2.0.0.0__b03f5f7f11d50a3a/System.Drawing.dll ---------------------------------------- System.Configuration Assembly Version: 2.0.0.0 Win32 Version: 2.0.50727.4927 (NetFXspW7.050727-4900) CodeBase: file:///C:/Windows/assembly/GAC_MSIL/System.Configuration/2.0.0.0__b03f5f7f11d50a3a/System.Configuration.dll ---------------------------------------- System.Xml Assembly Version: 2.0.0.0 Win32 Version: 2.0.50727.4927 (NetFXspW7.050727-4900) CodeBase: file:///C:/Windows/assembly/GAC_MSIL/System.Xml/2.0.0.0__b77a5c561934e089/System.Xml.dll ***** JIT Debugging ******* To enable just-in-time (JIT) debugging, the .config file for this application or computer (machine.config) must have the jitDebugging value set in the system.windows.forms section. The application must also be compiled with debugging enabled. For example: When JIT debugging is enabled, any unhandled exception will be sent to the JIT debugger registered on the computer rather than be handled by this dialog box. I need to add the games to using the addGameButton and the save those added games and display them in the list view (gameResultsListView). Now I can added a game and display in the list view.But when I pressed the button addGameButton I got the above error message. If you can please give me a solution to this problem.

Read the article

java.lang.ArrayIndexOutOfBoundsException

- by thefonso

Here is the code. import java.applet.Applet; import java.awt.Button; import java.awt.Color; import java.awt.Graphics; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class GuessingGame extends Applet{ /** * */ private static final long serialVersionUID = 1L; private final int START_X = 20; private final int START_Y = 40; private final int ROWS = 4; private final int COLS = 4; private final int BOX_WIDTH = 20; private final int BOX_HEIGHT = 20; //this is used to keep track of boxes that have been matched. private boolean matchedBoxes[][]; //this is used to keep track of two boxes that have been clicked. private MaskableBox chosenBoxes[]; private MaskableBox boxes[][]; private Color boxColors[][]; private Button resetButton; public void init() { boxes = new MaskableBox[ROWS][COLS]; boxColors = new Color[ROWS][COLS]; resetButton = new Button("Reset Colors"); resetButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { randomizeColors(); buildBoxes(); repaint(); } }); add(resetButton); //separate building colors so we can add a button later //to re-randomize them. randomizeColors(); buildBoxes(); } public void paint(Graphics g) { for (int row =0; row < boxes.length; row ++) { for (int col = 0; col < boxes[row].length; col++) { if(boxes[row][col].isClicked()) { //boxes[row][col].setMaskColor(Color.black); //boxes[row][col].setMask(!boxes[row][col].isMask()); //boxes[row][col].setClicked(false); //} if (!matchedBoxes[row][col]) { gameLogic(boxes[row][col]); //boxes[row][col].draw(g); } } } } //loop through the boxes and draw them. for (int row = 0; row < boxes.length; row++) { for (int col = 0; col < boxes[row].length; col++) { boxes[row][col].draw(g); } } } public void gameLogic(MaskableBox box) { if ((chosenBoxes[0] != null)&&(chosenBoxes[1] != null)) { if(chosenBoxes[0].getBackColor() == chosenBoxes[1].getBackColor()) { for (int i=0; 0 <= chosenBoxes.length; ++i ) { for(int row = 0; row < boxes.length; row++) { for(int col = 0; col < boxes[row].length; col++) { if( boxes[row][col] == chosenBoxes[i] ) { System.out.println("boxes [row][col] == chosenBoxes[] at index: " + i ); matchedBoxes[row][col] = true; break; } } } } }else { chosenBoxes[0].setMask(true); chosenBoxes[1].setMask(true); } chosenBoxes = new MaskableBox[2]; }else { if (chosenBoxes[0] == null) { chosenBoxes[0] = box; chosenBoxes[0].setMask(false); return; }else{ if (chosenBoxes[1] == null) { chosenBoxes[1] = box; chosenBoxes[1].setMask(false); } } } } private void removeMouseListeners() { for(int row = 0; row < boxes.length; row ++) { for(int col = 0; col < boxes[row].length; col++) { removeMouseListener(boxes[row][col]); } } } private void buildBoxes() { // need to clear any chosen boxes when building new array. chosenBoxes = new MaskableBox[2]; // create a new matchedBoxes array matchedBoxes = new boolean [ROWS][COLS]; removeMouseListeners(); for(int row = 0; row < boxes.length; row++) { for(int col = 0; col < boxes[row].length; col++) { boxes[row][col] = new MaskableBox(START_X + col * BOX_WIDTH, START_Y + row * BOX_HEIGHT, BOX_WIDTH, BOX_HEIGHT, Color.gray, boxColors[row][col], true, true, this); addMouseListener(boxes[row][col]); } } } private void randomizeColors() { int[] chosenColors = {0,0,0,0,0,0,0,0}; Color[] availableColors = {Color.red, Color.blue, Color.green, Color.yellow, Color.cyan, Color.magenta, Color.pink, Color.orange }; for(int row = 0; row < boxes.length; row++) { for (int col = 0; col < boxes[row].length; col++) { for (;;) { int rnd = (int) (Math.random() * 8); if (chosenColors[rnd]< 2) { chosenColors[rnd]++; boxColors[row][col] = availableColors[rnd]; break; } } } } } } here is the second batch of code containing maskablebox import java.awt.Color; import java.awt.Container; import java.awt.Graphics; public class MaskableBox extends ClickableBox { private boolean mask; private Color maskColor; Container parent; public MaskableBox(int x, int y, int width, int height, Color borderColor, Color backColor, boolean drawBorder, boolean mask, Container parent ) { super(x, y, width, height, borderColor, backColor, drawBorder, parent); this.parent = parent; this.mask = mask; } public void draw(Graphics g) { if(mask=false) { super.draw(g); // setOldColor(g.getColor()); // g.setColor(maskColor); // g.fillRect(getX(),getY(),getWidth(), getHeight()); // if(isDrawBorder()) { // g.setColor(getBorderColor()); // g.drawRect(getX(),getY(),getWidth(),getHeight()); // } // g.setColor(getOldColor()); }else { if(mask=true) { //super.draw(g); setOldColor(g.getColor()); g.setColor(maskColor); g.fillRect(getX(),getY(),getWidth(), getHeight()); if(isDrawBorder()) { g.setColor(getBorderColor()); g.drawRect(getX(),getY(),getWidth(),getHeight()); } g.setColor(getOldColor()); } } } public boolean isMask() { return mask; } public void setMask(boolean mask) { this.mask = mask; } public Color getMaskColor() { return maskColor; } public void setMaskColor(Color maskColor) { this.maskColor = maskColor; } } I keep getting these error messages. I'm going nuts trying to figure this out. can anyone tell me what I'm doing wrong? boxes [row][col] == chosenBoxes[] at index: 0 boxes [row][col] == chosenBoxes[] at index: 1 Exception in thread "AWT-EventQueue-1" java.lang.ArrayIndexOutOfBoundsException: 2 at GuessingGame.gameLogic(GuessingGame.java:77) at GuessingGame.paint(GuessingGame.java:55) at java.awt.Container.update(Container.java:1801) at sun.awt.RepaintArea.updateComponent(RepaintArea.java:239) at sun.awt.RepaintArea.paint(RepaintArea.java:216) at sun.awt.windows.WComponentPeer.handleEvent(WComponentPeer.java:306) at java.awt.Component.dispatchEventImpl(Component.java:4706) at java.awt.Container.dispatchEventImpl(Container.java:2099) at java.awt.Component.dispatchEvent(Component.java:4460) at java.awt.EventQueue.dispatchEvent(EventQueue.java:599) at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:269) at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:184) at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:174) at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:169) at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:161) at java.awt.EventDispatchThread.run(EventDispatchThread.java:122)

Read the article

parseInt and viewflipper layout problems

- by user1234167

I have a problem with parseInt it throws the error: unable to parse 'null' as integer. My view flipper is also not working. Hopefully this is an easy enough question. Here is my activity: import javax.xml.parsers.SAXParser; import javax.xml.parsers.SAXParserFactory; import org.xml.sax.InputSource; import org.xml.sax.XMLReader; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.util.Log; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.ViewFlipper; import xml.parser.dataset; public class XmlParserActivity extends Activity implements OnClickListener { private final String MY_DEBUG_TAG = "WeatherForcaster"; // private dataset myDataSet; private LinearLayout layout; private int temp= 0; /** Called when the activity is first created. */ //the ViewSwitcher private Button btn; private ViewFlipper flip; // private TextView tv; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); layout=(LinearLayout)findViewById(R.id.linearlayout1); btn=(Button)findViewById(R.id.btn); btn.setOnClickListener(this); flip=(ViewFlipper)findViewById(R.id.flip); //when a view is displayed flip.setInAnimation(this,android.R.anim.fade_in); //when a view disappears flip.setOutAnimation(this, android.R.anim.fade_out); // String postcode = null; // public String getPostcode { // return postcode; // } //URL newUrl = c; // myweather.setText(c.toString()); /* Create a new TextView to display the parsingresult later. */ TextView tv = new TextView(this); // run(0); //WeatherApplicationActivity postcode = new WeatherApplicationActivity(); try { /* Create a URL we want to load some xml-data from. */ URL url = new URL("http://new.myweather2.com/developer/forecast.ashx?uac=gcV3ynNdoV&output=xml&query=G41"); //String url = new String("http://new.myweather2.com/developer/forecast.ashx?uac=gcV3ynNdoV&output=xml&query="+WeatherApplicationActivity.postcode ); //URL url = new URL(url); //url.toString( ); //myString(url.toString() + WeatherApplicationActivity.getString(postcode)); // url + WeatherApplicationActivity.getString(postcode); /* Get a SAXParser from the SAXPArserFactory. */ SAXParserFactory spf = SAXParserFactory.newInstance(); SAXParser sp = spf.newSAXParser(); /* Get the XMLReader of the SAXParser we created. */ XMLReader xr = sp.getXMLReader(); /* Create a new ContentHandler and apply it to the XML-Reader*/ handler myHandler = new handler(); xr.setContentHandler(myHandler); /* Parse the xml-data from our URL. */ xr.parse(new InputSource(url.openStream())); /* Parsing has finished. */ /* Our ExampleHandler now provides the parsed data to us. */ dataset parsedDataSet = myHandler.getParsedData(); /* Set the result to be displayed in our GUI. */ tv.setText(parsedDataSet.toString()); } catch (Exception e) { /* Display any Error to the GUI. */ tv.setText("Error: " + e.getMessage()); Log.e(MY_DEBUG_TAG, "WeatherQueryError", e); } temp = Integer.parseInt(xml.parser.dataset.getTemp()); if(temp <0){ //layout.setBackgroundColor(Color.BLUE); //layout.setBackgroundColor(getResources().getColor(R.color.silver)); findViewById(R.id.flip).setBackgroundColor(Color.BLUE); } else if(temp > 0 && temp < 9) { //layout.setBackgroundColor(Color.GREEN); //layout.setBackgroundColor(getResources().getColor(R.color.silver)); findViewById(R.id.flip).setBackgroundColor(Color.GREEN); } else { //layout.setBackgroundColor(Color.YELLOW); //layout.setBackgroundColor(getResources().getColor(R.color.silver)); findViewById(R.id.flip).setBackgroundColor(Color.YELLOW); } /* Display the TextView. */ this.setContentView(tv); } @Override public void onClick(View arg0) { // TODO Auto-generated method stub onClick(View arg0) { // TODO Auto-generated method stub flip.showNext(); //specify flipping interval //flip.setFlipInterval(1000); //flip.startFlipping(); } } this is my dataset: package xml.parser; public class dataset { static String temp = null; // private int extractedInt = 0; public static String getTemp() { return temp; } public void setTemp(String temp) { this.temp = temp; } this is my handler: public void characters(char ch[], int start, int length) { if(this.in_temp){ String setTemp = new String(ch, start, length); // myParsedDataSet.setTempUnit(new String(ch, start, length)); // myParsedDataSet.setTemp; } the dataset and handler i only pasted the code that involves the temp as i no they r working when i take out the if statement. However even then my viewflipper wont work. This is my main xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/linearlayout1" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="25dip" android:text="Flip Example" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="25dip" android:id="@+id/tv" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="25dip" android:text="Flip" android:id="@+id/btn" android:onClick="ClickHandler" /> <ViewFlipper android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/flip"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="25dip" android:text="Item1a" /> </LinearLayout> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="25dip" android:id="@+id/tv2" /> </ViewFlipper> </LinearLayout> this is my logcat: 04-01 18:02:24.744: E/AndroidRuntime(7331): FATAL EXCEPTION: main 04-01 18:02:24.744: E/AndroidRuntime(7331): java.lang.RuntimeException: Unable to start activity ComponentInfo{xml.parser/xml.parser.XmlParserActivity}: java.lang.NumberFormatException: unable to parse 'null' as integer 04-01 18:02:24.744: E/AndroidRuntime(7331): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1830) 04-01 18:02:24.744: E/AndroidRuntime(7331): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1851) 04-01 18:02:24.744: E/AndroidRuntime(7331): at android.app.ActivityThread.access$1500(ActivityThread.java:132) 04-01 18:02:24.744: E/AndroidRuntime(7331): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1038) 04-01 18:02:24.744: E/AndroidRuntime(7331): at android.os.Handler.dispatchMessage(Handler.java:99) 04-01 18:02:24.744: E/AndroidRuntime(7331): at android.os.Looper.loop(Looper.java:150) 04-01 18:02:24.744: E/AndroidRuntime(7331): at android.app.ActivityThread.main(ActivityThread.java:4293) 04-01 18:02:24.744: E/AndroidRuntime(7331): at java.lang.reflect.Method.invokeNative(Native Method) 04-01 18:02:24.744: E/AndroidRuntime(7331): at java.lang.reflect.Method.invoke(Method.java:507) 04-01 18:02:24.744: E/AndroidRuntime(7331): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:849) 04-01 18:02:24.744: E/AndroidRuntime(7331): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:607) 04-01 18:02:24.744: E/AndroidRuntime(7331): at dalvik.system.NativeStart.main(Native Method) 04-01 18:02:24.744: E/AndroidRuntime(7331): Caused by: java.lang.NumberFormatException: unable to parse 'null' as integer 04-01 18:02:24.744: E/AndroidRuntime(7331): at java.lang.Integer.parseInt(Integer.java:356) 04-01 18:02:24.744: E/AndroidRuntime(7331): at java.lang.Integer.parseInt(Integer.java:332) 04-01 18:02:24.744: E/AndroidRuntime(7331): at xml.parser.XmlParserActivity.onCreate(XmlParserActivity.java:118) 04-01 18:02:24.744: E/AndroidRuntime(7331): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1072) 04-01 18:02:24.744: E/AndroidRuntime(7331): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1794) I hope I have given enough information about my problems. I will be extremely grateful if anyone can help me out.

Read the article

twitter4j code doent work on ICS and JellyBean help me

- by swapnil adsure

Hey guys i am using twitter4J to post tweet on twitter Here i Change the Code according to your suggestion . i do some google search. The problem is When i try to shift from main activity to twitter activity it show force close. Main activity is = "MainActivity" twitter activity is = "twiti_backup" I think there is problem in Manifestfile but i dont know what was it. public class twiti_backup extends Activity { private static final String TAG = "Blundell.TweetToTwitterActivity"; private static final String PREF_ACCESS_TOKEN = ""; private static final String PREF_ACCESS_TOKEN_SECRET = ""; private static final String CONSUMER_KEY = ""; private static final String CONSUMER_SECRET = ""; private static final String CALLBACK_URL = "android:///"; private SharedPreferences mPrefs; private Twitter mTwitter; private RequestToken mReqToken; private Button mLoginButton; private Button mTweetButton; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.i(TAG, "Loading TweetToTwitterActivity"); setContentView(R.layout.twite); mPrefs = getSharedPreferences("twitterPrefs", MODE_PRIVATE); mTwitter = new TwitterFactory().getInstance(); mTwitter.setOAuthConsumer(CONSUMER_KEY, CONSUMER_SECRET); mLoginButton = (Button) findViewById(R.id.login_button); mTweetButton = (Button) findViewById(R.id.tweet_button); } public void buttonLogin(View v) { Log.i(TAG, "Login Pressed"); if (mPrefs.contains(PREF_ACCESS_TOKEN)) { Log.i(TAG, "Repeat User"); loginAuthorisedUser(); } else { Log.i(TAG, "New User"); loginNewUser(); } } public void buttonTweet(View v) { Log.i(TAG, "Tweet Pressed"); tweetMessage(); } private void loginNewUser() { try { Log.i(TAG, "Request App Authentication"); mReqToken = mTwitter.getOAuthRequestToken(CALLBACK_URL); Log.i(TAG, "Starting Webview to login to twitter"); WebView twitterSite = new WebView(this); twitterSite.loadUrl(mReqToken.getAuthenticationURL()); setContentView(twitterSite); } catch (TwitterException e) { Toast.makeText(this, "Twitter Login error, try again later", Toast.LENGTH_SHORT).show(); } } private void loginAuthorisedUser() { String token = mPrefs.getString(PREF_ACCESS_TOKEN, null); String secret = mPrefs.getString(PREF_ACCESS_TOKEN_SECRET, null); // Create the twitter access token from the credentials we got previously AccessToken at = new AccessToken(token, secret); mTwitter.setOAuthAccessToken(at); Toast.makeText(this, "Welcome back", Toast.LENGTH_SHORT).show(); enableTweetButton(); } @Override protected void onNewIntent(Intent intent) { super.onNewIntent(intent); Log.i(TAG, "New Intent Arrived"); dealWithTwitterResponse(intent); } @Override protected void onResume() { super.onResume(); Log.i(TAG, "Arrived at onResume"); } private void dealWithTwitterResponse(Intent intent) { Uri uri = intent.getData(); if (uri != null && uri.toString().startsWith(CALLBACK_URL)) { // If the user has just logged in String oauthVerifier = uri.getQueryParameter("oauth_verifier"); authoriseNewUser(oauthVerifier); } } private void authoriseNewUser(String oauthVerifier) { try { AccessToken at = mTwitter.getOAuthAccessToken(mReqToken, oauthVerifier); mTwitter.setOAuthAccessToken(at); saveAccessToken(at); // Set the content view back after we changed to a webview setContentView(R.layout.twite); enableTweetButton(); } catch (TwitterException e) { Toast.makeText(this, "Twitter auth error x01, try again later", Toast.LENGTH_SHORT).show(); } } private void enableTweetButton() { Log.i(TAG, "User logged in - allowing to tweet"); mLoginButton.setEnabled(false); mTweetButton.setEnabled(true); } private void tweetMessage() { try { mTwitter.updateStatus("Test - Tweeting with @Blundell_apps #AndroidDev Tutorial using #Twitter4j http://blog.blundell-apps.com/sending-a-tweet/"); Toast.makeText(this, "Tweet Successful!", Toast.LENGTH_SHORT).show(); } catch (TwitterException e) { Toast.makeText(this, "Tweet error, try again later", Toast.LENGTH_SHORT).show(); } } private void saveAccessToken(AccessToken at) { String token = at.getToken(); String secret = at.getTokenSecret(); Editor editor = mPrefs.edit(); editor.putString(PREF_ACCESS_TOKEN, token); editor.putString(PREF_ACCESS_TOKEN_SECRET, secret); editor.commit(); } } And here is Manifest <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/title_activity_main" android:launchMode="singleInstance" android:configChanges="orientation|screenSize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".twiti_backup" android:launchMode="singleInstance"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="android" android:host="callback_main" /> </activity> <activity android:name=".MyTwite"/> <activity android:name=".mp3" /> <activity android:name=".myfbapp" /> </application> Here is Log cat when i try to launch twiti_backup from main activity W/dalvikvm(16357): threadid=1: thread exiting with uncaught exception (group=0x4001d5a0) E/AndroidRuntime(16357): FATAL EXCEPTION: main E/AndroidRuntime(16357): java.lang.VerifyError: com.example.uitest.twiti_backup E/AndroidRuntime(16357): at java.lang.Class.newInstanceImpl(Native Method) E/AndroidRuntime(16357): at java.lang.Class.newInstance(Class.java:1409) E/AndroidRuntime(16357): at android.app.Instrumentation.newActivity(Instrumentation.java:1040) E/AndroidRuntime(16357): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1735) E/AndroidRuntime(16357): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1842) E/AndroidRuntime(16357): at android.app.ActivityThread.access$1500(ActivityThread.java:132) E/AndroidRuntime(16357): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1038) E/AndroidRuntime(16357): at android.os.Handler.dispatchMessage(Handler.java:99) E/AndroidRuntime(16357): at android.os.Looper.loop(Looper.java:143) E/AndroidRuntime(16357): at android.app.ActivityThread.main(ActivityThread.java:4263) E/AndroidRuntime(16357): at java.lang.reflect.Method.invokeNative(Native Method) E/AndroidRuntime(16357): at java.lang.reflect.Method.invoke(Method.java:507) E/AndroidRuntime(16357): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:839) E/AndroidRuntime(16357): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:597) E/AndroidRuntime(16357): at dalvik.system.NativeStart.main(Native Method)

Read the article

Help modify a javascript code to perform a div scroll

- by Jamex

Hi, The code below uses javascript to smoothly scroll content in a div. I don't need the smooth scrolling action, and only need the onclick action for the buttons. I would like to use this code so that if a scroll up/down button is pressed, the scroll would instantaneously jump up/down to a position, just like if you were to press the reset button (see demo link). If the down button is pressed, it would jump down the position of the content div (say 300px) and show the text instantaneously without showing how the scrolling text. I am not familiar with JS, so it you know a shorter way, please suggest. TIA the demo link is HERE The code is > this.easyscroll = function(){ // id of the container element var > id = "myContent"; // navigation > buttons text var nav = ["Scroll Up", > "Scroll Down", "Reset"]; // id for > each navigation button (OPTIONAL) var > navId = ["btnUp", "btnDown", > "btnReset"]; > > // movement speed var speed = 5; > // desired height of the container > element (in pixels) var height = 200; > // // END CONFIG // do not edit > below this line (unless you want to of > course :) ) // > > var obj = > document.getElementById(id); obj.up > = false; obj.down = false; obj.fast = false; > > var container = > document.createElement("div"); var > parent = obj.parentNode; > container.id="easyscroll"; > parent.insertBefore(container,obj); > parent.removeChild(obj); > container.style.position = > "relative"; container.style.height = > height + "px"; > container.style.overflow = "hidden"; > obj.style.position = "absolute"; > obj.style.top = "0"; obj.style.left > = "0"; container.appendChild(obj); var btns = new Array(); var ul = > document.createElement("ul"); > ul.id="easyscrollnav"; for (var > i=0;i<nav.length;i++){ var li = > document.createElement("li"); > li.innerHTML = nav[i]; li.id = > navId[i]; btns.push(li); > ul.appendChild(li); }; > parent.insertBefore(ul,container); > btns[0].onmouseover = function(){ > obj.up = true; this.className = > "over"; }; btns[0].onmouseout = > function(){ obj.up = false; > this.className = ""; }; > btns[1].onmouseover = function(){ > obj.down = true; this.className = > "over"; }; btns[1].onmouseout = > function(){ obj.down = false; > this.className = ""; }; > btns[0].onmousedown = > btns[1].onmousedown = function(){ > obj.fast = true; }; > btns[0].onmouseup = btns[1].onmouseup > = function(){ obj.fast = false; }; btns[2].onmouseover = > function(){ this.className = > "over"; }; btns[2].onmouseout = > function(){ this.className = ""; > }; btns[2].onclick = function(){ > obj.style.top = "0px"; }; > this.start = function(){ var newTop; var objHeight = > obj.offsetHeight; var top = > obj.offsetTop; var fast = (obj.fast) > ? 2 : 1; if(obj.down){ newTop > = ((objHeight+top) > height) ? top-(speed*fast) : top; > obj.style.top = newTop + "px"; > }; if(obj.up){ newTop = > (top < 0) ? top+(speed*fast) : top; > obj.style.top = newTop + "px"; }; > }; obj.interval = > setInterval("start()",50); }; > > > this.addEvent = function(obj,type,fn){ > if(obj.attachEvent){ > obj['e'+type+fn] = fn; > obj[type+fn] = > function(){obj['e'+type+fn](window.event > );} obj.attachEvent('on'+type, > obj[type+fn]); } else { > obj.addEventListener(type,fn,false); > }; }; > addEvent(window,"load",easyscroll);

Read the article

Submiting a Form without Refreshing the page with jQuery and Ajax Not updating MySQL database.

- by HEEEEEEELP

I'm a newbie to JQuery and have a problem, when I click submit button on the form everything says registration was successful but my MYSQL database was not updated everything worked fine until I tried to add the JQuery to the picture. Can someone help me fix this problem so my database is updated? Thanks Here is the JQuery code. $(function() { $(".save-button").click(function() { var address = $("#address").val(); var address_two = $("#address_two").val(); var city_town = $("#city_town").val(); var state_province = $("#state_province").val(); var zipcode = $("#zipcode").val(); var country = $("#country").val(); var email = $("#email").val(); var dataString = 'address='+ address + '&address_two=' + address_two + '&city_town=' + city_town + '&state_province=' + state_province + '&zipcode=' + zipcode + '&country=' + country + '$email=' + email; if(address=='' || address_two=='' || city_town=='' || state_province=='' || zipcode=='' || country=='' || email=='') { $('.success').fadeOut(200).hide(); $('.error').fadeOut(200).show(); } else { $.ajax({ type: "POST", url: "http://localhost/New%20Project/home/index.php", data: dataString, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } }); } return false; }); }); Here is the PHP code. if (isset($_POST['contact_info_submitted'])) { // Handle the form. // Query member data from the database and ready it for display $mysqli = mysqli_connect("localhost", "root", "", "sitename"); $dbc = mysqli_query($mysqli,"SELECT users.*, contact_info.* FROM users INNER JOIN contact_info ON contact_info.user_id = users.user_id WHERE users.user_id=3"); $user_id = mysqli_real_escape_string($mysqli, htmlentities('3')); $address = mysqli_real_escape_string($mysqli, htmlentities($_POST['address'])); $address_two = mysqli_real_escape_string($mysqli, htmlentities($_POST['address_two'])); $city_town = mysqli_real_escape_string($mysqli, htmlentities($_POST['city_town'])); $state_province = mysqli_real_escape_string($mysqli, htmlentities($_POST['state_province'])); $zipcode = mysqli_real_escape_string($mysqli, htmlentities($_POST['zipcode'])); $country = mysqli_real_escape_string($mysqli, htmlentities($_POST['country'])); $email = mysqli_real_escape_string($mysqli, strip_tags($_POST['email'])); //If the table is not found add it to the database if (mysqli_num_rows($dbc) == 0) { $mysqli = mysqli_connect("localhost", "root", "", "sitename"); $dbc = mysqli_query($mysqli,"INSERT INTO contact_info (user_id, address, address_two, city_town, state_province, zipcode, country, email) VALUES ('$user_id', '$address', '$address_two', '$city_town', '$state_province', '$zipcode', '$country', '$email')"); } //If the table is in the database update each field when needed if ($dbc == TRUE) { $dbc = mysqli_query($mysqli,"UPDATE contact_info SET address = '$address', address_two = '$address_two', city_town = '$city_town', state_province = '$state_province', zipcode = '$zipcode', country = '$country', email = '$email' WHERE user_id = '$user_id'"); } if (!$dbc) { // There was an error...do something about it here... print mysqli_error($mysqli); return; } } Here is the XHTML code. <form method="post" action="index.php"> <fieldset> <ul> <li><label for="address">Address 1: </label><input type="text" name="address" id="address" size="25" class="input-size" value="<?php if (isset($_POST['address'])) { echo $_POST['address']; } else if(!empty($address)) { echo $address; } ?>" /></li> <li><label for="address_two">Address 2: </label><input type="text" name="address_two" id="address_two" size="25" class="input-size" value="<?php if (isset($_POST['address_two'])) { echo $_POST['address_two']; } else if(!empty($address_two)) { echo $address_two; } ?>" /></li> <li><label for="city_town">City/Town: </label><input type="text" name="city_town" id="city_town" size="25" class="input-size" value="<?php if (isset($_POST['city_town'])) { echo $_POST['city_town']; } else if(!empty($city_town)) { echo $city_town; } ?>" /></li> <li><label for="state_province">State/Province: </label> <?php echo '<select name="state_province" id="state_province">' . "\n"; foreach($state_options as $option) { if ($option == $state_province) { echo '<option value="' . $option . '" selected="selected">' . $option . '</option>' . "\n"; } else { echo '<option value="'. $option . '">' . $option . '</option>'."\n"; } } echo '</select>'; ?> </li> <li><label for="zipcode">Zip/Post Code: </label><input type="text" name="zipcode" id="zipcode" size="5" class="input-size" value="<?php if (isset($_POST['zipcode'])) { echo $_POST['zipcode']; } else if(!empty($zipcode)) { echo $zipcode; } ?>" /></li> <li><label for="country">Country: </label> <?php echo '<select name="country" id="country">' . "\n"; foreach($countries as $option) { if ($option == $country) { echo '<option value="' . $option . '" selected="selected">' . $option . '</option>' . "\n"; } else if($option == "-------------") { echo '<option value="' . $option . '" disabled="disabled">' . $option . '</option>'; } else { echo '<option value="'. $option . '">' . $option . '</option>'."\n"; } } echo '</select>'; ?> </li> <li><label for="email">Email Address: </label><input type="text" name="email" id="email" size="25" class="input-size" value="<?php if (isset($_POST['email'])) { echo $_POST['email']; } else if(!empty($email)) { echo $email; } ?>" /><br /><span>We don't spam or share your email with third parties. We respect your privacy.</span></li> <li><input type="submit" name="submit" value="Save Changes" class="save-button" /> <input type="hidden" name="contact_info_submitted" value="true" /> <input type="submit" name="submit" value="Preview Changes" class="preview-changes-button" /></li> </ul> </fieldset> </form>

Read the article

Updated data is not loaded in the same browser(using Ajax )

- by Mouli

Initilly load some datas into dropdown list. It contain company code and company related fields in Textbox. Using Ajax to load the company related Fields in onchange Function I edit the company related fields and update it. Its updated Successfully then i Click the back button and refresh the browser. I select the updated company form the dropdown list. It always list the old value insted of updated data. I want to show the updated fields into corresponding textbox. This part of coding is to load the companyname into dropdown list <% DBAccess dbAccess = Util.initDatabaseAccess(); ResultSet rs = null; ResultSet rsEdit = null; int updateSuccess = 0; String button = request.getParameter("saveAction"); rs = dbAccess.executeQuery("select companyname,Companycode,companyid from yosemitecompany where cmpstatus=1 order by companyname"); %> My Ajax function <script> function showCompanyDetails(str) { if (str=="") { document.getElementById("CompanyName").innerHTML=""; return; } if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var resValue=new Array(); resValue = xmlhttp.responseText.split("$"); document.getElementById("CompanyName").value=resValue[0]; document.getElementById("StreetName1").value=(resValue[1]!=null && !resValue[1].equalsIgnoreCase("null") && resValue[1].length>0?resValue[1]:""); document.getElementById("StreetName2").value=(resValue[2]!=null && !resValue[2].equalsIgnoreCase("null") && resValue[2].length>0?resValue[2]:""); document.getElementById("City").value=(resValue[3]!=null && !resValue[3].equalsIgnoreCase("null") && resValue[3].length>0?resValue[3]:""); document.getElementById("Zipcode").value=trim((resValue[5]!=null && !resValue[5].equalsIgnoreCase("null") && resValue[5].length>0?resValue[5]:"")); document.getElementById("officePhone").value=(resValue[6]!=null && !resValue[6].equalsIgnoreCase("null") && resValue[6].length>0?resValue[6]:""); document.getElementById("Fax1").value=(resValue[7]!=null && !resValue[7].equalsIgnoreCase("null") && resValue[7].length>0?resValue[7]:""); document.getElementById("email").value=(resValue[8]!=null && !resValue[8].equalsIgnoreCase("null") && resValue[8].length>0?resValue[8]:""); document.getElementById("WebSite").value=(resValue[9]!=null && !resValue[9].equalsIgnoreCase("null") && resValue[9].length>0?resValue[9]:""); document.getElementById("description").value=(resValue[10]!=null && !resValue[10].equalsIgnoreCase("null") && resValue[10].length>0?resValue[10]:""); document.getElementById("companycode").value=resValue[11]; document.getElementById("tempCompanyId").value=resValue[12]; document.getElementById("tempStateId").value=resValue[13]; stateID = resValue[13]; countryID = resValue[14]; processAjaxRequestPost('ajaxRequestPost','SingleListHandler','getCountryListDetails', document.getElementById("tempCompanyId").value); showTimezone(resValue[15]); document.getElementById("userName").value=resValue[16]; document.getElementById("passWord").value=resValue[17]; } } xmlhttp.open("GET","customerDetail.jsp?val="+str,true); xmlhttp.send(); } </script> My Update function <%if(updateSuccess <= 0){ if(button != null && button.equalsIgnoreCase("update")) { String companyCode = request.getParameter("companycode").trim(); String companyName = request.getParameter("CompanyName").trim(); String StreetName1 = request.getParameter("StreetName1").trim(); String StreetName2 = request.getParameter("StreetName2").trim(); String City = request.getParameter("City").trim(); String Zipcode = request.getParameter("Zipcode").trim(); String officePhone = request.getParameter("officePhone").trim(); String Fax1 = request.getParameter("Fax1").trim(); String email = request.getParameter("email").trim(); String WebSite = request.getParameter("WebSite").trim(); String description = request.getParameter("description").trim(); String companyid = request.getParameter("tempCompanyId").trim(); String stateId = request.getParameter("tempStateId").trim(); String timeZone = request.getParameter("timezone").trim(); String uploadCustomerLogo = request.getParameter("uploadCustomerLogo").trim(); String userName = request.getParameter("userName").trim(); String passWord = request.getParameter("passWord").trim(); String smtpInsertFlag = "NO"; String getCompanyId = null; updateSuccess = dbAccess.executeUpdate("update yosemitecompany set companyname='"+com.zoniac.util.Util.deQuoteForSingleQuote(companyName)+"', streetname1='"+com.zoniac.util.Util.deQuoteForSingleQuote(StreetName1)+"', streetname2='"+com.zoniac.util.Util.deQuoteForSingleQuote(StreetName2)+"', cityname='"+com.zoniac.util.Util.deQuoteForSingleQuote(City)+"', zipcode='"+com.zoniac.util.Util.deQuoteForSingleQuote(Zipcode)+"', phonenumber1='"+com.zoniac.util.Util.deQuoteForSingleQuote(officePhone)+"', fax1='"+com.zoniac.util.Util.deQuoteForSingleQuote(Fax1)+"', email1='"+com.zoniac.util.Util.deQuoteForSingleQuote(email)+"', website='"+com.zoniac.util.Util.deQuoteForSingleQuote(WebSite)+"', description='"+com.zoniac.util.Util.deQuoteForSingleQuote(description)+"',timezoneid="+timeZone+", stateid="+stateId+" where companyid='"+companyid+"'"); if(rs != null) { rs = null; dbAccess.close(); } } %> My customerDetail.jsp File <% String val = request.getParameter("val"); DBAccess dbAccess = Util.initDatabaseAccess(); ResultSet rs = null; String outputResult = null; String ff = "NO"; rs = dbAccess.executeQuery("select companyname,streetname1,streetname2,cityname,(select statename from state where stateid = (select stateid from yosemitecompany where companyid ="+val+"))as state,zipcode,phonenumber1,fax1,email1,website,description,companycode,companyid,(select stateid from state where stateid = (select stateid from yosemitecompany where companyid ="+val+"))as statecode,(select countryid from country where countryid =(select countryid from state where stateid = (select stateid from yosemitecompany where companyid ="+val+")))as countryid,timezoneid from yosemitecompany where companyid = "+val+""); if(rs.next()){ outputResult = rs.getString(1)+"$"+rs.getString(2)+"$"+rs.getString(3)+"$"+rs.getString(4)+"$"+rs.getString(5)+"$"+rs.getString(6)+"$"+rs.getString(7)+"$"+rs.getString(8)+"$"+rs.getString(9)+"$"+rs.getString(10)+"$"+rs.getString(11)+"$"+rs.getString(12)+"$"+rs.getString(13)+"$"+rs.getString(14)+"$"+rs.getString(15)+"$"+rs.getString(16); } rs = null; rs = dbAccess.executeQuery("select username,password from EMAILAUTHENTICATIONDETAILS where companyid="+val); if(rs.next()){ ff="YES"; outputResult += "$"+rs.getString(1)+"$"+rs.getString(2); } if(ff.equals("NO")){ outputResult += "$$"; } out.println(outputResult); outputResult = null; ff = "NO"; if(rs!=null) { rs = null; dbAccess.close(); } %>

Read the article

Find Label Control in Repeater Asp.net

- by user2769165

I am using repeater and I want to find the label control in my repeater. here is my code <asp:Repeater ID="friendRepeater" runat="server"> <table cellpadding="0" cellspacing="0"> <ItemTemplate> <tr style=" width:700px; height:120px;"> <td> <div style=" padding-left:180px;"> <div id="leftHandPost" style="float:left; width:120px; height:120px; border: medium solid #cdaf95; padding-top:5px;"> <div id="childLeft" style=" padding-left:5px;"> <div id="photo" style=" border: thin solid black; width:100px;height:100px;"> <asp:Image id="photoImage" runat="server" ImageUrl='<%# String.Concat("Images/", Eval("Picture")) %>' Width="100px" Height="100px" /> </div> </div> </div> </div> </td> <td> <div id="rightHandPost" style=" float:right; padding-right:260px;"> <div id="childRight" style="width:400px; height:120px; border: medium solid #cdaf95; padding-top:5px; padding-left:10px;"> <strong><asp:Label id="lblName" runat="server"><%# Eval("PersonName") %></asp:Label></strong><br /> <div style=" float:right; padding-right:10px;"><asp:Button runat="server" Text="Add" onClick="add" /></div><br /> <asp:Label id="lblID" runat="server"><%# Eval("PersonID") %></asp:Label><br /> <asp:Label id="lblEmail" runat="server"><%# Eval("Email") %></asp:Label> </div> </div> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr style=" width:700px; height:120px;"> <td> <div style=" padding-left:180px;"> <div id="Div1" style="float:left; width:120px; height:120px; border: medium solid #cdaf95; padding-top:5px;"> <div id="Div2" style="padding-left:5px;"> <div id="Div3" style=" border: thin solid black; width:100px;height:100px;"> <asp:Image id="photoImage" runat="server" ImageUrl='<%# String.Concat("Images/", Eval("Picture")) %>' Width="100px" Height="100px" /> </div> </div> </div> </div> </td> <td> <div id="Div4" style=" float:right; padding-right:260px;"> <div id="Div5" style="width:400px; height:120px; border: medium solid #cdaf95; padding-top:5px; padding-left:10px;"> <strong><asp:Label id="lblName" runat="server"><%# Eval("PersonName")%></asp:Label></strong> <div style=" float:right; padding-right:10px;"><asp:Button id="btnAdd" runat="server" Text="Add" onClick="add"></asp:Button></div><br /> <br /> <asp:Label id="lblID" runat="server"><%# Eval("PersonID") %></asp:Label><br /> <asp:Label id="lblEmail" runat="server"><%# Eval("Email") %></asp:Label> </div> </div> </td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> Here is the code behind for the add button. protected void add(object sender, EventArgs e) { DateTime date = DateTime.Now; System.Web.UI.WebControls.Label la = (System.Web.UI.WebControls.Label)friendRepeater.FindControl("PersonID"); String id = la.Text; try { MySqlConnection connStr = new MySqlConnection(); connStr.ConnectionString = "Server = localhost; Database = healthlivin; Uid = root; Pwd = khei92;"; String insertFriend = "INSERT INTO contactFriend(friendID, PersonID, PersonIDB, date) values (@id, @personIDA, @personIDB, @date)"; MySqlCommand cmdInsertStaff = new MySqlCommand(insertFriend, connStr); cmdInsertStaff.Parameters.AddWithValue("@id", "F000004"); cmdInsertStaff.Parameters.AddWithValue("@personIDA", "M000001"); cmdInsertStaff.Parameters.AddWithValue("@personIDB", id); cmdInsertStaff.Parameters.AddWithValue("@date", date); connStr.Open(); cmdInsertStaff.ExecuteNonQuery(); MessageBox.Show("inserted"); connStr.Close(); } catch (Exception ex) { MessageBox.Show(ex.ToString()); } } I have get the error of Object reference not set to an instance of an object. I think is because there are no value in the Label. The Find Control are not working. May I know how can fix this problem? Thank you very much

Read the article

Remotely Schedule and Stream Recorded TV in Windows 7 Media Center

- by DigitalGeekery

Have you ever been away from home and suddenly realized you forgot to record your favorite program? Now Windows 7 Media Center, users can schedule recordings remotely from their phones or mobile devices with Remote Potato. How it Works Remote Potato installs server software on the host computer running Windows 7 Media Center. Once the software is installed, we’ll need to do some port forwarding on the router and setup an optional dynamic DNS address. When setup is completed, we will access the application through a web based interface. Silverlight is required for Streaming recorded TV, but scheduling recordings can be done through an HTML interface. Installing Remote Potato Download and install Remote Potato on the Media Center PC. (See download link below) If you plan to stream any Recorded TV, you’ll also want to install the streaming pack located on the same page. It isn’t required to stream all shows, only shows that require the AC3 audio codec. Click Yes to allow Remote Potato to add rules to the Windows Firewall for remote access. You’ll likely need to accept a few UAC prompts. When notified that the rules were added, click OK. Remote Potato will then prompt you to allow administrator privileges to reserve a URL for it’s web server. Click Yes. Remote Potato server will start. Click on the configuration button at the right to to reveal the settings tabs. One the General tab, you’ll have the option to run Remote Potato on startup and minimized in the System Tray. If you’re running Media Center on a dedicated HTPC, you’ll probably want to enable both startup options. Forwarding Ports on Your Router You’ll need to forward a couple ports on your router. By default, these will be ports 9080 and 9081. In this example we’re using a Linksys WRT54GL router, however, the steps for port forwarding will vary from router to router. On the Linksys configuration page, click on the Applications & Gaming Tab, and then the Port Range Forward tab. Under Application, type in a name of your choosing. In both the Start and End boxes, type the port number 9080. Enter the local IP address of your Media Center computer in the IP address column. Click the check box under Enable. Repeat the process on the next line, but this time use port 9081. When finished, click the Save Settings button. Note: It’s highly recommended that you configure the home computer running Media Center & Remote Potato with a static IP address. Find your IP Address You’ll need to find the IP address assigned to your router from your ISP. There are many ways to do this but a quick and easy way is to visit a site like checkip.dyndns.org (link available below) The current external IP address of your router will be displayed in the browser. Dynamic DNS This is an optional step, but it’s highly recommended. Many routers, such as the Linksys WRT54GL we are using, support Dynamic DNS (DDNS). What Dynamic DNS allows you to do is affiliate your home router’s external IP address to a domain name. Every time your home router is assigned a a new IP address by your ISP, the domain name is updated to point to your new IP address. Remote Potato’s user interface is accessed over the Internet is by connecting to your router’s IP address followed by a colon and the port number. (Ex: XXX.XXX.XXX.XXX:9080) Instead of constantly having to look up and remember an IP address, you can use DDNS along with a 3rd party provider like DynDNS.com, to sign up for a free domain name and configure it to be updated each time your router is assigned a new IP address. Go to the DynDNS.com website (See link at the end of the article) and sign up for a free Domain name. You’ll need to register and confirm by email. Once you’ve signed in and selected your domain name click Activate Services. You’ll get a confirmation message that your domain name has been activated. On the Linksys WRT54GL click on the Setup tab an then DDNS. Select DynDNS.org, or TZO.com if you prefer to use their service, from the drop down list. With DynDNS, you’ll need to fill in your username and password you signed up with at the DynDNS website and the hostname you chose. Note: You can connect over your local network with the IP Address of the computer running Remote Potato followed by a colon and the port number. Ex: 192.168.1.2:9080 Logging in Remote Potato and Recording a Show Once you connect, you’ll see the start page. To view the TV listings, click on TV Guide. You’ll then see your guide listings. There are a few ways to navigate the listings. At the top left, you can click on any of the preset time buttons to jump to the listings at that time of the day. Click on the arrows to the right and left of the day and date at the top center to proceed to the previous or next day. Or, jump to a specific day with the date and date buttons at the top right. To setup a recording, click on a program. You can choose to record the individual show or the entire series by clicking on Record Show or Record Series. Remote Potato on Mobile Devices Perhaps the coolest feature of Remote Potato is the ability to schedule recording from your phone or mobile device. Note: For any devices or computers without Silverlight, you will be prompted to view the HTML page. Select Browse Listings. Select your program to record. In the Program Details, select Record Show to record the single episode or Record Series to record all instances of the series. You will then see a red dot on the program listing to indicate that the show is scheduled for recording. Streaming Recorded TV Click on Recorded TV from the home screen to access your previously recorded TV programs. Click on the selection you wish to stream. Click on Play. If you receive this error message, you’ll need to install the streaming pack for Remote Potato. This is found on the same download page as installation files. (See link below) The Begin from slider allows you to start playback from the start (by default) or a different time of the program by moving the slider. The Quality (bitrate) setting allows you to choose the quality of the playback. We found the video quality on the Normal setting to be pretty lousy, and Low was just pointless. High was the best overall viewing experience as it provided smooth quality video playback. We experienced significant stuttering during playback using the Ultra High setting. Click Start when you are ready to begin. When playback begins you’ll see a slider at the top right. Move the slider left or right to increase or decrease the size of the video. There’s also a button to switch to full screen. Media Center users who travel frequently or are always on the go will likely find Remote Potato to be a blessing. Since being released earlier this year, updates for Remote Potato have come fast and furious. The latest beta release includes support for streaming music and photos. If you like those nice network TV logos, check out our article on adding TV channel logos to Windows Media Center. Downloads and Links Download Remote Potato and Streaming Pack Find your IP address Sign Up for a Domain Name at DynDNS.com Similar Articles Productive Geek Tips Schedule Updates for Windows Media CenterUsing Netflix Watchnow in Windows Vista Media Center (Gmedia)Add a Sleep Timer to Windows 7 Media CenterStartup Customizations for Media Center in Windows 7Enable Media Streaming in Windows Home Server to Windows Media Player TouchFreeze Alternative in AutoHotkey The Icy Undertow Desktop Windows Home Server – Backup to LAN The Clear & Clean Desktop Use This Bookmarklet to Easily Get Albums Use AutoHotkey to Assign a Hotkey to a Specific Window Latest Software Reviews Tinyhacker Random Tips DVDFab 6 Revo Uninstaller Pro Registry Mechanic 9 for Windows PC Tools Internet Security Suite 2010 FoxClocks adds World Times in your Statusbar (Firefox) Have Fun Editing Photo Editing with Citrify Outlook Connector Upgrade Error Gadfly is a cool Twitter/Silverlight app Enable DreamScene in Windows 7 Microsoft’s “How Do I ?” Videos

Read the article

Netflix, jQuery, JSONP, and OData

- by Stephen Walther

At the last MIX conference, Netflix announced that they are exposing their catalog of movie information using the OData protocol. This is great news! This means that you can take advantage of all of the advanced OData querying features against a live database of Netflix movies. In this blog entry, I’ll demonstrate how you can use Netflix, jQuery, JSONP, and OData to create a simple movie lookup form. The form enables you to enter a movie title, or part of a movie title, and display a list of matching movies. For example, Figure 1 illustrates the movies displayed when you enter the value robot into the lookup form. Using the Netflix OData Catalog API You can learn about the Netflix OData Catalog API at the following website: http://developer.netflix.com/docs/oData_Catalog The nice thing about this website is that it provides plenty of samples. It also has a good general reference for OData. For example, the website includes a list of OData filter operators and functions. The Netflix Catalog API exposes 4 top-level resources: Titles – A database of Movie information including interesting movie properties such as synopsis, BoxArt, and Cast. People – A database of people information including interesting information such as Awards, TitlesDirected, and TitlesActedIn. Languages – Enables you to get title information in different languages. Genres – Enables you to get title information for specific movie genres. OData is REST based. This means that you can perform queries by putting together the right URL. For example, if you want to get a list of the movies that were released after 2010 and that had an average rating greater than 4 then you can enter the following URL in the address bar of your browser: http://odata.netflix.com/Catalog/Titles?$filter=ReleaseYear gt 2010&AverageRating gt 4 Entering this URL returns the movies in Figure 2. Creating the Movie Lookup Form The complete code for the Movie Lookup form is contained in Listing 1. Listing 1 – MovieLookup.htm <!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> <title>Netflix with jQuery</title> <style type="text/css"> #movieTemplateContainer div { width:400px; padding: 10px; margin: 10px; border: black solid 1px; } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> <script src="App_Scripts/Microtemplates.js" type="text/javascript"></script> </head> <body> <label>Search Movies:</label> <input id="movieName" size="50" /> <button id="btnLookup">Lookup</button> <div id="movieTemplateContainer"></div> <script id="movieTemplate" type="text/html"> <div> <img src="<%=BoxArtSmallUrl %>" /> <strong><%=Name%></strong> <p> <%=Synopsis %> </p> </div> </script> <script type="text/javascript"> $("#btnLookup").click(function () { // Build OData query var movieName = $("#movieName").val(); var query = "http://odata.netflix.com/Catalog" // netflix base url + "/Titles" // top-level resource + "?$filter=substringof('" + escape(movieName) + "',Name)" // filter by movie name + "&$callback=callback" // jsonp request + "&$format=json"; // json request // Make JSONP call to Netflix $.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback }); }); function callback(result) { // unwrap result var movies = result["d"]["results"]; // show movies in template var showMovie = tmpl("movieTemplate"); var html = ""; for (var i = 0; i < movies.length; i++) { // flatten movie movies[i].BoxArtSmallUrl = movies[i].BoxArt.SmallUrl; // render with template html += showMovie(movies[i]); } $("#movieTemplateContainer").html(html); } </script> </body> </html> The HTML page in Listing 1 includes two JavaScript libraries: <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> <script src="App_Scripts/Microtemplates.js" type="text/javascript"></script> The first script tag retrieves jQuery from the Microsoft Ajax CDN. You can learn more about the Microsoft Ajax CDN by visiting the following website: http://www.asp.net/ajaxLibrary/cdn.ashx The second script tag is used to reference Resig’s micro-templating library. Because I want to use a template to display each movie, I need this library: http://ejohn.org/blog/javascript-micro-templating/ When you enter a value into the Search Movies input field and click the button, the following JavaScript code is executed: // Build OData query var movieName = $("#movieName").val(); var query = "http://odata.netflix.com/Catalog" // netflix base url + "/Titles" // top-level resource + "?$filter=substringof('" + escape(movieName) + "',Name)" // filter by movie name + "&$callback=callback" // jsonp request + "&$format=json"; // json request // Make JSONP call to Netflix $.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback }); This code Is used to build a query that will be executed against the Netflix Catalog API. For example, if you enter the search phrase King Kong then the following URL is created: http://odata.netflix.com/Catalog/Titles?$filter=substringof(‘King%20Kong’,Name)&$callback=callback&$format=json This query includes the following parameters: $filter – You assign a filter expression to this parameter to filter the movie results. $callback – You assign the name of a JavaScript callback method to this parameter. OData calls this method to return the movie results. $format – you assign either the value json or xml to this parameter to specify how the format of the movie results. Notice that all of the OData parameters -- $filter, $callback, $format -- start with a dollar sign $. The Movie Lookup form uses JSONP to retrieve data across the Internet. Because WCF Data Services supports JSONP, and Netflix uses WCF Data Services to expose movies using the OData protocol, you can use JSONP when interacting with the Netflix Catalog API. To learn more about using JSONP with OData, see Pablo Castro’s blog: http://blogs.msdn.com/pablo/archive/2009/02/25/adding-support-for-jsonp-and-url-controlled-format-to-ado-net-data-services.aspx The actual JSONP call is performed by calling the $.ajax() method. When this call successfully completes, the JavaScript callback() method is called. The callback() method looks like this: function callback(result) { // unwrap result var movies = result["d"]["results"]; // show movies in template var showMovie = tmpl("movieTemplate"); var html = ""; for (var i = 0; i < movies.length; i++) { // flatten movie movies[i].BoxArtSmallUrl = movies[i].BoxArt.SmallUrl; // render with template html += showMovie(movies[i]); } $("#movieTemplateContainer").html(html); } The movie results from Netflix are passed to the callback method. The callback method takes advantage of Resig’s micro-templating library to display each of the movie results. A template used to display each movie is passed to the tmpl() method. The movie template looks like this: <script id="movieTemplate" type="text/html"> <div> <img src="<%=BoxArtSmallUrl %>" /> <strong><%=Name%></strong> <p> <%=Synopsis %> </p> </div> </script> This template looks like a server-side ASP.NET template. However, the template is rendered in the client (browser) instead of the server. Summary The goal of this blog entry was to demonstrate how well jQuery works with OData. We managed to use a number of interesting open-source libraries and open protocols while building the Movie Lookup form including jQuery, JSONP, JSON, and OData.

Read the article

Step by Step:How to use Web Services in ASP.NET AJAX

- by Yousef_Jadallah

In my Article Preventing Duplicate Date With ASP.NET AJAX I’ve used ASP.NET AJAX With Web Service Technology, Therefore I add this topic as an introduction how to access Web services from client script in AJAX-enabled ASP.NET Web pages. As well I write this topic to answer the common questions which most of the developers face while working with ASP.NET Ajax Web Services especially in Microsoft ASP.NET official forum http://forums.asp.net/. ASP.NET enables you to create Web services can be accessed from client script in Web pages by using AJAX technology to make Web service calls. Data is exchanged asynchronously between client and server, typically in JSON format. Lets go a head with the steps : 1-Create a new project , if you are using VS 2005 you have to create ASP.NET Ajax Enabled Web site. 2-Add new Item , Choose Web Service file . 3-To make your Web Services accessible from script, first it must be an .asmx Web service whose Web service class is qualified with the ScriptServiceAttribute attribute and every method you are using to be called from Client script must be qualified with the WebMethodAttribute attribute. On other hand you can use your Web page( CS or VB files) to add static methods accessible from Client Script , just you need to add WebMethod Attribute and set the EnablePageMethods attribute of the ScriptManager control to true.. The other condition is to register the ScriptHandlerFactory HTTP handler, which processes calls made from script to .asmx Web services : <system.web> <httpHandlers> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory" validate="false"/> </httpHandlers> <system.web> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } but this already added automatically for any Web.config file of any ASP.NET AJAX Enabled WebSite or Project, So you don’t need to add it. 4-Avoid the default Method HelloWorld, then add your method in your asmx file lets say OurServerOutput , As a consequence your Web service will be like this : using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { [WebMethod] public string OurServerOutput() { return "The Server Date and Time is : " + DateTime.Now.ToString(); } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 5-Add ScriptManager Contol to your aspx file then reference the Web service by adding an asp:ServiceReference child element to the ScriptManager control and setting its path attribute to point to the Web service, That generate a JavaScript proxy class for calling the specified Web service from client script. <asp:ScriptManager runat="server" ID="scriptManager"> <Services> <asp:ServiceReference Path="WebService.asmx" /> </Services> </asp:ScriptManager> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Basically ,to enable your application to call Web services(.asmx files) by using client script, the server asynchronous communication layer automatically generates JavaScript proxy classes. A proxy class is generated for each Web service for which an <asp:ServiceReference> element is included under the <asp:ScriptManager> control in the page. 6-Create new button to call the JavaSciprt function and a label to display the returned value . <input id="btnCallDateTime" type="button" value="Call Web Service" onclick="CallDateTime()"/> <asp:Label ID="lblOutupt" runat="server" Text="Label"></asp:Label> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 7-Define the JavaScript code to call the Web Service : <script language="javascript" type="text/javascript"> function CallDateTime() { WebService.OurServerOutput(OnSucceeded); } function OnSucceeded(result) { var lblOutput = document.getElementById("lblOutupt"); lblOutput.innerHTML = result; } </script> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } CallDateTime function calls the Web Service Method OurServerOutput… OnSucceeded function Used as the callback function that processes the Web Service return value. which the result parameter is a simple parameter contain the Server Date Time value returned from the Web Service . Finally , when you complete these steps and run your application you can press the button and retrieve Server Date time without postback. Conclusion: In this topic I describes how to access Web services from client script in AJAX-enabled ASP.NET Web pages With a full .NET Framework/JSON serialize, direct integration with the familiar .asmx Web services ,Using simple example,Also you can connect with the database to return value by create WebMethod in your Web Service file and the same steps you can use. Next time I will show you more complex example which returns a complex type like objects. Hope this help.

Read the article

jQuery Templates and Data Linking (and Microsoft contributing to jQuery)

- by ScottGu

The jQuery library has a passionate community of developers, and it is now the most widely used JavaScript library on the web today. Two years ago I announced that Microsoft would begin offering product support for jQuery, and that we’d be including it in new versions of Visual Studio going forward. By default, when you create new ASP.NET Web Forms and ASP.NET MVC projects with VS 2010 you’ll find jQuery automatically added to your project. A few weeks ago during my second keynote at the MIX 2010 conference I announced that Microsoft would also begin contributing to the jQuery project. During the talk, John Resig -- the creator of the jQuery library and leader of the jQuery developer team – talked a little about our participation and discussed an early prototype of a new client templating API for jQuery. In this blog post, I’m going to talk a little about how my team is starting to contribute to the jQuery project, and discuss some of the specific features that we are working on such as client-side templating and data linking (data-binding). Contributing to jQuery jQuery has a fantastic developer community, and a very open way to propose suggestions and make contributions. Microsoft is following the same process to contribute to jQuery as any other member of the community. As an example, when working with the jQuery community to improve support for templating to jQuery my team followed the following steps: We created a proposal for templating and posted the proposal to the jQuery developer forum (http://forum.jquery.com/topic/jquery-templates-proposal and http://forum.jquery.com/topic/templating-syntax ). After receiving feedback on the forums, the jQuery team created a prototype for templating and posted the prototype at the Github code repository (http://github.com/jquery/jquery-tmpl ). We iterated on the prototype, creating a new fork on Github of the templating prototype, to suggest design improvements. Several other members of the community also provided design feedback by forking the templating code. There has been an amazing amount of participation by the jQuery community in response to the original templating proposal (over 100 posts in the jQuery forum), and the design of the templating proposal has evolved significantly based on community feedback. The jQuery team is the ultimate determiner on what happens with the templating proposal – they might include it in jQuery core, or make it an official plugin, or reject it entirely. My team is excited to be able to participate in the open source process, and make suggestions and contributions the same way as any other member of the community. jQuery Template Support Client-side templates enable jQuery developers to easily generate and render HTML UI on the client. Templates support a simple syntax that enables either developers or designers to declaratively specify the HTML they want to generate. Developers can then programmatically invoke the templates on the client, and pass JavaScript objects to them to make the content rendered completely data driven. These JavaScript objects can optionally be based on data retrieved from a server. Because the jQuery templating proposal is still evolving in response to community feedback, the final version might look very different than the version below. This blog post gives you a sense of how you can try out and use templating as it exists today (you can download the prototype by the jQuery core team at http://github.com/jquery/jquery-tmpl or the latest submission from my team at http://github.com/nje/jquery-tmpl). jQuery Client Templates You create client-side jQuery templates by embedding content within a <script type="text/html"> tag. For example, the HTML below contains a <div> template container, as well as a client-side jQuery “contactTemplate” template (within the <script type="text/html"> element) that can be used to dynamically display a list of contacts: The {{= name }} and {{= phone }} expressions are used within the contact template above to display the names and phone numbers of “contact” objects passed to the template. We can use the template to display either an array of JavaScript objects or a single object. The JavaScript code below demonstrates how you can render a JavaScript array of “contact” object using the above template. The render() method renders the data into a string and appends the string to the “contactContainer” DIV element: When the page is loaded, the list of contacts is rendered by the template. All of this template rendering is happening on the client-side within the browser: Templating Commands and Conditional Display Logic The current templating proposal supports a small set of template commands - including if, else, and each statements. The number of template commands was deliberately kept small to encourage people to place more complicated logic outside of their templates. Even this small set of template commands is very useful though. Imagine, for example, that each contact can have zero or more phone numbers. The contacts could be represented by the JavaScript array below: The template below demonstrates how you can use the if and each template commands to conditionally display and loop the phone numbers for each contact: If a contact has one or more phone numbers then each of the phone numbers is displayed by iterating through the phone numbers with the each template command: The jQuery team designed the template commands so that they are extensible. If you have a need for a new template command then you can easily add new template commands to the default set of commands. Support for Client Data-Linking The ASP.NET team recently submitted another proposal and prototype to the jQuery forums (http://forum.jquery.com/topic/proposal-for-adding-data-linking-to-jquery). This proposal describes a new feature named data linking. Data Linking enables you to link a property of one object to a property of another object - so that when one property changes the other property changes. Data linking enables you to easily keep your UI and data objects synchronized within a page. If you are familiar with the concept of data-binding then you will be familiar with data linking (in the proposal, we call the feature data linking because jQuery already includes a bind() method that has nothing to do with data-binding). Imagine, for example, that you have a page with the following HTML <input> elements: The following JavaScript code links the two INPUT elements above to the properties of a JavaScript “contact” object that has a “name” and “phone” property: When you execute this code, the value of the first INPUT element (#name) is set to the value of the contact name property, and the value of the second INPUT element (#phone) is set to the value of the contact phone property. The properties of the contact object and the properties of the INPUT elements are also linked – so that changes to one are also reflected in the other. Because the contact object is linked to the INPUT element, when you request the page, the values of the contact properties are displayed: More interesting, the values of the linked INPUT elements will change automatically whenever you update the properties of the contact object they are linked to. For example, we could programmatically modify the properties of the “contact” object using the jQuery attr() method like below: Because our two INPUT elements are linked to the “contact” object, the INPUT element values will be updated automatically (without us having to write any code to modify the UI elements): Note that we updated the contact object above using the jQuery attr() method. In order for data linking to work, you must use jQuery methods to modify the property values. Two Way Linking The linkBoth() method enables two-way data linking. The contact object and INPUT elements are linked in both directions. When you modify the value of the INPUT element, the contact object is also updated automatically. For example, the following code adds a client-side JavaScript click handler to an HTML button element. When you click the button, the property values of the contact object are displayed using an alert() dialog: The following demonstrates what happens when you change the value of the Name INPUT element and click the Save button. Notice that the name property of the “contact” object that the INPUT element was linked to was updated automatically: The above example is obviously trivially simple. Instead of displaying the new values of the contact object with a JavaScript alert, you can imagine instead calling a web-service to save the object to a database. The benefit of data linking is that it enables you to focus on your data and frees you from the mechanics of keeping your UI and data in sync. Converters The current data linking proposal also supports a feature called converters. A converter enables you to easily convert the value of a property during data linking. For example, imagine that you want to represent phone numbers in a standard way with the “contact” object phone property. In particular, you don’t want to include special characters such as ()- in the phone number - instead you only want digits and nothing else. In that case, you can wire-up a converter to convert the value of an INPUT element into this format using the code below: Notice above how a converter function is being passed to the linkFrom() method used to link the phone property of the “contact” object with the value of the phone INPUT element. This convertor function strips any non-numeric characters from the INPUT element before updating the phone property. Now, if you enter the phone number (206) 555-9999 into the phone input field then the value 2065559999 is assigned to the phone property of the contact object: You can also use a converter in the opposite direction also. For example, you can apply a standard phone format string when displaying a phone number from a phone property. Combining Templating and Data Linking Our goal in submitting these two proposals for templating and data linking is to make it easier to work with data when building websites and applications with jQuery. Templating makes it easier to display a list of database records retrieved from a database through an Ajax call. Data linking makes it easier to keep the data and user interface in sync for update scenarios. Currently, we are working on an extension of the data linking proposal to support declarative data linking. We want to make it easy to take advantage of data linking when using a template to display data. For example, imagine that you are using the following template to display an array of product objects: Notice the {{link name}} and {{link price}} expressions. These expressions enable declarative data linking between the SPAN elements and properties of the product objects. The current jQuery templating prototype supports extending its syntax with custom template commands. In this case, we are extending the default templating syntax with a custom template command named “link”. The benefit of using data linking with the above template is that the SPAN elements will be automatically updated whenever the underlying “product” data is updated. Declarative data linking also makes it easier to create edit and insert forms. For example, you could create a form for editing a product by using declarative data linking like this: Whenever you change the value of the INPUT elements in a template that uses declarative data linking, the underlying JavaScript data object is automatically updated. Instead of needing to write code to scrape the HTML form to get updated values, you can instead work with the underlying data directly – making your client-side code much cleaner and simpler. Downloading Working Code Examples of the Above Scenarios You can download this .zip file to get with working code examples of the above scenarios. The .zip file includes 4 static HTML page: Listing1_Templating.htm – Illustrates basic templating. Listing2_TemplatingConditionals.htm – Illustrates templating with the use of the if and each template commands. Listing3_DataLinking.htm – Illustrates data linking. Listing4_Converters.htm – Illustrates using a converter with data linking. You can un-zip the file to the file-system and then run each page to see the concepts in action. Summary We are excited to be able to begin participating within the open-source jQuery project. We’ve received lots of encouraging feedback in response to our first two proposals, and we will continue to actively contribute going forward. These features will hopefully make it easier for all developers (including ASP.NET developers) to build great Ajax applications. Hope this helps, Scott P.S. [In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu]

Read the article

Upload File to Windows Azure Blob in Chunks through ASP.NET MVC, JavaScript and HTML5

- by Shaun

Originally posted on: http://geekswithblogs.net/shaunxu/archive/2013/07/01/upload-file-to-windows-azure-blob-in-chunks-through-asp.net.aspxMany people are using Windows Azure Blob Storage to store their data in the cloud. Blob storage provides 99.9% availability with easy-to-use API through .NET SDK and HTTP REST. For example, we can store JavaScript files, images, documents in blob storage when we are building an ASP.NET web application on a Web Role in Windows Azure. Or we can store our VHD files in blob and mount it as a hard drive in our cloud service. If you are familiar with Windows Azure, you should know that there are two kinds of blob: page blob and block blob. The page blob is optimized for random read and write, which is very useful when you need to store VHD files. The block blob is optimized for sequential/chunk read and write, which has more common usage. Since we can upload block blob in blocks through BlockBlob.PutBlock, and them commit them as a whole blob with invoking the BlockBlob.PutBlockList, it is very powerful to upload large files, as we can upload blocks in parallel, and provide pause-resume feature. There are many documents, articles and blog posts described on how to upload a block blob. Most of them are focus on the server side, which means when you had received a big file, stream or binaries, how to upload them into blob storage in blocks through .NET SDK. But the problem is, how can we upload these large files from client side, for example, a browser. This questioned to me when I was working with a Chinese customer to help them build a network disk production on top of azure. The end users upload their files from the web portal, and then the files will be stored in blob storage from the Web Role. My goal is to find the best way to transform the file from client (end user’s machine) to the server (Web Role) through browser. In this post I will demonstrate and describe what I had done, to upload large file in chunks with high speed, and save them as blocks into Windows Azure Blob Storage. Traditional Upload, Works with Limitation The simplest way to implement this requirement is to create a web page with a form that contains a file input element and a submit button. 1: @using (Html.BeginForm("About", "Index", FormMethod.Post, new { enctype = "multipart/form-data" })) 2: { 3: <input type="file" name="file" /> 4: <input type="submit" value="upload" /> 5: } And then in the backend controller, we retrieve the whole content of this file and upload it in to the blob storage through .NET SDK. We can split the file in blocks and upload them in parallel and commit. The code had been well blogged in the community. 1: [HttpPost] 2: public ActionResult About(HttpPostedFileBase file) 3: { 4: var container = _client.GetContainerReference("test"); 5: container.CreateIfNotExists(); 6: var blob = container.GetBlockBlobReference(file.FileName); 7: var blockDataList = new Dictionary<string, byte[]>(); 8: using (var stream = file.InputStream) 9: { 10: var blockSizeInKB = 1024; 11: var offset = 0; 12: var index = 0; 13: while (offset < stream.Length) 14: { 15: var readLength = Math.Min(1024 * blockSizeInKB, (int)stream.Length - offset); 16: var blockData = new byte[readLength]; 17: offset += stream.Read(blockData, 0, readLength); 18: blockDataList.Add(Convert.ToBase64String(BitConverter.GetBytes(index)), blockData); 19: 20: index++; 21: } 22: } 23: 24: Parallel.ForEach(blockDataList, (bi) => 25: { 26: blob.PutBlock(bi.Key, new MemoryStream(bi.Value), null); 27: }); 28: blob.PutBlockList(blockDataList.Select(b => b.Key).ToArray()); 29: 30: return RedirectToAction("About"); 31: } This works perfect if we selected an image, a music or a small video to upload. But if I selected a large file, let’s say a 6GB HD-movie, after upload for about few minutes the page will be shown as below and the upload will be terminated. In ASP.NET there is a limitation of request length and the maximized request length is defined in the web.config file. It’s a number which less than about 4GB. So if we want to upload a really big file, we cannot simply implement in this way. Also, in Windows Azure, a cloud service network load balancer will terminate the connection if exceed the timeout period. From my test the timeout looks like 2 - 3 minutes. Hence, when we need to upload a large file we cannot just use the basic HTML elements. Besides the limitation mentioned above, the simple HTML file upload cannot provide rich upload experience such as chunk upload, pause and pause-resume. So we need to find a better way to upload large file from the client to the server. Upload in Chunks through HTML5 and JavaScript In order to break those limitation mentioned above we will try to upload the large file in chunks. This takes some benefit to us such as - No request size limitation: Since we upload in chunks, we can define the request size for each chunks regardless how big the entire file is. - No timeout problem: The size of chunks are controlled by us, which means we should be able to make sure request for each chunk upload will not exceed the timeout period of both ASP.NET and Windows Azure load balancer. It was a big challenge to upload big file in chunks until we have HTML5. There are some new features and improvements introduced in HTML5 and we will use them to implement our solution. In HTML5, the File interface had been improved with a new method called “slice”. It can be used to read part of the file by specifying the start byte index and the end byte index. For example if the entire file was 1024 bytes, file.slice(512, 768) will read the part of this file from the 512nd byte to 768th byte, and return a new object of interface called "Blob”, which you can treat as an array of bytes. In fact, a Blob object represents a file-like object of immutable, raw data. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system. For more information about the Blob please refer here. File and Blob is very useful to implement the chunk upload. We will use File interface to represent the file the user selected from the browser and then use File.slice to read the file in chunks in the size we wanted. For example, if we wanted to upload a 10MB file with 512KB chunks, then we can read it in 512KB blobs by using File.slice in a loop. Assuming we have a web page as below. User can select a file, an input box to specify the block size in KB and a button to start upload. 1: <div> 2: <input type="file" id="upload_files" name="files[]" /><br /> 3: Block Size: <input type="number" id="block_size" value="512" name="block_size" />KB<br /> 4: <input type="button" id="upload_button_blob" name="upload" value="upload (blob)" /> 5: </div> Then we can have the JavaScript function to upload the file in chunks when user clicked the button. 1: <script type="text/javascript"> 1: 2: $(function () { 3: $("#upload_button_blob").click(function () { 4: }); 5: });</script> Firstly we need to ensure the client browser supports the interfaces we are going to use. Just try to invoke the File, Blob and FormData from the “window” object. If any of them is “undefined” the condition result will be “false” which means your browser doesn’t support these premium feature and it’s time for you to get your browser updated. FormData is another new feature we are going to use in the future. It could generate a temporary form for us. We will use this interface to create a form with chunk and associated metadata when invoked the service through ajax. 1: $("#upload_button_blob").click(function () { 2: // assert the browser support html5 3: if (window.File && window.Blob && window.FormData) { 4: alert("Your brwoser is awesome, let's rock!"); 5: } 6: else { 7: alert("Oh man plz update to a modern browser before try is cool stuff out."); 8: return; 9: } 10: }); Each browser supports these interfaces by their own implementation and currently the Blob, File and File.slice are supported by Chrome 21, FireFox 13, IE 10, Opera 12 and Safari 5.1 or higher. After that we worked on the files the user selected one by one since in HTML5, user can select multiple files in one file input box. 1: var files = $("#upload_files")[0].files; 2: for (var i = 0; i < files.length; i++) { 3: var file = files[i]; 4: var fileSize = file.size; 5: var fileName = file.name; 6: } Next, we calculated the start index and end index for each chunks based on the size the user specified from the browser. We put them into an array with the file name and the index, which will be used when we upload chunks into Windows Azure Blob Storage as blocks since we need to specify the target blob name and the block index. At the same time we will store the list of all indexes into another variant which will be used to commit blocks into blob in Azure Storage once all chunks had been uploaded successfully. 1: $("#upload_button_blob").click(function () { 2: // assert the browser support html5 3: ... ... 4: // start to upload each files in chunks 5: var files = $("#upload_files")[0].files; 6: for (var i = 0; i < files.length; i++) { 7: var file = files[i]; 8: var fileSize = file.size; 9: var fileName = file.name; 10: 11: // calculate the start and end byte index for each blocks(chunks) 12: // with the index, file name and index list for future using 13: var blockSizeInKB = $("#block_size").val(); 14: var blockSize = blockSizeInKB * 1024; 15: var blocks = []; 16: var offset = 0; 17: var index = 0; 18: var list = ""; 19: while (offset < fileSize) { 20: var start = offset; 21: var end = Math.min(offset + blockSize, fileSize); 22: 23: blocks.push({ 24: name: fileName, 25: index: index, 26: start: start, 27: end: end 28: }); 29: list += index + ","; 30: 31: offset = end; 32: index++; 33: } 34: } 35: }); Now we have all chunks’ information ready. The next step should be upload them one by one to the server side, and at the server side when received a chunk it will upload as a block into Blob Storage, and finally commit them with the index list through BlockBlobClient.PutBlockList. But since all these invokes are ajax calling, which means not synchronized call. So we need to introduce a new JavaScript library to help us coordinate the asynchronize operation, which named “async.js”. You can download this JavaScript library here, and you can find the document here. I will not explain this library too much in this post. We will put all procedures we want to execute as a function array, and pass into the proper function defined in async.js to let it help us to control the execution sequence, in series or in parallel. Hence we will define an array and put the function for chunk upload into this array. 1: $("#upload_button_blob").click(function () { 2: // assert the browser support html5 3: ... ... 4: 5: // start to upload each files in chunks 6: var files = $("#upload_files")[0].files; 7: for (var i = 0; i < files.length; i++) { 8: var file = files[i]; 9: var fileSize = file.size; 10: var fileName = file.name; 11: // calculate the start and end byte index for each blocks(chunks) 12: // with the index, file name and index list for future using 13: ... ... 14: 15: // define the function array and push all chunk upload operation into this array 16: blocks.forEach(function (block) { 17: putBlocks.push(function (callback) { 18: }); 19: }); 20: } 21: }); 22: }); As you can see, I used File.slice method to read each chunks based on the start and end byte index we calculated previously, and constructed a temporary HTML form with the file name, chunk index and chunk data through another new feature in HTML5 named FormData. Then post this form to the backend server through jQuery.ajax. This is the key part of our solution. 1: $("#upload_button_blob").click(function () { 2: // assert the browser support html5 3: ... ... 4: // start to upload each files in chunks 5: var files = $("#upload_files")[0].files; 6: for (var i = 0; i < files.length; i++) { 7: var file = files[i]; 8: var fileSize = file.size; 9: var fileName = file.name; 10: // calculate the start and end byte index for each blocks(chunks) 11: // with the index, file name and index list for future using 12: ... ... 13: // define the function array and push all chunk upload operation into this array 14: blocks.forEach(function (block) { 15: putBlocks.push(function (callback) { 16: // load blob based on the start and end index for each chunks 17: var blob = file.slice(block.start, block.end); 18: // put the file name, index and blob into a temporary from 19: var fd = new FormData(); 20: fd.append("name", block.name); 21: fd.append("index", block.index); 22: fd.append("file", blob); 23: // post the form to backend service (asp.net mvc controller action) 24: $.ajax({ 25: url: "/Home/UploadInFormData", 26: data: fd, 27: processData: false, 28: contentType: "multipart/form-data", 29: type: "POST", 30: success: function (result) { 31: if (!result.success) { 32: alert(result.error); 33: } 34: callback(null, block.index); 35: } 36: }); 37: }); 38: }); 39: } 40: }); Then we will invoke these functions one by one by using the async.js. And once all functions had been executed successfully I invoked another ajax call to the backend service to commit all these chunks (blocks) as the blob in Windows Azure Storage. 1: $("#upload_button_blob").click(function () { 2: // assert the browser support html5 3: ... ... 4: // start to upload each files in chunks 5: var files = $("#upload_files")[0].files; 6: for (var i = 0; i < files.length; i++) { 7: var file = files[i]; 8: var fileSize = file.size; 9: var fileName = file.name; 10: // calculate the start and end byte index for each blocks(chunks) 11: // with the index, file name and index list for future using 12: ... ... 13: // define the function array and push all chunk upload operation into this array 14: ... ... 15: // invoke the functions one by one 16: // then invoke the commit ajax call to put blocks into blob in azure storage 17: async.series(putBlocks, function (error, result) { 18: var data = { 19: name: fileName, 20: list: list 21: }; 22: $.post("/Home/Commit", data, function (result) { 23: if (!result.success) { 24: alert(result.error); 25: } 26: else { 27: alert("done!"); 28: } 29: }); 30: }); 31: } 32: }); That’s all in the client side. The outline of our logic would be - Calculate the start and end byte index for each chunks based on the block size. - Defined the functions of reading the chunk form file and upload the content to the backend service through ajax. - Execute the functions defined in previous step with “async.js”. - Commit the chunks by invoking the backend service in Windows Azure Storage finally. Save Chunks as Blocks into Blob Storage In above we finished the client size JavaScript code. It uploaded the file in chunks to the backend service which we are going to implement in this step. We will use ASP.NET MVC as our backend service, and it will receive the chunks, upload into Windows Azure Bob Storage in blocks, then finally commit as one blob. As in the client side we uploaded chunks by invoking the ajax call to the URL "/Home/UploadInFormData", I created a new action under the Index controller and it only accepts HTTP POST request. 1: [HttpPost] 2: public JsonResult UploadInFormData() 3: { 4: var error = string.Empty; 5: try 6: { 7: } 8: catch (Exception e) 9: { 10: error = e.ToString(); 11: } 12: 13: return new JsonResult() 14: { 15: Data = new 16: { 17: success = string.IsNullOrWhiteSpace(error), 18: error = error 19: } 20: }; 21: } Then I retrieved the file name, index and the chunk content from the Request.Form object, which was passed from our client side. And then, used the Windows Azure SDK to create a blob container (in this case we will use the container named “test”.) and create a blob reference with the blob name (same as the file name). Then uploaded the chunk as a block of this blob with the index, since in Blob Storage each block must have an index (ID) associated with so that finally we can put all blocks as one blob by specifying their block ID list. 1: [HttpPost] 2: public JsonResult UploadInFormData() 3: { 4: var error = string.Empty; 5: try 6: { 7: var name = Request.Form["name"]; 8: var index = int.Parse(Request.Form["index"]); 9: var file = Request.Files[0]; 10: var id = Convert.ToBase64String(BitConverter.GetBytes(index)); 11: 12: var container = _client.GetContainerReference("test"); 13: container.CreateIfNotExists(); 14: var blob = container.GetBlockBlobReference(name); 15: blob.PutBlock(id, file.InputStream, null); 16: } 17: catch (Exception e) 18: { 19: error = e.ToString(); 20: } 21: 22: return new JsonResult() 23: { 24: Data = new 25: { 26: success = string.IsNullOrWhiteSpace(error), 27: error = error 28: } 29: }; 30: } Next, I created another action to commit the blocks into blob once all chunks had been uploaded. Similarly, I retrieved the blob name from the Request.Form. I also retrieved the chunks ID list, which is the block ID list from the Request.Form in a string format, split them as a list, then invoked the BlockBlob.PutBlockList method. After that our blob will be shown in the container and ready to be download. 1: [HttpPost] 2: public JsonResult Commit() 3: { 4: var error = string.Empty; 5: try 6: { 7: var name = Request.Form["name"]; 8: var list = Request.Form["list"]; 9: var ids = list 10: .Split(',') 11: .Where(id => !string.IsNullOrWhiteSpace(id)) 12: .Select(id => Convert.ToBase64String(BitConverter.GetBytes(int.Parse(id)))) 13: .ToArray(); 14: 15: var container = _client.GetContainerReference("test"); 16: container.CreateIfNotExists(); 17: var blob = container.GetBlockBlobReference(name); 18: blob.PutBlockList(ids); 19: } 20: catch (Exception e) 21: { 22: error = e.ToString(); 23: } 24: 25: return new JsonResult() 26: { 27: Data = new 28: { 29: success = string.IsNullOrWhiteSpace(error), 30: error = error 31: } 32: }; 33: } Now we finished all code we need. The whole process of uploading would be like this below. Below is the full client side JavaScript code. 1: <script type="text/javascript" src="~/Scripts/async.js"></script> 2: <script type="text/javascript"> 3: $(function () { 4: $("#upload_button_blob").click(function () { 5: // assert the browser support html5 6: if (window.File && window.Blob && window.FormData) { 7: alert("Your brwoser is awesome, let's rock!"); 8: } 9: else { 10: alert("Oh man plz update to a modern browser before try is cool stuff out."); 11: return; 12: } 13: 14: // start to upload each files in chunks 15: var files = $("#upload_files")[0].files; 16: for (var i = 0; i < files.length; i++) { 17: var file = files[i]; 18: var fileSize = file.size; 19: var fileName = file.name; 20: 21: // calculate the start and end byte index for each blocks(chunks) 22: // with the index, file name and index list for future using 23: var blockSizeInKB = $("#block_size").val(); 24: var blockSize = blockSizeInKB * 1024; 25: var blocks = []; 26: var offset = 0; 27: var index = 0; 28: var list = ""; 29: while (offset < fileSize) { 30: var start = offset; 31: var end = Math.min(offset + blockSize, fileSize); 32: 33: blocks.push({ 34: name: fileName, 35: index: index, 36: start: start, 37: end: end 38: }); 39: list += index + ","; 40: 41: offset = end; 42: index++; 43: } 44: 45: // define the function array and push all chunk upload operation into this array 46: var putBlocks = []; 47: blocks.forEach(function (block) { 48: putBlocks.push(function (callback) { 49: // load blob based on the start and end index for each chunks 50: var blob = file.slice(block.start, block.end); 51: // put the file name, index and blob into a temporary from 52: var fd = new FormData(); 53: fd.append("name", block.name); 54: fd.append("index", block.index); 55: fd.append("file", blob); 56: // post the form to backend service (asp.net mvc controller action) 57: $.ajax({ 58: url: "/Home/UploadInFormData", 59: data: fd, 60: processData: false, 61: contentType: "multipart/form-data", 62: type: "POST", 63: success: function (result) { 64: if (!result.success) { 65: alert(result.error); 66: } 67: callback(null, block.index); 68: } 69: }); 70: }); 71: }); 72: 73: // invoke the functions one by one 74: // then invoke the commit ajax call to put blocks into blob in azure storage 75: async.series(putBlocks, function (error, result) { 76: var data = { 77: name: fileName, 78: list: list 79: }; 80: $.post("/Home/Commit", data, function (result) { 81: if (!result.success) { 82: alert(result.error); 83: } 84: else { 85: alert("done!"); 86: } 87: }); 88: }); 89: } 90: }); 91: }); 92: </script> And below is the full ASP.NET MVC controller code. 1: public class HomeController : Controller 2: { 3: private CloudStorageAccount _account; 4: private CloudBlobClient _client; 5: 6: public HomeController() 7: : base() 8: { 9: _account = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("DataConnectionString")); 10: _client = _account.CreateCloudBlobClient(); 11: } 12: 13: public ActionResult Index() 14: { 15: ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; 16: 17: return View(); 18: } 19: 20: [HttpPost] 21: public JsonResult UploadInFormData() 22: { 23: var error = string.Empty; 24: try 25: { 26: var name = Request.Form["name"]; 27: var index = int.Parse(Request.Form["index"]); 28: var file = Request.Files[0]; 29: var id = Convert.ToBase64String(BitConverter.GetBytes(index)); 30: 31: var container = _client.GetContainerReference("test"); 32: container.CreateIfNotExists(); 33: var blob = container.GetBlockBlobReference(name); 34: blob.PutBlock(id, file.InputStream, null); 35: } 36: catch (Exception e) 37: { 38: error = e.ToString(); 39: } 40: 41: return new JsonResult() 42: { 43: Data = new 44: { 45: success = string.IsNullOrWhiteSpace(error), 46: error = error 47: } 48: }; 49: } 50: 51: [HttpPost] 52: public JsonResult Commit() 53: { 54: var error = string.Empty; 55: try 56: { 57: var name = Request.Form["name"]; 58: var list = Request.Form["list"]; 59: var ids = list 60: .Split(',') 61: .Where(id => !string.IsNullOrWhiteSpace(id)) 62: .Select(id => Convert.ToBase64String(BitConverter.GetBytes(int.Parse(id)))) 63: .ToArray(); 64: 65: var container = _client.GetContainerReference("test"); 66: container.CreateIfNotExists(); 67: var blob = container.GetBlockBlobReference(name); 68: blob.PutBlockList(ids); 69: } 70: catch (Exception e) 71: { 72: error = e.ToString(); 73: } 74: 75: return new JsonResult() 76: { 77: Data = new 78: { 79: success = string.IsNullOrWhiteSpace(error), 80: error = error 81: } 82: }; 83: } 84: } And if we selected a file from the browser we will see our application will upload chunks in the size we specified to the server through ajax call in background, and then commit all chunks in one blob. Then we can find the blob in our Windows Azure Blob Storage. Optimized by Parallel Upload In previous example we just uploaded our file in chunks. This solved the problem that ASP.NET MVC request content size limitation as well as the Windows Azure load balancer timeout. But it might introduce the performance problem since we uploaded chunks in sequence. In order to improve the upload performance we could modify our client side code a bit to make the upload operation invoked in parallel. The good news is that, “async.js” library provides the parallel execution function. If you remembered the code we invoke the service to upload chunks, it utilized “async.series” which means all functions will be executed in sequence. Now we will change this code to “async.parallel”. This will invoke all functions in parallel. 1: $("#upload_button_blob").click(function () { 2: // assert the browser support html5 3: ... ... 4: // start to upload each files in chunks 5: var files = $("#upload_files")[0].files; 6: for (var i = 0; i < files.length; i++) { 7: var file = files[i]; 8: var fileSize = file.size; 9: var fileName = file.name; 10: // calculate the start and end byte index for each blocks(chunks) 11: // with the index, file name and index list for future using 12: ... ... 13: // define the function array and push all chunk upload operation into this array 14: ... ... 15: // invoke the functions one by one 16: // then invoke the commit ajax call to put blocks into blob in azure storage 17: async.parallel(putBlocks, function (error, result) { 18: var data = { 19: name: fileName, 20: list: list 21: }; 22: $.post("/Home/Commit", data, function (result) { 23: if (!result.success) { 24: alert(result.error); 25: } 26: else { 27: alert("done!"); 28: } 29: }); 30: }); 31: } 32: }); In this way all chunks will be uploaded to the server side at the same time to maximize the bandwidth usage. This should work if the file was not very large and the chunk size was not very small. But for large file this might introduce another problem that too many ajax calls are sent to the server at the same time. So the best solution should be, upload the chunks in parallel with maximum concurrency limitation. The code below specified the concurrency limitation to 4, which means at the most only 4 ajax calls could be invoked at the same time. 1: $("#upload_button_blob").click(function () { 2: // assert the browser support html5 3: ... ... 4: // start to upload each files in chunks 5: var files = $("#upload_files")[0].files; 6: for (var i = 0; i < files.length; i++) { 7: var file = files[i]; 8: var fileSize = file.size; 9: var fileName = file.name; 10: // calculate the start and end byte index for each blocks(chunks) 11: // with the index, file name and index list for future using 12: ... ... 13: // define the function array and push all chunk upload operation into this array 14: ... ... 15: // invoke the functions one by one 16: // then invoke the commit ajax call to put blocks into blob in azure storage 17: async.parallelLimit(putBlocks, 4, function (error, result) { 18: var data = { 19: name: fileName, 20: list: list 21: }; 22: $.post("/Home/Commit", data, function (result) { 23: if (!result.success) { 24: alert(result.error); 25: } 26: else { 27: alert("done!"); 28: } 29: }); 30: }); 31: } 32: }); Summary In this post we discussed how to upload files in chunks to the backend service and then upload them into Windows Azure Blob Storage in blocks. We focused on the frontend side and leverage three new feature introduced in HTML 5 which are - File.slice: Read part of the file by specifying the start and end byte index. - Blob: File-like interface which contains the part of the file content. - FormData: Temporary form element that we can pass the chunk alone with some metadata to the backend service. Then we discussed the performance consideration of chunk uploading. Sequence upload cannot provide maximized upload speed, but the unlimited parallel upload might crash the browser and server if too many chunks. So we finally came up with the solution to upload chunks in parallel with the concurrency limitation. We also demonstrated how to utilize “async.js” JavaScript library to help us control the asynchronize call and the parallel limitation. Regarding the chunk size and the parallel limitation value there is no “best” value. You need to test vary composition and find out the best one for your particular scenario. It depends on the local bandwidth, client machine cores and the server side (Windows Azure Cloud Service Virtual Machine) cores, memory and bandwidth. Below is one of my performance test result. The client machine was Windows 8 IE 10 with 4 cores. I was using Microsoft Cooperation Network. The web site was hosted on Windows Azure China North data center (in Beijing) with one small web role (1.7GB 1 core CPU, 1.75GB memory with 100Mbps bandwidth). The test cases were - Chunk size: 512KB, 1MB, 2MB, 4MB. - Upload Mode: Sequence, parallel (unlimited), parallel with limit (4 threads, 8 threads). - Chunk Format: base64 string, binaries. - Target file: 100MB. - Each case was tested 3 times. Below is the test result chart. Some thoughts, but not guidance or best practice: - Parallel gets better performance than series. - No significant performance improvement between parallel 4 threads and 8 threads. - Transform with binaries provides better performance than base64. - In all cases, chunk size in 1MB - 2MB gets better performance. Hope this helps, Shaun All documents and related graphics, codes are provided "AS IS" without warranty of any kind. Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.

Read the article

Create and Consume WCF service using Visual Studio 2010

- by sreejukg

In this article I am going to demonstrate how to create a WCF service, that can be hosted inside IIS and a windows application that consume the WCF service. To support service oriented architecture, Microsoft developed the programming model named Windows Communication Foundation (WCF). ASMX was the prior version from Microsoft, was completely based on XML and .Net framework continues to support ASMX web services in future versions also. While ASMX web services was the first step towards the service oriented architecture, Microsoft has made a big step forward by introducing WCF. An overview of planning for WCF can be found from this link http://msdn.microsoft.com/en-us/library/ff649584.aspx . The following are the important differences between WCF and ASMX from an asp.net developer point of view. 1. ASMX web services are easy to write, configure and consume 2. ASMX web services are only hosted in IIS 3. ASMX web services can only use http 4. WCF, can be hosted inside IIS, windows service, console application, WAS(Windows Process Activation Service) etc 5. WCF can be used with HTTP, TCP/IP, MSMQ and other protocols. The detailed difference between ASMX web service and WCF can be found here. http://msdn.microsoft.com/en-us/library/cc304771.aspx Though WCF is a bigger step for future, Visual Studio makes it simpler to create, publish and consume the WCF service. In this demonstration, I am going to create a service named SayHello that accepts 2 parameters such as name and language code. The service will return a hello to user name that corresponds to the language. So the proposed service usage is as follows. Caller: SayHello(“Sreeju”, “en”) -> return value -> Hello Sreeju Caller: SayHello(“???”, “ar”) -> return value -> ????? ??? Caller: SayHello(“Sreeju”, “es”) - > return value -> Hola Sreeju Note: calling an automated translation service is not the intention of this article. If you are interested, you can find bing translator API and can use in your application. http://www.microsofttranslator.com/dev/ So Let us start First I am going to create a Service Application that offer the SayHello Service. Open Visual Studio 2010, Go to File -> New Project, from your preferred language from the templates section select WCF, select WCF service application as the project type, give the project a name(I named it as HelloService), click ok so that visual studio will create the project for you. In this demonstration, I have used C# as the programming language. Visual studio will create the necessary files for you to start with. By default it will create a service with name Service1.svc and there will be an interface named IService.cs. The screenshot for the project in solution explorer is as follows Since I want to demonstrate how to create new service, I deleted Service1.Svc and IService1.cs files from the project by right click the file and select delete. Now in the project there is no service available, I am going to create one. From the solution explorer, right click the project, select Add -> New Item Add new item dialog will appear to you. Select WCF service from the list, give the name as HelloService.svc, and click on the Add button. Now Visual studio will create 2 files with name IHelloService.cs and HelloService.svc. These files are basically the service definition (IHelloService.cs) and the service implementation (HelloService.svc). Let us examine the IHelloService interface. The code state that IHelloService is the service definition and it provides an operation/method (similar to web method in ASMX web services) named DoWork(). Any WCF service will have a definition file as an Interface that defines the service. Let us see what is inside HelloService.svc The code illustrated is implementing the interface IHelloService. The code is self-explanatory; the HelloService class needs to implement all the methods defined in the Service Definition. Let me do the service as I require. Open IHelloService.cs in visual studio, and delete the DoWork() method and add a definition for SayHello(), do not forget to add OperationContract attribute to the method. The modified IHelloService.cs will look as follows Now implement the SayHello method in the HelloService.svc.cs file. Here I wrote the code for SayHello method as follows. I am done with the service. Now you can build and run the service by clicking f5 (or selecting start debugging from the debug menu). Visual studio will host the service in give you a client to test it. The screenshot is as follows. In the left pane, it shows the services available in the server and in right side you can invoke the service. To test the service sayHello, double click on it from the above window. It will ask you to enter the parameters and click on the invoke button. See a sample output below. Now I have done with the service. The next step is to write a service client. Creating a consumer application involves 2 steps. One generating the class and configuration file corresponds to the service. Create a project that utilizes the generated class and configuration file. First I am going to generate the class and configuration file. There is a great tool available with Visual Studio named svcutil.exe, this tool will create the necessary class and configuration files for you. Read the documentation for the svcutil.exe here http://msdn.microsoft.com/en-us/library/aa347733.aspx . Open Visual studio command prompt, you can find it under Start Menu -> All Programs -> Visual Studio 2010 -> Visual Studio Tools -> Visual Studio command prompt Make sure the service is in running state in visual studio. Note the url for the service(from the running window, you can right click and choose copy address). Now from the command prompt, enter the svcutil.exe command as follows. I have mentioned the url and the /d switch – for the directory to store the output files(In this case d:\temp). If you are using windows drive(in my case it is c: ) , make sure you open the command prompt with run as administrator option, otherwise you will get permission error(Only in windows 7 or windows vista). The tool has created 2 files, HelloService.cs and output.config. Now the next step is to create a new project and use the created files and consume the service. Let us do that now. I am going to add a console application to the current solution. Right click solution name in the solution explorer, right click, Add-> New Project Under Visual C#, select console application, give the project a name, I named it TestService Now navigate to d:\temp where I generated the files with the svcutil.exe. Rename output.config to app.config. Next step is to add both files (d:\temp\helloservice.cs and app.config) to the files. In the solution explorer, right click the project, Add -> Add existing item, browse to the d:\temp folder, select the 2 files as mentioned before, click on the add button. Now you need to add a reference to the System.ServiceModel to the project. From solution explorer, right click the references under testservice project, select Add reference. In the Add reference dialog, select the .Net tab, select System.ServiceModel, and click ok Now open program.cs by double clicking on it and add the code to consume the web service to the main method. The modified file looks as follows Right click the testservice project and set as startup project. Click f5 to run the project. See the sample output as follows Publishing WCF service under IIS is similar to publishing ASP.Net application. Publish the application to a folder using Visual studio publishing feature, create a virtual directory and create it as an application. Don’t forget to set the application pool to use ASP.Net version 4. One last thing you need to check is the app.config file you have added to the solution. See the element client under ServiceModel element. There is an endpoint element with address attribute that points to the published service URL. If you permanently host the service under IIS, you can simply change the address parameter to the corresponding one and your application will consume the service. You have seen how easily you can build/consume WCF service. If you need the solution in zipped format, please post your email below.

Read the article

December release of Microsoft All-In-One Code Framework is available now.

- by Jialiang

The code samples in Microsoft All-In-One Code Framework are updated on 2010-12-13. Download address: http://1code.codeplex.com/releases/view/57459#DownloadId=185534 Updated code sample index categorized by technologies: http://1code.codeplex.com/wikipage?title=All-In-One%20Code%20Framework%20Sample%20Catalog (it also allows you to download individual code samples instead of the entire All-In-One Code Framework sample package.) If it’s the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on YouTube http://www.youtube.com/watch?v=cO5Li3APU58, or read the introduction on our homepage http://1code.codeplex.com/, and this Port25 article http://port25.technet.com/archive/2010/01/18/the-all-in-one-code-framework.aspx. -------------- New ASP.NET Code Samples VBASPNETAJAXWebChat and CSASPNETAJAXWebChat Most of you have some experience in chatting with friends on the web. So you may want to know how to make a web chat application, it seems to be quite complicated. But ASP.NET gives you the power to buiild a chat room easily. In this code sample, we will construct our own web chat room with the amazing AJAX feature. The principle is simple relatively. As we all know, a base chat application need 4 base controls: one List control to show the chat room members, one List control to show the message list, one TextBox control to input messages and one button to send message. User inputs his message in the textbox first and then presses Send button, it will send the message to the server. The message list will update every 2 seconds to get the newest message list in the chat room from the server. We need to know, it is hard for us to make an AJAX web chat application like a windows form application because we cannot keep the connection after one web request ended. So a lot of events which communicates between client side and server side cannot be realized. The common workaround is to make web requests in every some seconds to check whether the server side has been updated. But another technique called COMET makes it possible. But it is different with AJAX and will not be talked in details in this KB. For more details about COMET, we can get some clues from the Reference. CSASPNETCurrentOnlineUserList and VBASPNETCurrentOnlineUserList This sample demos a system that needs to display a list of current online users' information. As a matter of fact, Membership.GetNumberOfUsersOnline Method can get the number of online users and there is a convenient approach to check whether the user is online by using Membership.GetUser(string userName).IsOnline property,however many asp.net projects are not using membership.So in this case,the sample shows how to display a list of current online users' information without using membership provider. It is not difficult to check whether the user is online by using session.Many projects tend to be used “Session_End” event to mark a user as “Offline”,however ,it may not be a good idea,because it can’t detect the user status accurately. In addition, "Session_End" event is only available in the "InProc" session mode. If you are storing session states in the State Server or SQL Server, "Session_End" event will never fire. To handle this issue, we need to save the user online status to a global DataTable or DataBase. In the sample application, define a global DataTable to store the information of online users.Use XmlHttpRequest in the pages to update and check user's last active time at intervals and also retrieve information on how many users are still online. The sample project can auto delete offline users' information from a global DataTable by checking users’ last active time. A step-by-step guide illustrating how to display a list of current online users' information without using membership provider: 1. Login page. Let user sign in and add current user’s information to a global datatable while Initialize the global datatable which used to store information of current online users. 2. Current online user list page. Use XmlHttpRequest in this page to update and check user's last active time at intervals and also retrieve information on how many users are still online. 3. If user closes the page without clicking the sign out link button ,the sample project can auto mark the user as offline and delete offline users' information from a global DataTable which used to store information of current online users by checking users’ last active time. Then the current online user list will be like this: CSASPNETIPtoLocation This sample demonstrates how to find the geographical location from an IP address. As we know, it is not hard for us to get the IP address of visitors via Request.ServerVariable property, but it is really difficult for us to know where they come from. To achieve this feature, the sample uses a free third party web service from http://freegeoip.appspot.com/, which returns the information about an IP address we send to the server in the format of XML, JSON or CSV. It makes all things easier. CSASPNETBackgroundWorker Sometimes we do an operation which needs long time to complete. It will stop the response and the page is blank until the operation finished. In this case, we want the operation to run in the background, and in the page, we want to display the progress of the running operation. Therefore, the user can know the operation is running and can know the progress. CSASPNETInheritingFromTreeNode In windows forms TreeView, each tree node has a property called "Tag" which can be used to store a custom object. Many customers want to implement the same tag feature in ASP.NET TreeView. This project creates a custom TreeView control named "CustomTreeView" to achieve this goal. CSASPNETRemoteUploadAndDownload and VBASPNETRemoteUploadAndDownload This code sample was created in response to a code sample request in our new code sample request frunction for customers. The code samples demonstrate uploading files to and downloading files from a remote HTTP or FTP server. In .NET Framework 2.0 and higher versions, there are some lightweight class libraries which support HTTP and FTP protocol transmission. By using these classes, we can achieve this programming requirement. CSASPNETImageEditUpload and VBASPNETImageEditUpload This demo will shows how to insert, edit and update a common image with the type of "jpg", "png", "gif" or "bmp" . We mainly use two different SqlDataSources with the same database to bind to GridView and FormView in order to establish the “cascading” effort. Besides we apply our self-made ImageHanlder to encoding or decoding images of different types, and use context to output the stream of images. We will explicitly assign the binary streams of images through the event of “FormView_ItemInserting” or “Form_ItemUpdating” to synchronize the stream both in what we can see on an aspx page as well as in what’s really stored in the database. WebBrowser Control, Network and other Windows General New Code Samples CSWebBrowserSuppressError and VBWebBrowserSuppressError The sample demonstrates how to make WebBrowser suppress errors, such as script error, navigation error and so on. CSWebBrowserWithProxy and VBWebBrowserWithProxy The sample demonstrates how to make WebBrowser use a proxy server. CSWebDownloadProgress and VBWebDownloadProgress The sample demonstrates how to show progress during the download. It also supplies the features to Start, Pause, Resume and Cancel a download. CppSetDesktopWallpaper, CSSetDesktopWallpaper and VBSetDesktopWallpaper This code sample application allows you select an image, view a preview (resized smaller to fit if necessary), select a display style among Tile, Center, Stretch, Fit (Windows 7 and later) and Fill (Windows 7 and later), and set the image as the Desktop wallpaper. CSWindowsServiceRecoveryProperty and VBWindowsServiceRecoveryProperty CSWindowsServiceRecoveryProperty example demonstrates how to use ChangeServiceConfig2 to configure the service "Recovery" properties in C#. This example operates all the options you can see on the service "Recovery" tab, including setting the "Enable actions for stops with errors" option in Windows Vista and later operating systems. This example also include how to grant the shut down privilege to the process, so that we can configure a special option in the "Recovery" tab - "Restart Computer Options...". New Office Development Code Samples CSOneNoteRibbonAddIn and VBOneNoteRibbonAddIn The code sample demonstrates a OneNote 2010 COM add-in that implements IDTExtensibility2. The add-in also supports customizing the Ribbon by implementing the IRibbonExtensibility interface. It is a skeleton OneNote add-in that developers can extend it to implement more functions. The code sample was requested by a customer in our code sample request service. We expect that this could help developers in the community. New Windows Shell Code Samples CppShellExtPreviewHandler, CSShellExtPreviewHandler and VBShellExtPreviewHandler In the past two months, we released the code samples of Windows Context Menu Handler, Infotip Handler, and Thumbnail Handler. This is the fourth part of the shell extension series: Preview Handler. The code samples demo the C++, C# and VB.NET implementation of a preview handler for a new file type registered with the .recipe extension. Preview handlers are called when an item is selected to show a lightweight, rich, read-only preview of the file's contents in the view's reading pane. This is done without launching the file's associated application. Windows Vista and later operating systems support preview handlers. To be a valid preview handler, several interfaces must be implemented. This includes IPreviewHandler (shobjidl.h); IInitializeWithFile, IInitializeWithStream, or IInitializeWithItem (propsys.h); IObjectWithSite (ocidl.h); and IOleWindow (oleidl.h). There are also optional interfaces, such as IPreviewHandlerVisuals (shobjidl.h), that a preview handler can implement to provide extended support. Windows API Code Pack for Microsoft .NET Framework makes the implementation of these interfaces very easy in .NET. The example preview handler provides previews for .recipe files. The .recipe file type is simply an XML file registered as a unique file name extension. It includes the title of the recipe, its author, difficulty, preparation time, cook time, nutrition information, comments, an embedded preview image, and so on. The preview handler extracts the title, comments, and the embedded image, and display them in a preview window. In response to many customers' request, we added setup projects in every shell extension samples in this release. Those setup projects allow you to deploy the shell extensions to your end users' machines. ---------- Download address: http://1code.codeplex.com/releases/view/57459#DownloadId=185534 Updated code sample index categorized by technologies: http://1code.codeplex.com/wikipage?title=All-In-One%20Code%20Framework%20Sample%20Catalog (it also allows you to download individual code samples instead of the entire All-In-One Code Framework sample package.) If you have any feedback for us, please email: [email protected]. We look forward to your comments.

Search Results

Search found 16714 results on 669 pages for 'button'.

Page 277/669 | < Previous Page | 273 274 275 276 277 278 279 280 281 282 283 284 | Next Page >

- by user354089

- by nemade-vipin

- by pradeep

- by user3689753

- by devnet247

- by BigMad

- by srihari

- by rangalo

- by Jesse Aldridge

- by Kumu

- by thefonso

- by user1234167

- by swapnil adsure

- by Jamex

- by HEEEEEEELP

- by jeansymolanza

- by Mouli

- by user2769165

- by DigitalGeekery

- by Stephen Walther

- by Yousef_Jadallah

- by ScottGu

- by Shaun

- by sreejukg

- by Jialiang

< Previous Page | 273 274 275 276 277 278 279 280 281 282 283 284 | Next Page >