Search Results

Search found 352 results on 15 pages for 'draggable'.

Page 14/15 | < Previous Page | 10 11 12 13 14 15  | Next Page >

  • setting a value through jquery

    - by Hulk
    <script> function edit(elem) { var ele=$(elem).siblings('label#test').html(); var a=document.getElementById('test'); var htm = '<input type="text" name="modal" id="modal" style="width:70%;" value="'+$(elem).siblings('label#test').html();+'"/>'; $dialog.html(htm) .dialog({ autoOpen: true, position: 'center' , title: 'EDIT', draggable: false, width : 300, height : 40, resizable : false, modal : true, buttons: { "Save" : function() { if($('#modal').val() != ''){a.value=$('#modal').val();$dialog.dialog('close');} else {alert('i++'+$('#modal').val()+'++');} } } }); $dialog.dialog('open'); } $(document).ready(function() { var flag=0; $("input:radio[@name=template]").click(function() { var checkedoption = $(this).val(); if (checkedoption == "template3") { if (flag == 0) { var html = '<input type="text" name="val" id="val" />&nbsp;&nbsp;&nbsp;<input type="button" value="Add" id="add"><br>'; $('#useroptions').append(html); flag=1; $('#add').click(function(){ var a = $('#val').val(); if (a == '') { alert('Enter options'); } else { var section= '<tr class="clickable"><td id="userval" BGCOLOR="#FF6699"><label id="test">' + a + '</label>&nbsp;&nbsp;&nbsp; <IMG SRC="/media/img/chunkedit.gif" onclick="javascript:edit(this);" >&nbsp;&nbsp;&nbsp;<IMG SRC="/media/img/close.gif" onclick="javascript:remove(this);" ></td></tr>'; $('#useroptions').append(section); } }); } } }); }); </script> <form> <table> <tr><td> <div id="useroptions"></div> </tr></td> </table> </form> How to set a new value for test in the above code.. Thanks

    Read the article

  • drag and drop working funny when using variable draggables and droppables

    - by Lina
    Hi, i have some containers that contain some divs like: <div id="container1"> <div id="task1" onMouseOver="DragDrop("+1+");">&nbsp;</div> <div id="task2" onMouseOver="DragDrop("+2+");">&nbsp;</div> <div id="task3" onMouseOver="DragDrop("+3+");">&nbsp;</div> <div id="task4" onMouseOver="DragDrop("+4+");">&nbsp;</div> </div> <div id="container2"> <div id="task5" onMouseOver="DragDrop("+5+");">&nbsp;</div> <div id="task6" onMouseOver="DragDrop("+6+");">&nbsp;</div> </div> <div id="container3"> <div id="task7" onMouseOver="DragDrop("+7+");">&nbsp;</div> <div id="task8" onMouseOver="DragDrop("+8+");">&nbsp;</div> <div id="task9" onMouseOver="DragDrop("+9+");">&nbsp;</div> <div id="task10" onMouseOver="DragDrop("+10+");">&nbsp;</div> </div> i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them and to do that i'm using the event onMouseOver to call the following function: function DragDrop(id) { $("#task" + id).draggable({ revert: 'invalid' }); for (var i = 0; i < nameList.length; i++) { $("#" + nameList[i]).droppable({ drop: function (ev, ui) { var pos = $("#task" + id).position(); if (pos.left <= 0) { $("#task" + id).css("left", "5px"); } else { var day = parseInt(parseInt(pos.left) / 42); var leftPos = (day * 42) + 5; $("#task" + id).css("left", "" + leftPos + "px"); } } }); } } where: nameList = [container1, container2, container3]; the drag is working fine, but the drop is not really, it's just a mess! any help please?? when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny! any suggestions??? thanks a million in advance Lina

    Read the article

  • Jquery Dialog - div disappears after initialization

    - by Zuber
    JQuery Dialog is giving me lots of pain lately. I have the following div which I want to be popped up. (Ignore that the classes do not show the double quotes in the syntax) TABLE class=widget-title-table border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD class=widget-title><SPAN class=widget-title>Basic Info</SPAN></TD> <TD class=widget-action> <DIV id=edit-actions jQuery1266325647362="3"> <UL class="linkbutton-menu read-mode"> <LI class="control-actions"> <A id="action-button" class="mouse-over-pointer linkbutton">Delete this stakeholder</A> <DIV id="confirmation" class="confirmation-dialog title=Confirmation"> Are you sure you want to delete this stakeholder? </DIV> </LI></UL></DIV></TD></TR></TBODY></TABLE> The JQuery for this is ... $(document).ready(function() { $('#confirmation').dialog({ bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false, draggable: true, position: 'center', resizable: false, width: 400, height: 150 }); }); And the dialog is 'open'ed by var confirmationBox = $('#confirmation',actionContent); if (confirmationBox.length > 0) { //Confirmation Needed $(confirmationBox).dialog('option', 'buttons', { 'No': function() { $(this).dialog('close'); }, 'Yes': function() { $('ul.read-mode').hide(); $.post(requestUrl, {}, ActionCallback(context[0], renderFormUrl), 'json'); $(this).dialog('close'); } }); $(confirmationBox).dialog('open'); } The problem starts in the initialization itself. When the document loads, the <div #confirmation> is deleted from the markup! I had a similar issue earlier, but I cannot use that solution here. On this page I can have multiple PopUp divs. When I added the initialization in just before opening it; the form popped up. But after I close it, the div is removed; so I am not able to see the popup again.

    Read the article

  • Google maps API : V2 : Custom infowindow with bindInfoWindowHtml

    - by PlanetUnknown
    The API documentation gave me hopes last night with "bindInfoWindowHtml". But it doesn't seem to replace the default infoWindow, even when you provide your own class etc. I have tried using other ideas like the labeledmarker. But it doesn't support draggable markers. Hence can't use it in my application. Here is the sample code which shows the info. window inside, the original bubble. Isn't there a way to override that window as well ! ` <style type="text/css"> .infoWindowCustomClass { width: 500px; height: 500px; background-color: #CAEE96; color: #666; } </style> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key="" type="text/javascript"></script> <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { // Create our "tiny" marker icon var blueIcon = new GIcon(G_DEFAULT_ICON); blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"; // Set up our GMarkerOptions object markerOptions = { icon:blueIcon }; var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(33.968064,-83.377047), 13); markerOptions.title = "fart"; var point = new GLatLng(33.968064,-83.377047); var marker = new GMarker(point); var tempName = document.getElementById("infoWindowCustom"); marker.bindInfoWindowHtml(tempName); map.addOverlay(marker); } } </script>` And here is the DIV - <DIV id="infoWindowCustom" name="infoWindowCustom" class="infoWindowCustomClass"> Name : <TEXTAREA NAME="nameID" ID="nameID" ROWS="2" COLS="25"></TEXTAREA> Comments : <TEXTAREA NAME="commentsID" ID="commentsID" ROWS="4" COLS="25"></TEXTAREA> </DIV>

    Read the article

  • Very simple jquery ui drag and drop does not work. Why not?

    - by Catfish
    WHy doesn't this work? <!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> <style type="text/css"> #content { background:#CCCCCC; width:500px; height:500px; } #drop { height:200px; width:200px; background:#00FFFF; float:right; } #drag { background:#009966; width:100px; height:100px; float:left; } .active { background:#FFCC33; } </style> <script type="text/ecmascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#drag').draggable({ containment: '#content', scrollSensitivity: 60, revert: true, cursor: 'move' }); $('#drop').droppable({ accept: '#drag', drop: function(event, ui) { $(this).addClass('.active'); } }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="content"> <div id="drag"> </div> <div id="drop"> </div> </div> </body> </html>

    Read the article

  • how to drag a 'div' element to the google maps ,that be changed to a 'marker'..use jquery

    - by zjm1126
    this is my code : <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> </style> <div id="map_canvas" style="width: 500px; height: 300px;float:left;"></div> <div id=b style="width: 50px; height: 50px;background:red;float:left;margin-left:300px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> //********** function initialize() { if (GBrowserIsCompatible()) { // function createMarker(point, number) { var marker = new GMarker(point); var message = ["?","?","?","??","??"]; marker.value = number; GEvent.addListener(marker, "click", function() { var myHtml = "<b>#" + number + "</b><br/>" + message[number -1]; map.openInfoWindowHtml(point, myHtml); }); return marker; } // var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(39.9493, 116.3975), 13); // Add 5 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 5; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(createMarker(point, i + 1)); } } } //************* $("#b").draggable(); </script> </body> </html>

    Read the article

  • Resize AIR app window while dragging

    - by matt lohkamp
    So I've noticed Windows 7 has a disturbing tendency to prevent you from dragging the title bar of windows off the top of the screen. If you try - in this case, using an air app with a draggable area at the bottom of the window, allowing you to push the top of the window up past the screen - it just kicks the window back down far enough that the title bar is at the top of what it considers the 'visible area.' One solution would be to resize the app window as it moves, so that the title bar is always where windows wants it. How would you resize the window while you're dragging it, though? Would you do it like this? dragHitArea.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void{ stage.nativeWindow.height += 50; stage.nativeWindow.startMove(); stage.nativeWindow.height -= 50; }); see what's going on there? When I click, I'm doing startMove(), which is hooking into the OS' function for dragging a window around. I'm also increasing and decreasing the height of the window by 50 pixels - which should give me no net increase, right? Wrong - the first '.height +=' gets executed, but the '.height -=' after the .startMove() never runs. Why? update - If you're curious, I'm programming an air widget with fly-out menus which expand rightwards and upwards - and since those element can only be displayed within the boundaries of the application window itself (even though the window is set to be chromeless and transparent) I have to expand the application's borders to include the area that the menu 'pops up' into. In the extreme case, with the widget positioned bottom left, and the menus expanded completely across to the right side and top edge of the screen, the application area could very well cover the entire desktop. The problem is, when it's expanded like this, if the user drags it up and to the right, it causes the 'title bar' area of the application window to move above the top edge of the desktop area, where it would normally be unreachable; and Windows automatically re-positions the window back below that edge once the .startMove() operation is completed. So what I want to do is continually resize the height of the application so that the visual effect will be the same for the user, but for the benefit of the operating system the window's title bar will never be above that top boundary of the desktop area.

    Read the article

  • Converting a list into a select with jquery

    - by Davemof
    I'm trying to convert the following list into a select list so it can be submitted via a form - the element within the lists will become the value of each option: <ul class="selected connected-list ui-sortable" style="height: 279px;"> <li class="ui-helper-hidden-accessible" style=""></li> <li title="Owner Name 1 - " class="ui-state-default ui-element ui-draggable" style="display: block; position: relative; top: 0px; left: 0px;"><span class="ui-icon-arrowthick-2-n-s ui-icon"></span>Owner Name 1 - <em class="thenumber">4.4796E+11</em><a class="action" href="#"><span class="ui-corner-all ui-icon ui-icon-minus"></span></a></li> <li title="David Moffat - " class="ui-state-default ui-element" style="display: block; position: relative; top: 0px; left: 0px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>David Moffat - <em class="thenumber">07730423005</em><a class="action" href="#"><span class="ui-corner-all ui-icon ui-icon-minus"></span></a></li> </ul> This should convert to the following format: <select style="display:none" class="selectoption" name="p_num[]" multiple="multiple"> <option value="">4.4796E+11</option> <option value="">07730423007</option> </select> I have tried the following jquery code, but after many hours I'm pulling my hair out: $('a.sendform').click(function(){ $('ul.selected').each(function() { var $select = $('<select />'); $(this).find('li').each(function() { var $option = $('<option />'); $option.attr('value', $(this).('em')).html($(this).html()); $select.append($option); }); $(this).replaceWith($select); }); }); Any help might save my remaining hair. Many thanks David

    Read the article

  • jQuery: load refuses to get dynamic content in IE6

    - by user260157
    jQuery refuses to load my dynamic content in IE6. All in FireFox & Safari works fine. Only IE6 is being a pain. When I try the a html with <p>Hello World</p> that works. Properly. But when loading a PHP it doesn't work! As you can see it's doing multiple things. <script type="text/javascript"> // When the document is ready set up our sortable with it's inherant function(s) $(document).ready(function() { // Sort list & amend in database function sortTableMenuAndReload() { var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); $("#menuList").load("PLUGINS/SortableMenu/sortableMenu_ajax.php"); } function sortTableOrder() { var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); } function sortTableOrderAndRemove(removeID) { $('#listItem_'+removeID).remove(); var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); $("#menuList").load("PLUGINS/SortableMenu/sortableMenu_ajax.php"); } $("#menuList > li > .remove").live('click', function () { var removeID = $(this).attr('id'); $.ajax({ type: 'post', url: 'PLUGINS/SortableMenu/removeLine.php', data: 'id='+removeID, success: sortTableOrderAndRemove(removeID) }); }); $("#menuList > li > .publish").live('click', function () { var publishID = $(this).attr('id'); $.ajax({ type: 'post', url: 'PLUGINS/SortableMenu/publishLine.php', data: 'id='+publishID, success: sortTableOrder }); }); $('#new_documents > li').draggable({ addClasses: false, helper:'clone', connectToSortable:'#menuList' }); $("#menuList").droppable({ addClasses: false, drop: function() { var clone = $("#menuList > li#newArticleTYPE1"); $(clone).attr("id","listItem_newArticleTYPE1"); } }); $("#menuList").sortable({ opacity: 0.6, handle : '.handle, .remove', update : sortTableMenuAndReload }); }); </script>

    Read the article

  • Calling back a functions value

    - by Jason Kelly
    I need your help, I cannot, for the life of me, figure this out. I've had my head wrapped around it only to no avail. Ideally, i'd like to setup two functions. 1 function: select_date() to interact with the user to select a date from the jQuery Date picker. If the dialog is closed then return as null. Then a second function: test() to check wether or not a date was picked/selected.' Here's my delema, when the function test() is executed, an alert box pops up and says "undefined" which means, I never get to select a date and it always being "undefined" I dont see what I am doing wrong here and everything seems logical to me. <!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script> <script type="text/javascript"> function select_date() { var sdate $('#dd').dialog({ autoOpen: true, modal: true, overlay: { opacity: 0.5, background: 'black' }, title: "title", height: 265, width: 235, draggable: false, resizable: false }); $('#d1').datepicker({ onSelect: function () { $("#dd").dialog("close"); } }); return sdate } function test() { var x = select_date() alert(x) } </script> <style type="text/css"> #d1 {font-size:64%;} </style> </head> <body> <div id="dd"> <div id="d1"> </div> </div> <a href="javascript:test()">test</a> </body> </html>

    Read the article

  • Google Map + MarkerClusterer only takes place when map completely zooms out

    - by user415795
    The clustering works but somehow it only takes place at the maximum zoom out(the largest view with all nations), the moment I zoom in by 1 value, the clustering icon changes back to markers. I try with all kinds of values on the maxZoom and gridSize clusterer options with no help. Can someone please kindly advice. Thanks. <script language="javascript" type="text/javascript"> var markersArray = []; var mc = null; var markersArray = []; var mc = null; var map; var mapOptions; var geocoder; var infoWindow; var http_request = false; var lat = 0; var lng = 0; var startingZoom = 7; var lowestZoom = 1; // The lower the number, the more places can be seen on within the bounds. var highestZoom = 8; function mapLoad() { geocoder = new google.maps.Geocoder(); infoWindow = new google.maps.InfoWindow(); mapOptions = { zoomControl: true, zoom: 2, minZoom: lowestZoom, maxzoom: highestZoom, draggable: true, scrollwheel: true, disableDoubleClickZoom: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), mapOptions); } $(document).ready(function () { var searchUrl; var locations; // Place the user's current location marker on the map var Location = new google.maps.LatLng(1.340319, 103.743744); var Location2 = new google.maps.LatLng(1.322347, 103.757881); createMarker('1', Location, 'My Location', '', '', '', '/Images/home.png'); createMarker('1', Location2, 'My Location', '', '', '', '/Images/bb.png'); var bounds = new google.maps.LatLngBounds(); bounds.extend(gameLocation); map.fitBounds(bounds); }); // Create the marker with address information function createMarker(actId, point, address1, address2, town, postcode, icon) { var marker = new google.maps.Marker({ map: map, icon: icon, position: point, title: address1, animation: google.maps.Animation.DROP }); marker.metadata = { id: actId }; markersArray.push(marker); mc = new MarkerClusterer(map, markersArray); return marker; } </script>

    Read the article

  • Google Map lng + lat to hidden field not working

    - by user547794
    Hello, I am trying to get Marker data into hidden fields on my form. I'm not sure why this isn't working, it must be something in my js syntax: var initialLocation; var siberia = new google.maps.LatLng(60, 105); var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); var browserSupportFlag = new Boolean(); function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); myListener = google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng), google.maps.event.removeListener(myListener); }); // Try W3C Geolocation (Preferred) if(navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(initialLocation); }, function() { handleNoGeolocation(browserSupportFlag); }); // Try Google Gears Geolocation } else if (google.gears) { browserSupportFlag = true; var geo = google.gears.factory.create('beta.geolocation'); geo.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.latitude,position.longitude); map.setCenter(initialLocation); }, function() { handleNoGeoLocation(browserSupportFlag); }); // Browser doesn't support Geolocation } else { browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); } function handleNoGeolocation(errorFlag) { if (errorFlag == true) { alert("Geolocation service failed."); initialLocation = newyork; } else { alert("Your browser doesn't support geolocation. We've placed you in Siberia."); initialLocation = siberia; } } function placeMarker(location) { var marker = new google.maps.Marker({ position: location, map: map, draggable: true }); map.setCenter(location); } } var lat = latlng.lat(); var lng = latlng.lng(); document.getElementById("t1").value=lat; document.getElementById("t2").value=lng; <input type="hidden" name="lat" id="t1"> <input type="hidden" name="long" id="t2">

    Read the article

  • Run javascript after form submission in update panel?

    - by AverageJoe719
    This is driving me crazy! I have read at least 5 questions on here closely related to my problem, and probably 5 or so more pages just from googling. I just don't get it. I am trying to have a jqueryui dialog come up after a user fills out a form saying 'registration submitted' and then redirecting to another page, but I cannot for the life of me get any javascript to work, not even a single alert. Here is my update panel: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="upForm" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False"> <ContentTemplate> 'Rest of form' <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> <p>Did register Pass? <%= registrationComplete %></p> </ContentTemplate> </asp:UpdatePanel> The Jquery I want to execute: (Right now this is sitting in the head of the markup, with autoOpen set to false) <script type="text/javascript"> function pageLoad() { $('#registerComplete').dialog({ autoOpen: true, width: 270, resizable: false, modal: true, draggable: false, buttons: { "Ok": function() { window.location.href = "someUrl"; } } }); } </script> Finally my code behind: ( Commented out all the things I've tried) Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnSubmit.Click 'Dim sbScript As New StringBuilder()' registrationComplete = True registrationUpdatePanel.Update() 'sbScript.Append("<script language='JavaScript' type='text/javascript'>" + ControlChars.Lf)' 'sbScript.Append("<!--" + ControlChars.Lf)' 'sbScript.Append("window.location.reload()" + ControlChars.Lf)' 'sbScript.Append("// -->" + ControlChars.Lf)' 'sbScript.Append("</")' 'sbScript.Append("script>" + ControlChars.Lf)' 'ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType(), "AutoPostBack", sbScript.ToString(), False)' 'ClientScript.RegisterStartupScript("AutoPostBackScript", sbScript.ToString())' 'Response.Write("<script type='text/javascript'>alert('Test')</script>")' 'Response.Write("<script>windows.location.reload()</script>")' End Sub I've tried: Passing variables from server to client via inline <%= % in the javascript block of the head tag. Putting that same code in a script tag inside the updatePanel. Tried to use RegisterClientScriptBlock and RegisterStartUpScript Just doing a Response.Write with the script tag written in it. Tried various combinations of putting the entire jquery.dialog code in the registerstartup script, or just trying to change the autoOpen property, or just calling "open" on it. I can't even get a simple alert to work with any of these, so I am doing something wrong but I just don't know what it is. Here is what I know: The Jquery is binding properly even on async postbacks, because the div container that is the dialog box is always invisible, I saw a similiar post on here stating that was causing an issue, this isn't the case here. Using page_load instead of document.ready since that is supposed to run on both async and normal postbacks, so that isn't the issue. The update panel is updating correctly because <p>Did register Pass? <%= registrationComplete %></p> updates to true after I submit the form. So how can I make this work? All I want is - click submit button inside an update panel - run server side code to validate form and insert into db - if everything succeeded, have that jquery (modal) dialog pop up saying hey it worked.

    Read the article

  • Android: Get the X and Y coordinates of a TextView?

    - by Jep Knopz
    I am working now on a project. I have 2 draggable textView in a circle. I want to add those value inside the circle when the circle is drag over the other circle. the first option that I have is to get the X and Y of the circle, but I get it. Can anyone fix my code? Here is the Code: MainActivity public class MainActivity extends Activity { int windowwidth; int windowheight; TextView bola; TextView bola2; private float x; private float y; private android.widget.RelativeLayout.LayoutParams layoutParams; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); windowwidth = getWindowManager().getDefaultDisplay().getWidth(); windowheight = getWindowManager().getDefaultDisplay().getHeight(); bola = (TextView) findViewById(R.id.ball); bola2 = (TextView) findViewById(R.id.ball2); bola2.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { // TODO Auto-generated method stub layoutParams = (RelativeLayout.LayoutParams) bola2 .getLayoutParams(); switch (event.getActionMasked()) { case MotionEvent.ACTION_DOWN: break; case MotionEvent.ACTION_MOVE: int x_cord = (int) event.getRawX(); int y_cord = (int) event.getRawY(); if (x_cord > windowwidth) { x_cord = windowwidth; } if (y_cord > windowheight) { y_cord = windowheight; } layoutParams.leftMargin = x_cord - 25; layoutParams.topMargin = y_cord - 75; bola2.setLayoutParams(layoutParams); break; default: break; } return true; } }); bola.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { layoutParams = (RelativeLayout.LayoutParams) bola .getLayoutParams(); switch (event.getActionMasked()) { case MotionEvent.ACTION_DOWN: break; case MotionEvent.ACTION_MOVE: int x_cord = (int) event.getRawX(); int y_cord = (int) event.getRawY(); if (x_cord > windowwidth) { x_cord = windowwidth; } if (y_cord > windowheight) { y_cord = windowheight; } layoutParams.leftMargin = x_cord - 25; layoutParams.topMargin = y_cord - 75; bola.setLayoutParams(layoutParams); break; default: break; } // TODO Auto-generated method stub return true; } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; }} Activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id= "@+id/ball" android:background="@drawable/bgshape" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" tools:context=".MainActivity" /> <TextView android:id= "@+id/ball2" android:background="@drawable/bgshape" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2" tools:context=".MainActivity" android:layout_x="60dp" android:layout_y="20dp" /> The bgshape.xml(for the circle) <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <padding android:bottom="20dp" android:left="25dp" android:right="25dp" android:top="20dp" /> <stroke android:width="2dp" android:color="#000000" /> <solid android:color="#ffffff" /> <corners android:bottomLeftRadius="30dp" android:bottomRightRadius="30dp" android:topLeftRadius="30dp" android:topRightRadius="30dp" /> This code works well. Could anyone fix this so that I can add the value inside the circle when they hit each other?

    Read the article

  • Is JQuery UI meant to work only with Google Chrome??? (How about IE and Firefox??!)

    - by Richard77
    Hello, I'm using "Jquery UI 1./Dan Wellman/Packt Publishing" to learn JQuery UI. I'm working on the 'Dialog widget' chapiter. After I've completed a series of exercises in order to build a Dialog widget (using Google Chrome), I then tried my work with Internet Explorer and Firefox. The result has been disappointing. Chrome was perfet With Internet Explorer, (1) the title of the Dialog widget did not appear, (2) The location of the dialog widget was not correct (given the position: ["center", "center"]). It was rather offset toward left. With Firefox, the location was respected. However, only the outer container was visible. the content was missing, just a blank container. Also using Option Show:true and Hide:true did only work with Chrome. I wonder now if JQuery UI was meant to be used only with Google Chrome. I just think that I might be missing some directives to make it work with major browsers (as the author claimed in his book). Here's the code. Since, I'm using ASP.NET MVC, certain codes, such as the element to the css, do not appear. But, for the rest, all the functioning code is bellow. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <p> The goal of this tutorial is to explain one method of creating model classes for an ASP.NET MVC application. In this tutorial, you learn how to build model classes and perform database access by taking advantage of Microsoft LINQ to SQL. In this tutorial, we build a basic Movie database application. We start by creating the Movie database application in the fastest and easiest way possible. We perform all of our data access directly from our controller actions. </p> <div style = "font-size:.7em" id = "myDialog" title = "This is the title"> In this tutorial -- in order to illustrate how you can build model classes -- we build a simple Movie database application. The first step is to create a new database. Right-click the App_Data folder in the Solution Explorer window and select the menu option Add, New Item. Select the SQL Server Database template, give it the name MoviesDB.mdf, and click the Add button (see Figure 1). </div> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server"> <script src="../../Content/development-bundle/jquery-1.3.2.js" type="text/javascript"></script> <script src="../../Content/development-bundle/ui/ui.core.js" type="text/javascript"></script> <script src="../../Content/development-bundle/ui/ui.dialog.js" type="text/javascript"></script> <script src="../../Content/development-bundle/ui/ui.draggable.js" type="text/javascript"></script> <script src="../../Content/development-bundle/ui/ui.resizable.js" type="text/javascript"></script> <script src="../../Content/development-bundle/external/bgiframe/jquery.bgiframe.js" type="text/javascript"></script> <script type = "text/javascript"> $(function() { var execute = function() { } var cancel = function() { } var dialogOpts = { position: ["center", "center"], title: '<a href="/Home/About">A link title!<a>', modal: true, minWidth: 500, minHeight: 500, buttons: { "OK": execute, "Cancel": cancel }, show:true, hide: true, bgiframe:true }; $("#myDialog").dialog(dialogOpts); }); </script> Thank for helping.

    Read the article

  • Qt - reloading widget contents

    - by bullettime
    I'm trying to modify the fridge magnets example by adding a button that will reload the widget where the draggable labels are drawn, reflecting any changes made to the text file it reads. I defined another class that would contain the button and the DragWidget object, so there would be an instance of this class instead of DragWidget in main(): class wrapWidget: public QWidget { public: wrapWidget(); }; wrapWidget::wrapWidget() { QGridLayout *gridlayout = new QGridLayout(); DragWidget *w = new DragWidget(); QPushButton *b = new QPushButton("refresh"); gridlayout ->addWidget(w,0,0); gridlayout ->addWidget(b,1,0); setLayout(gridlayout ); connect(b,SIGNAL(clicked()),w,SLOT(draw())); } The call to connect is where I'm trying to do the refresh thing. In the original fridge magnets example, all the label drawing code was inside the constructor of the DragWidget class. I moved that code to a public method that I named 'draw()', and called this method from the constructor instead. Here's DragWidget definition and implementation: #include <QWidget> QT_BEGIN_NAMESPACE class QDragEnterEvent; class QDropEvent; QT_END_NAMESPACE class DragWidget : public QWidget { public: DragWidget(QWidget *parent = 0); public slots: void draw(); protected: void dragEnterEvent(QDragEnterEvent *event); void dragMoveEvent(QDragMoveEvent *event); void dropEvent(QDropEvent *event); void mousePressEvent(QMouseEvent *event); void paintEvent(QPaintEvent *event); }; DragWidget::DragWidget(QWidget *parent) : QWidget(parent) { draw(); QPalette newPalette = palette(); newPalette.setColor(QPalette::Window, Qt::white); setPalette(newPalette); setMinimumSize(400, 100);//qMax(200, y)); setWindowTitle(tr("Fridge Magnets")); setAcceptDrops(true); } void DragWidget::draw(){ QFile dictionaryFile(":/dictionary/words.txt"); dictionaryFile.open(QFile::ReadOnly); QTextStream inputStream(&dictionaryFile); int x = 5; int y = 5; while (!inputStream.atEnd()) { QString word; inputStream >> word; if (!word.isEmpty()) { DragLabel *wordLabel = new DragLabel(word, this); wordLabel->move(x, y); wordLabel->show(); wordLabel->setAttribute(Qt::WA_DeleteOnClose); x += wordLabel->width() + 2; if (x >= 245) { x = 5; y += wordLabel->height() + 2; } } } } I thought that maybe calling draw() as a slot would be enough to reload the labels, but it didn't work. Putting the draw() call inside the widget's overriden paintEvent() instead of the constructor didn't work out as well, the program would end up in an infinite loop. What I did was obviously not the right way of doing it, so what should I be doing instead?

    Read the article

  • Google Maps API v3: Turning user input coordinates to latlng?

    - by Leventhan
    I'm new with Google Maps. I'm trying to turn coordinates a user inputs to move a marker I have on my map to those coordinates. For instance, if the user inputs 50.75, 74.1 the marker will pan to that coordinate. Unfortunately, I couldn't get it to work. Here's my function: function moveMarker() { var Markerloc = document.getElementById("Markerloc").value; var newLatlng = new google.maps.LatLng(Markerloc); marker.setPosition(newLatLng) } Here's my HTML code: <input type="text" id= "Markerloc" value="Paste your coordinates" /> <input type="button" onclick="moveMarker()" value="Update Marker"> EDIT: I thought that'd fix it, but somehow, it still doesn't work. Here's my code: <script type="text/javascript"> var map; var zoomLevel; function initialize(){ var myLatlng = new google.maps.LatLng(40.65, -74); var myOptions = { zoom: 2, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, } var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var zoomLevel = map.getZoom(); var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true }); // Update current position info. updateMarkerPosition(myLatlng); // Add dragging event listeners. google.maps.event.addListener(marker, 'dragstart', function() { updateMarkerAddress('Dragging...'); }); google.maps.event.addListener (map, 'zoom_changed', function() { updateZoomLevel(map.getZoom()); }); google.maps.event.addListener(marker, 'drag', function() { updateMarkerStatus('Dragging...'); updateMarkerPosition(marker.getPosition()); }); google.maps.event.addListener(marker, 'dragend', function() { updateMarkerStatus('Drag ended'); geocodePosition(marker.getPosition()); }); }; var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } function updateZoomLevel(zoomLevel){ document.getElementById('zoomLevel').innerHTML = zoomLevel; } function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(myLatlng) { document.getElementById('info').innerHTML = [ myLatlng.lat(), myLatlng.lng() ].join(', '); } function updateMarkerAddress(str) { document.getElementById('address').innerHTML = str; } function moveMarker() { var lat = parseFloat(document.getElementById('markerLat').value); var lng = parseFloat(document.getElementById('markerLng').value); var newLatLng = new google.maps.LatLng(lat, lng); marker.setPosition(newLatLng) } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map_canvas" style="width: 29%; height: 50%; float: left; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div> <b>Zoom level: </b><div id="zoomLevel"> Scroll mousewheel</div> </div> <input type='text' id='markerLat' value='Target Latitude' /> <input type='text' id='markerLng' value='Target Longitude' /> <input type="button" onclick="moveMarker()" value="Move Marker"> </body> </html>

    Read the article

  • jQuery hold form submit until "continue" button pressed

    - by Seán McCabe
    I am trying to submit a form, which I have had working, but have now modified it to include a modal jQuery UI box, so that it won't submit until the user presses "continue". I've had various problems with this, including getting the form to hold until that button is pressed, but I think I have found a solution to that, but implementing it, I am getting a SyntaxError which I can't find the source of. With the help of kevin B managed to find the answer was the form was submitting, but the returned JSON response wasn't quite formatted right. The response was that the form wasn't being submitted, so that problem is still occurring. So updated the code with the provided feedback, now need to find out why the form isnt submitting. I know its something to do with the 2nd function isnt recognising the submit button has been pressed, so need to know how to submit that form data without the form needing to be submitted again. Below is the new code: function submitData() { $("#submitProvData").submit(function(event) { event.preventDefault(); var gTotal, sTotal, dfd; var dfd = new $.Deferred(); $('html,body').animate({ scrollTop: 0 }, 'fast'); $("#submitProvData input").css("border", "1px solid #aaaaaa"); $("#submitProvData input[readonly='readonly']").css("border", "none"); sTotal = $('#summaryTotal').val(); gTotal = $('#gptotal').val(); if(gTotal !== 'sTotal'){ $("#newsupinvbox").append('<div id="newsupinvdiagbox" title="Warning - Totals do not match" class="hidden"><p>Press "Continue", to submit the invoice flagged for attention.</p> <br /><p class="italic">or</p><br /> <p>Press "Correct" to correct the discrepancy.</p></div>') //CREATE DIV //SET $("#newsupinvdiagbox").dialog({ resizable: false, autoOpen:false, modal: true, draggable: false, width:380, height:240, closeOnEscape: false, position: ['center',20], buttons: { 'Continue': function() { $(this).dialog('close'); reData(); }, // end continue button 'Correct': function() { $(this).dialog('close'); return false; } //end cancel button }//end buttons });//end dialog $('#newsupinvdiagbox').dialog('open'); } return false; }); } function reData() { console.log('submitted'); $("#submitProvData").submit(function(resubmit){ console.log('form submit'); var formData; formData = new FormData($(this)[0]); $.ajax({ type: "POST", url: "functions/invoicing_upload_provider.php", data: formData, async: false, success: function(result) { $.each($.parseJSON(result), function(item, value){ if(item == 'Success'){ $('#newsupinv_window_message_success_mes').html('The provider invoice was uploaded successfully.'); $('#newsupinv_window_message_success').fadeIn(300, function (){ reset(); }).delay(2500).fadeOut(700); } else if(item == 'Error'){ $('#newsupinv_window_message_error_mes').html(value); $('#newsupinv_window_message_error').fadeIn(300).delay(3000).fadeOut(700); } else if(item == 'Warning'){ $('#newsupinv_window_message_warning_mes').html(value); $('#newsupinv_window_message_warning').fadeIn(300, function (){ reset(); }).delay(2500).fadeOut(700); } }); }, error: function() { $('#newsupinv_window_message_error_mes').html("An error occured, the form was not submitted"); $('#newsupinv_window_message_error').fadeIn(300); $('#newsupinv_window_message_error').delay(3000).fadeOut(700); }, cache: false, contentType: false, processData: false }); }); }

    Read the article

  • MVC Datatables Dialog Not staying where dialog opens

    - by Anthoney Hanks
    I have created a view that displays a datatable with a clickable link that opens a jQuery UI dialog box. The users wanted a search options (8 dropdowns to narrow the search) at top of page, followed by the datatable with the 100 viewable records. If I scroll down the datatable to the bottom viewable record, click the link to open the dialog box. The dialog opens relative to the link clicked, but the focus go back to the top of the page which causes the user to have scroll back down to the dialog box. Ok, I thought I would just set the focus to the dialog box. BUt it is being ignored which make me think that this is something within the MVC realm. I even tried to wrap the focus inside a ready function thinking it would be one of the last things process. When I define the dailog, it is pretty basic. I even tried to set the position attribute, but it did not change the problem. Has someone had this problem and can send me in the right direction? View building the datatable: <table id="navDatatables"> <tbody> @foreach (var detailsVM in Model.DetailsVMs) { <tr> <td class="standardTable"> <a href="#" onclick="return PVE_UseConfig.Options(@detailsVM.ConfigVersionId, @Model.UseConfigModeId);" class="smallLink">Options</a> </td> <td class="standardTable"> <a href="@Url.Content(@detailsVM.ViewerUrl)" target="_blank">@detailsVM.ConfigName</a> </td> <td class="standardTable">@detailsVM.ConfigType</td> <td class="standardTable">@detailsVM.ConfigVersionState</td> <td class="standardTable">@detailsVM.Organization</td> <td class="standardTable">@detailsVM.ProcessSet</td> <td class="standardTable">@detailsVM.ConfigVersionCaption</td> <td class="standardTable">@detailsVM.ConfigId</td> <td class="standardTable">@detailsVM.ConfigVersionId</td> <td class="standardTable">@detailsVM.ConfigOwnerName</td> <td class="standardTable">@detailsVM.ConfigVersionLastModified</td> </tr> } </tbody> </table> Dialog box code: Options: function (configVersionId, useConfigModeId) { var output = '#modalDialog1'; var postData = { configVersionId: configVersionId, useConfigModeId: useConfigModeId }; $('#modalDialog1').dialog("destroy"); $.ajax({ url: PVE_RootUrl + 'UseConfig/Options', type: 'POST', async: false, data: postData, success: function (result) { $(output).html(result); }, error: function (jqXHR, textStatus, errorThrown) { var text = jqXHR.responseText; var from = text.search("<body>") + 6; var to = text.search("</body>") - 7; $(output).html(text.substring(from, to)); } }); $(output).dialog({ title: "Configuration Options", modal: true, height: 550, width: 600, resizable: false, draggable: false }); },

    Read the article

  • No Method Error in Ruby

    - by JayG
    Hi, I currently have a Rails Apps that lets users drag and drop certain elements of the webpage and updates the application based on the users choice. This is done with the help of the Rails helpers and AJAX. However I keep running into a "NoMethodError" in Ruby. NoMethodError in ProjectsController#member_change undefined method `symbolize_keys' for nil:NilClass Here is the method that is being called. My trace says that error is occurring in this line: before = u.functions_for(r.authorizable_id) u.roles << r unless u.roles.include? r u.save flag_changed = true after = u.functions_for(r.authorizable_id) And here is the function being called def member_change flag_changed = false params['u'] =~ /role_(\d+)_user_(\d+)/ drag_role_id = $1 user_id = $2 params['r'] =~ /role_(\d+)/ drop_role_id = $1 if u=User.find(user_id) if r=Role.find(drop_role_id) if drag_role_id.to_i !=0 and old_r=Role.find(drag_role_id) if drag_role_id == drop_role_id #fom A to A => nothing happen flash.now[:warning] = _('No Operation...') elsif r.authorizable_id == old_r.authorizable_id #the same project? old_r.users.delete(u) unless old_r.valid? flash.now[:warning] = _('Group "Admin" CAN NOT be EMPTY.') old_r.users << u #TODO: better recovery member_edit #if flag_changed render :action => :member_edit, :layout => 'module_with_flash' return end old_r.save r.users << u unless r.users.include? u r.save flag_changed = true before = u.functions_for(r.authorizable_id) after = u.functions_for(r.authorizable_id) added = after - before removed = before - after added.each do |f| ApplicationController::send_msg(:function,:create, {:function_name => f.name, :user_id => u.id, :project_id => r.authorizable_id }) end removed.each do |f| ApplicationController::send_msg(:function,:delete, {:function_name => f.name, :user_id => u.id, :project_id => r.authorizable_id }) end flash.now[:notice] = _( 'Move User to Group' ) + " #{ r.name }" else flash.now[:warning] = _('You can\'t move User between Groups that belong to different Projects.') end else before = u.functions_for(r.authorizable_id) u.roles << r unless u.roles.include? r u.save flag_changed = true after = u.functions_for(r.authorizable_id) added = after - before added.each do |f| ApplicationController::send_msg(:function,:create, {:function_name => f.name, :user_id => u.id, :project_id => r.authorizable_id }) end flash.now[:notice] = _( 'Add User into Group' ) + " #{ r.name }" end else flash.now[:warn] = _( 'Group doesn\'t exist!' ) + ": #{ r.name }" end else flash.now[:warning] = _( 'User doesn\'t exist!' ) + ": #{ u.login }" end member_edit #if flag_changed render :action => :member_edit, :layout => 'module_with_flash' end and the JavaScript used to call the function jQuery('#RemoveThisMember').droppable({accept:'.RolesUsersSelection', drop:function(ev,ui){ if (confirm("This will remove User from this Group, are you sure?")) {jQuery.ajax({data:'u=' + encodeURIComponent(jQuery(ui.draggable).attr('id')), success:function(request){jQuery('#module_content').html(request);}, type:'post', url:'/of/projects/11/member_delete'});} }, hoverClass:'ProjectRoleDropDelete_active'}) Any ideas? Thanks,

    Read the article

  • May 2011 Release of the Ajax Control Toolkit

    - by Stephen Walther
    I’m happy to announce that the Superexpert team has published the May 2011 release of the Ajax Control Toolkit at CodePlex. You can download the new release at the following URL: http://ajaxcontroltoolkit.codeplex.com/releases/view/65800 This release focused on improving the ModalPopup and AsyncFileUpload controls. Our team closed a total of 34 bugs related to the ModalPopup and AsyncFileUpload controls. Enhanced ModalPopup Control You can take advantage of the Ajax Control Toolkit ModalPopup control to easily create popup dialogs in your ASP.NET Web Forms applications. When the dialog appears, you cannot interact with any page content which appears behind the modal dialog. For example, the following page contains a standard ASP.NET Button and Panel. When you click the Button, the Panel appears as a popup dialog: <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Simple.aspx.vb" Inherits="ACTSamples.Simple" %> <%@ Register TagPrefix="act" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Simple Modal Popup Sample</title> <style type="text/css"> html { background-color: blue; } #dialog { border: 2px solid black; width: 500px; background-color: White; } #dialogContents { padding: 10px; } .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } </style> </head> <body> <form id="form1" runat="server"> <div> <act:ToolkitScriptManager ID="tsm" runat="server" /> <asp:Panel ID="dialog" runat="server"> <div id="dialogContents"> Here are the contents of the dialog. <br /> <asp:Button ID="btnOK" Text="OK" runat="server" /> </div> </asp:Panel> <asp:Button ID="btnShow" Text="Open Dialog" runat="server" /> <act:ModalPopupExtender TargetControlID="btnShow" PopupControlID="dialog" OkControlID="btnOK" DropShadow="true" BackgroundCssClass="modalBackground" runat="server" /> </div> </form> </body> </html>     Notice that the page includes two controls from the Ajax Control Toolkit: the ToolkitScriptManager and the ModalPopupExtender control. Any page which uses any of the controls from the Ajax Control Toolkit must include a ToolkitScriptManager. The ModalPopupExtender is used to create the popup. The following properties are set: · TargetControlID – This is the ID of the Button or LinkButton control which causes the modal popup to be displayed. · PopupControlID – This is the ID of the Panel control which contains the content displayed in the modal popup. · OKControlID – This is the ID of a Button or LinkButton which causes the modal popup to close. · DropShadow – Displays a drop shadow behind the modal popup. · BackgroundCSSClass – The name of a Cascading Style Sheet class which is used to gray out the background of the page when the modal popup is displayed. The ModalPopup is completely cross-browser compatible. For example, the following screenshots show the same page displayed in Firefox 4, Internet Explorer 9, and Chrome 11: The ModalPopup control has lots of nice properties. For example, you can make the ModalPopup draggable. You also can programmatically hide and show a modal popup from either server-side or client-side code. To learn more about the properties of the ModalPopup control, see the following website: http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx Animated ModalPopup Control In the May 2011 release of the Ajax Control Toolkit, we enhanced the Modal Popup control so that it supports animations. We made this modification in response to a feature request posted at CodePlex which got 65 votes (plenty of people wanted this feature): http://ajaxcontroltoolkit.codeplex.com/workitem/6944 I want to thank Dani Kenan for posting a patch to this issue which we used as the basis for adding animation support for the modal popup. Thanks Dani! The enhanced ModalPopup in the May 2011 release of the Ajax Control Toolkit supports the following animations: OnShowing – Called before the modal popup is shown. OnShown – Called after the modal popup is shown. OnHiding – Called before the modal popup is hidden. OnHidden – Called after the modal popup is hidden. You can use these animations, for example, to fade-in a modal popup when it is displayed and fade-out the popup when it is hidden. Here’s the code: <act:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="btnShow" PopupControlID="dialog" OkControlID="btnOK" DropShadow="true" BackgroundCssClass="modalBackground" runat="server"> <Animations> <OnShown> <Fadein /> </OnShown> <OnHiding> <Fadeout /> </OnHiding> </Animations> </act:ModalPopupExtender>     So that you can experience the full joy of this animated modal popup, I recorded the following video: Of course, you can use any of the animations supported by the Ajax Control Toolkit with the modal popup. The animation reference is located here: http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Walkthrough/AnimationReference.aspx Fixes to the AsyncFileUpload In the May 2011 release, we also focused our energies on performing bug fixes for the AsyncFileUpload control. We fixed several major issues with the AsyncFileUpload including: It did not work in master pages It did not work when ClientIDMode=”Static” It did not work with Firefox 4 It did not work when multiple AsyncFileUploads were included in the same page It generated markup which was not HTML5 compatible The AsyncFileUpload control is a super useful control. It enables you to upload files in a form without performing a postback. Here’s some sample code which demonstrates how you can use the AsyncFileUpload: <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Simple.aspx.vb" Inherits="ACTSamples.Simple1" %> <%@ Register TagPrefix="act" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Simple AsyncFileUpload</title> </head> <body> <form id="form1" runat="server"> <div> <act:ToolkitScriptManager ID="tsm" runat="server" /> User Name: <br /> <asp:TextBox ID="txtUserName" runat="server" /> <asp:RequiredFieldValidator EnableClientScript="false" ErrorMessage="Required" ControlToValidate="txtUserName" runat="server" /> <br /><br /> Avatar: <act:AsyncFileUpload ID="async1" ThrobberID="throbber" UploadingBackColor="yellow" ErrorBackColor="red" CompleteBackColor="green" UploaderStyle="Modern" PersistFile="true" runat="server" /> <asp:Image ID="throbber" ImageUrl="uploading.gif" style="display:none" runat="server" /> <br /><br /> <asp:Button ID="btnSubmit" Text="Submit" runat="server" /> </div> </form> </body> </html> And here’s the code-behind for the page above: Public Class Simple1 Inherits System.Web.UI.Page Private Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click If Page.IsValid Then ' Get Form Fields Dim userName As String Dim file As Byte() userName = txtUserName.Text If async1.HasFile Then file = async1.FileBytes End If ' Save userName, file to database ' Redirect to success page Response.Redirect("SimpleDone.aspx") End If End Sub End Class   The form above contains an AsyncFileUpload which has values for the following properties: ThrobberID – The ID of an element in the page to display while a file is being uploaded. UploadingBackColor – The color to display in the upload field while a file is being uploaded. ErrorBackColor – The color to display in the upload field when there is an error uploading a file. CompleteBackColor – The color to display in the upload field when the upload is complete. UploaderStyle – The user interface style: Traditional or Modern. PersistFile – When true, the uploaded file is persisted in Session state. The last property PersistFile, causes the uploaded file to be stored in Session state. That way, if completing a form requires multiple postbacks, then the user needs to upload the file only once. For example, if there is a server validation error, then the user is not required to re-upload the file after fixing the validation issue. In the sample code above, this condition is simulated by disabling client-side validation for the RequiredFieldValidator control. The RequiredFieldValidator EnableClientScript property has the value false. The following video demonstrates how the AsyncFileUpload control works: You can learn more about the properties and methods of the AsyncFileUpload control by visiting the following page: http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx Conclusion In the May 2011 release of the Ajax Control Toolkit, we addressed over 30 bugs related to the ModalPopup and AsyncFileUpload controls. Furthermore, by building on code submitted by the community, we enhanced the ModalPopup control so that it supports animation (Thanks Dani). In our next sprint for the June release of the Ajax Control Toolkit, we plan to focus on the HTML Editor control. Subscribe to this blog to keep updated.

    Read the article

  • Qt - drag and drop with graphics view framework

    - by David Davidson
    I'm trying to make a simple draggable item using the graphics framework. Here's the code for what I did so far: Widget class: class Widget : public QWidget { Q_OBJECT public: Widget(QWidget *parent = 0); ~Widget(); }; Widget::Widget(QWidget *parent) : QWidget(parent) { DragScene *scene = new DragScene(); DragView *view = new DragView(); QHBoxLayout *layout = new QHBoxLayout(); DragItem *item = new DragItem(); view->setAcceptDrops(true); scene->addItem(item); view->setScene(scene); layout->addWidget(view); this->setLayout(layout); } Widget::~Widget() { } DragView class: class DragView : public QGraphicsView { public: DragView(QWidget *parent = 0); }; DragView::DragView(QWidget *parent) : QGraphicsView(parent) { setRenderHints(QPainter::Antialiasing); } DragScene class: class DragScene : public QGraphicsScene { public: DragScene(QObject* parent = 0); protected: void dragEnterEvent(QGraphicsSceneDragDropEvent *event); void dragMoveEvent(QGraphicsSceneDragDropEvent *event); void dragLeaveEvent(QGraphicsSceneDragDropEvent *event); void dropEvent(QGraphicsSceneDragDropEvent *event); }; DragScene::DragScene(QObject* parent) : QGraphicsScene(parent) { } void DragScene::dragEnterEvent(QGraphicsSceneDragDropEvent *event){ } void DragScene::dragMoveEvent(QGraphicsSceneDragDropEvent *event){ } void DragScene::dragLeaveEvent(QGraphicsSceneDragDropEvent *event){ } void DragScene::dropEvent(QGraphicsSceneDragDropEvent *event){ qDebug() << event->pos(); event->acceptProposedAction(); DragItem *item = new DragItem(); this->addItem(item); item->setPos(event->pos()); } DragItem class: class DragItem : public QGraphicsItem { public: DragItem(QGraphicsItem *parent = 0); QRectF boundingRect() const; void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0); protected: void mouseDoubleClickEvent(QGraphicsSceneMouseEvent *event); void mouseMoveEvent(QGraphicsSceneMouseEvent *event); void mousePressEvent(QGraphicsSceneMouseEvent *event); void mouseReleaseEvent(QGraphicsSceneMouseEvent *event); }; DragItem::DragItem(QGraphicsItem *parent) : QGraphicsItem(parent) { setFlag(QGraphicsItem::ItemIsMovable); } QRectF DragItem::boundingRect() const{ const QPointF *p0 = new QPointF(-10,-10); const QPointF *p1 = new QPointF(10,10); return QRectF(*p0,*p1); } void DragItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget){ if(painter == 0) painter = new QPainter(); painter->drawEllipse(QPoint(0,0),10,10); } void DragItem::mouseDoubleClickEvent(QGraphicsSceneMouseEvent *event){ } void DragItem::mouseMoveEvent(QGraphicsSceneMouseEvent *event){ } void DragItem::mousePressEvent(QGraphicsSceneMouseEvent *event){ QMimeData* mime = new QMimeData(); QDrag* drag = new QDrag(event->widget()); drag->setMimeData(mime); drag->exec(); } void DragItem::mouseReleaseEvent(QGraphicsSceneMouseEvent *event){ } main.cpp instantiates a Widget and shows it. When I try to drag the circle, the app just creates another circle over the original one, regardless of where I release the drag. qDebug() in DragScene's dropEvent() shows QPointF(0,0) everytime the drag ends. I'm having a hard time trying to understand exactly what I have to do, which classes I should subclass, which methods needs to be overriden, to make this work. The documentation on this isn't very detailed. I'd like to know how to make this work, and if there's some other, more comprehensive resource to learn about the graphics view framework, besides the official documentation (which is excellent btw, but it would be great if there was a more detailed treatise on the subject). EDIT: Following badgerr's advice, I replaced item-pos() in DragScene::dropEvent() with item-scenePos(), now the drop event creates a new circle in the drop site, which is more or less what I wanted. But the original circle is still in place, and while the drag is in progress, the item doesn't follow the mouse cursor. The QGraphicsSceneDragDropEvent documentation says that pos() should return the cursor position in relation to the view that sent the event, which, unless I got it wrong, shouldn't be (0,0) all the time. Weird. I've read in a forum post that you can use QDrag::setPixMap() to show something during the drag, and in examples I've seen pictures being set as pixmaps, but how do I make the pixmap just like the graphics item I'm supposed to be dragging?

    Read the article

  • How do I drag and drop between two listboxes in XUL?

    - by pc1oad1etter
    I am trying to implement drag and drop between two listboxes. I have a few problems 1) I am not detecting any drag events of any kind from the source list box/ I do not seem to be able to drag from it 2) I can drag from my desktop to the target listbox and I am able to detect 'dragenter' 'dragover' and 'dragexit' events. I am noticing that the event parameter is undefined in my 'dragenter' callback - is this a problem? 3) I cannot figure out how to complete the drag and drop operation. From https://developer.mozilla.org/En/DragDrop/Drag_Operations#Performing_... "If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last dragenter or dragover event, then the drop will be successful, and a drop event will fire at the target. Otherwise, the drag operation is cancelled and no drop event is fired." This seems to be referring to a 'drop' event, though there is not one listed at https://developer.mozilla.org/en/XUL/Events . I can't seem to detect the end of the drag in order to call one of the example 'doDrop()' functions that I find on MDC. My example, so far: http://pastebin.mozilla.org/713676 <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul" onload="initialize();"> <vbox> <hbox> <vbox> <description>List1</description> <listbox id="source" draggable="true"> <listitem label="1"/> <listitem label="3"/> <listitem label="4"/> <listitem label="5"/> </listbox> </vbox> <vbox> <description>List2</description> <listbox id="target" ondragenter="onDragEnter();"> <listitem label="2"/> </listbox> </vbox> </hbox> </vbox> <script type="application/x-javascript"> <![CDATA[ function initialize(){ jsdump('adding events'); var origin = document.getElementById("source"); origin.addEventListener("drag", onDrag, false); origin.addEventListener("dragdrop", onDragDrop, false); origin.addEventListener("dragend", onDragEnd, false); origin.addEventListener("dragstart", onDragStart, false); var target = document.getElementById("target"); target.addEventListener("dragenter", onDragEnter, false); target.addEventListener("dragover", onDragOver, false); target.addEventListener("dragexit", onDragExit, false); target.addEventListener("drop", onDrop, false); target.addEventListener("drag", onDrag, false); target.addEventListener("dragdrop", onDragDrop, false); } function onDrag(){ jsdump('onDrag'); } function onDragDrop(){ jsdump('onDragDrop'); } function onDragStart(){ jsdump('onDragStart'); } function onDragEnd(){ jsdump('onDragEnd'); } function onDragEnter(event){ //debugger; if(event){ jsdump('onDragEnter event.preventDefault()'); event.preventDefault(); }else{ jsdump("event undefined in onDragEnter"); } } function onDragExit(){ jsdump('onDragExit'); } function onDragOver(event){ //debugger; if(event){ //jsdump('onDragOver event.preventDefault()'); event.preventDefault(); }else{ jsdump("event undefined in onDragOver"); } } function onDrop(event){ jsdump('onDrop'); var data = event.dataTransfer.getData("text/plain"); event.target.textContent = data; event.preventDefault(); } function jsdump(str) { Components.classes['[email protected]/consoleservice;1'] .getService(Components.interfaces.nsIConsoleService) .logStringMessage(str); } ]]> </script> </window>

    Read the article

  • Re-opening closed dialog puts it in the start position after moving it

    - by semmelbroesel
    I'm using multiple instances of the JQuery-UI dialog along with draggable and resizable. Whenever I drag or resize one of the dialog boxes, the position and dimensions of the current box are saved to a database and then loaded the next time the page opens. This is working well. However, when I close a dialog box and re-open it using a button, jQuery sets the position of the box back to its original location in the center of the screen. Furthermore, I use a show effect to slide the box off to the left on closing and in from the left on re-opening. I found two ways to update its position when the slide in animation is done, however, it still slides into the center of the screen, and I have yet to find a way to get it to slide in towards the location it is supposed to have. Here are the parts of the code that play a part in this: $('.box').dialog({ closeOnEscape: false, hide: { effect: "drop", direction: 'left' }, beforeClose: function (evt, ui){ var $this = $(this); SavePos($this); // saves the dimensions to db }, dragStop: function() { var $this = $(this); SavePos($this); }, resizeStop: function() { var $this = $(this); SavePos($this); }, open: function() { var $this = $(this); $this.dialog('option', { show: { effect: "drop", direction: 'left'} } ); if (init) // meaning only load this code when the page has finished initializing { // tried it both ways - set the position before and after the effect - no success UpdatePos($this.attr('id')); // I tried this section with promise() and effect / complete - I found no difference $this.parent().promise().done(function() { UpdatePos($this.attr('id')); }); } } }); function UpdatePos(key) { // boxpos is an object holding the position for each box by the box's id var $this = $('#' + key); //console.log('updating pos for box ' + boxid); if ($this && $this.hasClass('ui-dialog-content')) { //console.log($this.dialog('widget').css('left')); $this.dialog('option', { width: boxpos[key].width, height: boxpos[key].height }); $this.dialog('widget').css({ left: boxpos[key].left + 'px', top: boxpos[key].top + 'px' }); //console.log('finished updating pos'); //console.log($this.dialog('widget').css('left')); } } The button that re-opens the box has this code on it to make that happen: var $box = $('#boxid'); if ($box) { if ($box.dialog('isOpen')) { $box.dialog('moveToTop'); } else { $box.dialog("open") } } I don't know what jQuery-UI does to the box as it hides it (other than display:none) or to make it slide in, so maybe there's something I'm missing here that might help... Basically, I need JQuery to remember the box' position and put the box back into that location when it is re-opened. It took me days to make it this far, but this is one obstacle I have yet to overcome. Maybe there's a different way I can re-open the box? Thanks! EDIT: Forgot - this issue ONLY happens when I use my UpdatePos function to set the location of a box (i.e. on page load). When I drag a box with my mouse, close it, and re-open it, everything works. So I'm guessing there's one more storage location for the box' position that I'm missing here... EDIT2: After more messing with it, my code for debugging now looks like this: open: function() { var $this = $(this); console.log('box open'); console.log($this.dialog('widget').position()); // { top=0, left=-78.5} console.log($this.dialog('widget').css('left')); $this.dialog('option', { show: { effect: "drop", direction: 'left'} } ); if (init) { UpdatePos($this.attr('id')); $this.parent().promise().done(function() { console.log($this.dialog('widget').position()); // { top=313, left=641.5} console.log($this.dialog('widget').css('left')); UpdatePos($this.attr('id')); console.log($this.dialog('widget').position()); // { top=121, left=107} console.log($this.dialog('widget').css('left')); }); } The results I'm getting are: box open Object { top=0, left=-78.5} -78.5px Object { top=313, left=641.5} 641.5px Object { top=121, left=107} 107px So looks to me as if the widget is being moved off screen (left=-78.5) and then moved for the animation, and then my code moves it into the location that it should be in (121/107). The position() results for $box.position() or $box.dialog().position() do not change during this debugging section. Maybe this will help someone here - I'm still out of ideas here... ... and I just discovered that when I drag the item around myself, then close and re-open it, it is very unpredictable. Sometimes, it will end up in the correct location horizontally, but not vertically. Sometimes, it will end up back in the center of the screen...

    Read the article

  • JSF index out of bounds exception when submiting a form

    - by selvin
    When I click submit button in a JSF form the following exception occurs. It says an Indexout of bounds exception, but I did not use any ArrayList associated with the code. Is this a bug? what should i do to get rid of this error.. Mojarra: 2.0.2 FCS with primefaces 2.2 JSF: 2.0 NetBeans IDE 6.8 Glassfish Domain V3 Form Code: <p:panel id="jobres" style="min-width: 200px" header="Reservation" widgetVar="jres" closable="true" toggleable="true" > <h:form id="arj" prependId="false" style="width:550px;max-height:400px;overflow:auto;"> <p:tooltip global="true"/> <h:panelGrid columns="2" > <p:panel style="min-width: 220px"> <h:outputLabel value="1.Job type:"/> </p:panel> <h:panelGroup> <h:messages id="aerr"/> <h:selectOneMenu title="Choose a Jobtype" value="#{arjob.jobtype}"> <f:selectItem itemLabel="Sequential" itemValue="sequential"/> <f:selectItem itemLabel="Parallel" itemValue="parallel"/> </h:selectOneMenu> </h:panelGroup> <p:panel> <h:outputLabel value="2.Executable: *"/> </p:panel> <h:panelGroup> <p:fileUpload id="aexeupload" fileUploadListener="#{arjob.chooseListener}" auto="true" update="adlist :erdialog" description="Resource Files"> </p:fileUpload> <br/> <h:panelGroup id="aexelistwrapper"> <p:dataList var="fileList" type="ordered" id="adlist" value="#{arjob.fexelist}"> <p:column> #{fileList}&nbsp; <p:commandLink ajax="true" update="aexelistwrapper" actionListener="#{arjob.removeExe(fileList)}"> <p:graphicImage value="images/closebar.png"/> </p:commandLink> </p:column> </p:dataList> </h:panelGroup> </h:panelGroup> <p:panel> <h:outputLabel value="3.Argument(s):"/> </p:panel> <h:panelGroup> <u style="color:orange"> <i> <p:inplace emptyLabel="Add Arguments" onEditUpdate="aarglist"> <h:inputText title="Enter the arguments" id="aiparg" value="#{arjob.args}"> <f:ajax event="valueChange"/> </h:inputText> <p:commandButton update="aarglistwrapper erdialog" value="add" actionListener="#{arjob.addArg}"/> </p:inplace> </i> </u> </h:panelGroup> <h:panelGroup> </h:panelGroup> <h:panelGroup> <h:panelGrid id="aarglistwrapper"> <p:dataList id="aarglist" type="ordered" var="args" value="#{arjob.arglist}"> <p:column id="col2"> #{args}&nbsp; <p:commandLink ajax="true" update="arj:arglistwrapper" actionListener="#{arjob.removeArgs(args)}"> <p:graphicImage title="remove" value="images/closebar.png"/> </p:commandLink> </p:column> </p:dataList> </h:panelGrid> </h:panelGroup> <p:panel> <h:outputLabel value="4.InputFile(s): *"/> </p:panel> <h:panelGroup> <p:fileUpload id="ainpupload" fileUploadListener="#{arjob.inputChooseListener}" auto="true" update="aipfilelistwrapper :erdialog" description="Resource Files"> </p:fileUpload> <br/> <h:panelGroup id="aipfilelistwrapper"> <p:dataList var="ipfile" type="ordered" id="aipflist" value="#{arjob.finlist}"> <p:column> #{ipfile}&nbsp; <p:commandLink ajax="true" update="aipfilelistwrapper" actionListener="#{arjob.removeInfile(ipfile)}"> <p:graphicImage value="images/closebar.png"/> </p:commandLink> </p:column> </p:dataList> </h:panelGroup> </h:panelGroup> <h:panelGroup> <p:panel > 5)Output File(s): </p:panel> </h:panelGroup> <h:panelGroup> <u style="color:orange"> <i> <p:inplace emptyLabel="Add file name" id="aipexe"> <h:inputText title="Enter the output filenames" id="aexe" value="#{arjob.ofilename}"> <f:ajax event="valueChange"/> </h:inputText> <p:commandButton update="adoutlist :erdialog" value="add" actionListener="#{arjob.addOutfile}"/> </p:inplace> </i> </u> </h:panelGroup> <h:panelGroup> </h:panelGroup> <h:panelGroup> <h:panelGrid id="afilelistwrapper"> <p:dataList id="adoutlist" type="ordered" var="ofile" value="#{arjob.foutlist}"> <p:column id="acol"> #{ofile}&nbsp; <p:commandLink ajax="true" update="afilelistwrapper" actionListener="#{arjob.removeOutfile(ofile)}"> <p:graphicImage value="images/closebar.png"/> </p:commandLink> </p:column> </p:dataList> </h:panelGrid> </h:panelGroup> <p:panel> <h:outputLabel value="6) Operating System"/> </p:panel> <h:panelGroup> <h:selectOneMenu title="Select an OperatingSystem" value="#{arjob.os}"> <f:selectItem itemLabel="CentOS Release 5.2" itemValue="Cent OS 5.2"/> <f:selectItem itemLabel="RHEL Server Release 5" itemValue="RHEL server 5"/> <f:selectItem itemLabel="RHEL Server Release 5.2" itemValue="RHEL server 5.2"/> </h:selectOneMenu> </h:panelGroup> <h:panelGroup> <p:panel> <h:outputLabel value="7) Physical Memory:"/> </p:panel> </h:panelGroup> <h:panelGroup> <p:spinner min="0" style="width: 100px" stepFactor="10" value="#{arjob.mem}"> </p:spinner>(MB) </h:panelGroup> <h:panelGroup> <p:panel> <h:outputLabel value="8) Disk Space:"/> </p:panel> </h:panelGroup> <h:panelGroup> <p:spinner min="0" style="width: 100px" stepFactor="10" value="#{arjob.diskspace}"> </p:spinner>(MB) </h:panelGroup> <h:panelGroup> <p:panel> <h:outputLabel value="9) CPU Mhz:"/> </p:panel> </h:panelGroup> <h:panelGroup> <p:spinner min="0" style="width: 100px" stepFactor="10" value="#{arjob.cpumhz}"> </p:spinner>(Mhz) </h:panelGroup> <p:panel> <h:outputLabel value="10) Start Time:"/> </p:panel> <h:panelGroup> <p:inputMask title="(YYYY-MM-DD HH:MM:SS)" mask="9999-99-99 99:99:99" value="#{arjob.startt}"> </p:inputMask> </h:panelGroup> <p:panel> <h:outputLabel value="11) End Time:"/> </p:panel> <h:panelGroup> <p:inputMask title="(YYYY-MM-DD HH:MM:SS)" mask="9999-99-99 99:99:99" value="#{arjob.endt}"> <p:ajax event="valueChange"/> </p:inputMask> </h:panelGroup> <p:panel> <h:outputLabel value="12) LRMS type"/> </p:panel> <h:panelGroup> <h:selectOneMenu value="#{arjob.lrms}"> <f:selectItem itemLabel="PBS" itemValue="PBS"/> <f:selectItem itemLabel="SGE" itemValue="SGE"/> </h:selectOneMenu> </h:panelGroup> <h:panelGroup> <p:panel> <h:outputLabel value="13)Number of Nodes: *"/> </p:panel> </h:panelGroup> <h:panelGroup> <h:panelGroup> <p:spinner style="width: 100px" min="1" max="100" value="#{arjob.numnodes}"> </p:spinner> </h:panelGroup> </h:panelGroup> <h:panelGroup> </h:panelGroup> <h:panelGroup> <p:commandButton ajax="false" value="Submit" action="#{arjob.jobSubmitAction}"/> </h:panelGroup> </h:panelGrid> </h:form> <p:draggable for="jobres" handle=".ui-panel-titlebar"/> </p:panel> Exception: SEVERE: javax.faces.FacesException: Unexpected error restoring state for component with id j_idt7. Cause: java.lang.IndexOutOfBoundsException: Index: 0, Size: 0. at com.sun.faces.application.view.StateManagementStrategyImpl$2.visit(StateManagementStrategyImpl.java:239) at com.sun.faces.component.visit.FullVisitContext.invokeVisitCallback(FullVisitContext.java:147) at javax.faces.component.UIComponent.visitTree(UIComponent.java:1446) at javax.faces.component.UIComponent.visitTree(UIComponent.java:1457) at javax.faces.component.UIComponent.visitTree(UIComponent.java:1457) at javax.faces.component.UIComponent.visitTree(UIComponent.java:1457) at com.sun.faces.application.view.StateManagementStrategyImpl.restoreView(StateManagementStrategyImpl.java:223) at com.sun.faces.application.StateManagerImpl.restoreView(StateManagerImpl.java:177) at com.sun.faces.application.view.ViewHandlingStrategy.restoreView(ViewHandlingStrategy.java:131) at com.sun.faces.application.view.FaceletViewHandlingStrategy.restoreView(FaceletViewHandlingStrategy.java:430) at com.sun.faces.application.view.MultiViewHandler.restoreView(MultiViewHandler.java:143) at javax.faces.application.ViewHandlerWrapper.restoreView(ViewHandlerWrapper.java:288) at com.sun.faces.lifecycle.RestoreViewPhase.execute(RestoreViewPhase.java:199) at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101) at com.sun.faces.lifecycle.RestoreViewPhase.doPhase(RestoreViewPhase.java:110) at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:118) at javax.faces.webapp.FacesServlet.service(FacesServlet.java:312) at org.apache.catalina.core.StandardWrapper.service(StandardWrapper.java:1523) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:343) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:215) at org.primefaces.webapp.filter.FileUploadFilter.doFilter(FileUploadFilter.java:79) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:256) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:215) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:277) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:188) at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:641) at com.sun.enterprise.web.WebPipeline.invoke(WebPipeline.java:97) at com.sun.enterprise.web.PESessionLockingStandardPipeline.invoke(PESessionLockingStandardPipeline.java:85) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:185) at org.apache.catalina.connector.CoyoteAdapter.doService(CoyoteAdapter.java:332) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:233) at com.sun.enterprise.v3.services.impl.ContainerMapper.service(ContainerMapper.java:165) at com.sun.grizzly.http.ProcessorTask.invokeAdapter(ProcessorTask.java:791) at com.sun.grizzly.http.ProcessorTask.doProcess(ProcessorTask.java:693) at com.sun.grizzly.http.ProcessorTask.process(ProcessorTask.java:954) at com.sun.grizzly.http.DefaultProtocolFilter.execute(DefaultProtocolFilter.java:170) at com.sun.grizzly.DefaultProtocolChain.executeProtocolFilter(DefaultProtocolChain.java:135) at com.sun.grizzly.DefaultProtocolChain.execute(DefaultProtocolChain.java:102) at com.sun.grizzly.DefaultProtocolChain.execute(DefaultProtocolChain.java:88) at com.sun.grizzly.http.HttpProtocolChain.execute(HttpProtocolChain.java:76) at com.sun.grizzly.ProtocolChainContextTask.doCall(ProtocolChainContextTask.java:53) at com.sun.grizzly.SelectionKeyContextTask.call(SelectionKeyContextTask.java:57) at com.sun.grizzly.ContextTask.run(ContextTask.java:69) at com.sun.grizzly.util.AbstractThreadPool$Worker.doWork(AbstractThreadPool.java:330) at com.sun.grizzly.util.AbstractThreadPool$Worker.run(AbstractThreadPool.java:309) at java.lang.Thread.run(Thread.java:619) Caused by: java.lang.IndexOutOfBoundsException: Index: 0, Size: 0 at java.util.ArrayList.RangeCheck(ArrayList.java:547) at java.util.ArrayList.get(ArrayList.java:322) at javax.faces.component.AttachedObjectListHolder.restoreState(AttachedObjectListHolder.java:161) at javax.faces.component.UIComponentBase.restoreState(UIComponentBase.java:1427) at com.sun.faces.application.view.StateManagementStrategyImpl$2.visit(StateManagementStrategyImpl.java:231) ... 45 more

    Read the article

< Previous Page | 10 11 12 13 14 15  | Next Page >