Joseph Michael Pesch
VP Programming

jQuery UI Dialog Height Issue - Height Collapses when Re-Opening a Dialog

by 17. February 2014 21:36

I experienced an issue with jQuery dialog box if I opened the same dialog a second time the height would be collapsed so the content was not showing.  It seems the issue is related to allowing the jQuery dialog to open on creation (i.e. autoOpen = true, which is the default so if you leave the autoOpen parameter off the dialog creation it will autoOpen by default).  Instead, you should create the dialog (with autoOpen = false) and then explicitly open the dialog (e.g. $dlg.dialog('open'), see sample code below). 

/* Problem code */
$("#objectid").dialog({
  height: 680,
  width: 800,
  modal: true,
  resizable: false
});

/* Solution code */
var $dlg = $("#objectid");
$dlg.dialog({ autoOpen: false, height: 680, width: 800, modal: true, resizable: false }); $dlg.dialog('open');

 

 

Tags:

JQuery

plUpload IO Error 2032

by 26. October 2013 12:58

Using plUpload I was getting IO Error 2032 on larger file uploads.  Two settings that seemed to be associated to this.  First, if I added the resize attribute (i.e. resize: { width: 1000, height: 1000, quality: 90 }, ); however, I didn't really want to resize and was concerned that could have browser dependencies that may not be well supported in all cases.  The second fix I actually opted for in this case was adding the chunk_size attribute.  The interesting issue I didn't figure out yet was adding as chunk_size: '1mb', worked even though my original attempt adding chunk_size: '64kb', failed.

Tags:

JQuery | plUpload

jQuery $(document).ready() Not Working with ASP.Net UpdatePanel PostBack

by 27. September 2013 20:21

When using jQuery and $(document).ready() event along with an ASP.Net UpdatePanel the $(document).ready() event will only fire on the initial page load and will not fire on subsequent AJAX postbacks via the UpdatePanel.  There are a couple of common solutions posted to deal with this (shown below).  My preference is the first option which seems cleaner and has proven more reliable for me.

Solution 1:  Wrap the $(document).ready() event inside a pageLoad() function since the AJAX postback will always fire the pageLoad() event function.

function pageLoad() {
  $(document).ready(function () {
    DoPageInitialization();
  });
}

Solution 2:  Add a reference to the PageRequestManager and register your function to the add_endrequest() event.

$(document).ready(function() {
  // Still needed as the PageRequestManager below only fires on the postback...
  DoPageInitialization();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
  // Secondary binding for all AJAX postbacks through the UpdatePanel
  DoPageInitialization();
});

function DoPageInitialization() {
  ... Document Ready Code Here ...
}


Here is a good post that goes into more details on both $(document).ready() and pageLoad()
http://encosia.com/document-ready-and-pageload-are-not-the-same/

Tags:

ASP.Net | JavaScript | JQuery

jQuery Document.Ready Doesn't Work with ASP.Net UpdatePanel

by 27. July 2013 21:47

When using an ASP.Net UpdatePanel you may need to use the PageRequestManager to bind functions that would otherwise be bound on the page load or jQuery Document.Ready function (see below).  Link to blog article on this topic: http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels 

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

Tags:

ASP.Net | JQuery

jQuery Invisible Dialog - Borderless with Transparent Background

by 1. July 2013 07:03

Here is some code to remove the titlebar from a jQuery dialog and also remove the borders and make the background transparent (effectively making the dialog itself invisible so only the actual content of the dialog is visible.

var $obj = $('selector');
$obj.dialog({ });
$obj.parents(".ui-dialog")
  .css("border", "0 none")
  .css("background", "transparent")
  .find(".ui-dialog-titlebar").remove();

Tags:

JQuery

jQuery Dialog Disable Ok Button

by 24. June 2013 13:43

In some cases depending on the usage you may have a jQuery dialog open after the user clicks the Ok button; however, you may want to disable the button to prevent the user from double-clicking it.  Here are a couple of methods to achive this typ of behavior.  

Just disable the Ok button:

$(".ui-dialog-buttonpane button:contains('Ok')").attr("disabled", true).addClass("ui-state-disabled");

Remove all buttons and replace with a processing indicator:

$('#selector').dialog({
     title: 'Sample Dialog', 
     modal: true, 
     buttons: { 
       'Cancel': function() { $(this).dialog('close'); },
       'Ok': function() { $('.ui-dialog-buttonpane').html('<div style="width: 100%; text-align: center; padding: 20px; font-size: 20px; background: url(processing.gif) no-repeat;">Processing please wait...</div>'); 
     }
});

Tags:

JQuery

jQuery Fixing Flicker Issue with .slideUp()

by 16. August 2010 05:03

Sometimes using the .slideUp() method results in a flicker effect right near the end of the animation.  Two basic resolutions are as follows:

 

 

 

 

Option 1) Add this doctype tag to the html page: 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

Option 2) Set a timeout just short of the .slideUp() animiation length and .stop() the animation and .hide() the element:

 

//Start the slideUp effect lasting 500ms

$('#element').slideUp(500);

 

//Abort the effect just before it finishes and force hide()

//I had to play with the timeout interval until I found one that

// looked exactly right. 400ms worked for me.

setTimeout(function () {

  $('#element').stop(true, true).hide();

}, 400);

 

 

Tags:

JQuery

JQuery HTML Select Object (Options, Items, Selected, etc.)

by 4. May 2009 14:10

Tags: ,

JQuery

JQuery Reference

by 8. March 2009 21:08

MSDN Magazine article: Explore Rich Client Scripting With jQuery, Part 1 http://msdn.microsoft.com/en-us/magazine/dd453033.aspx#id0080053

Tags: ,

JQuery