EzDevInfo.com

How can I disable a button on a jQuery UI dialog?

How do I go about disabling a button on the jQuery UI dialog. I can't seem to find this in any of the documentation in the link above.

I have 2 buttons on the modal confirmation ("Confirm" and "Cancel"). In certain cases, I want to disable the "Confirm" button.

jQuery UI DatePicker to show month year only

I am using jQuery date picker to display the calendar all over my app. I want to know if I can use it to display the month and year (May 2010) and not the calendar?

Downloading jQuery UI CSS from Google's CDN

I am planning on using Google to download the jQuery lib for both UI and Core. My question is, do they allow me to download the CSS for it or should I have to host it myself?

Also if I use Google to load how should I load other plugins? Can I compress all plugins together or should it be its own separate file?

Submit jQuery UI dialog on

I have a jQuery UI dialog box with a form. I would like to simulate a click on one of the dialog's buttons so you don't have to use the mouse or tab over to it. In other words, I want it to act like a regular GUI dialog box where simulates hitting the "OK" button.

I assume this might be a simple option with the dialog, but I can't find it in the jQuery UI documentation. I could bind each form input with keyup() but didn't know if there was a simpler/cleaner way. Thanks.

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from jQuery UI as the stand alone picker.. i have this code

<div id="datepicker"></div>

And the follow JS

$('#datepicker').datepicker();

When i try to return the value with this code:

var date = $('#datepicker').datepicker('getDate');

I am returned this...

Tue Aug 25 2009 00:00:00 GMT+0100 (BST)

Which is totally the wrong format... Is there a way i can return DD-MM-YYYY ??

How to remove close button on the jQuery UI dialog?

How do I remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI?

jquery UI Sortable with table and tr width

I am using jQuery UI sortable to make my table grid sortable. The code seems to work fine but because I am not adding width to tds, when I drag the tr it shrinks the content.

For example; if my table row is 500px when I start dragging, it becomes 300px. I assume that's happening because no width is defined in the grid. That's because I am using two classes for the tds (fix and liquid).

The fix class makes the td equal to the content width and liquid makes the td width 100%. It's my approach for grid table without having to assign width to tds.

Any idea how to make sortable work with my approach?

How to implement "confirmation" dialog in Jquery UI dialog?

I am try to use JQuery UI Dialog to replace the ugly javascript:alert() box. In my scenario, I have a list of items, and next to each individual of them, I would have a "delete" button for each of them. the psuedo html setup will be something follows:

<ul>
    <li>ITEM <a rel='nofollow' href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a rel='nofollow' href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a rel='nofollow' href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

In JQ part, on document ready, I would first setup the div to be a modal dialog with necessary button, and set those "a" to be firing to confirmation before to remove, like:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

OK, here's the problem. during the init time, the dialog will have no idea who (item) will fire it up, and also the item id (!). How can I setup the behavior of those confirmation buttons in order to, if the user still choose YES, it will follow the link to remove it?

animating addClass/removeClass with jquery

I am using jQuery and jQuery-ui and want to animate various attributes on various objects.

For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over it.

I am able to get the behavior I want when using animate(), however when doing so the styles I am animating have to be in the animation code and so are separate from my style sheet. (see example 1)

An alternative is using addClass() and removeClass() but I have not been able to re-create the exact behavior that I can get with animate(). (see example 2)

Example 1

Let's take a look at the code I have with animate():

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

it displays all the behaviors I am looking for:

1. Animates smoothly between red and blue.
2. No animation 'overqueue-ing' when the user moves their moue quickly in and out of the div.
3. If the user moves their mouse out/in while the animation is still playing it eases correctly between the current 'halfway' state and the new 'goal' state.

But since the style changes are defined in animate() I have to change the style values there, and can't just have it point to my stylesheet. This 'fragmenting' of where styles are defined is something that really bothers me.

Example 2

Here is my current best attempt using addClass() and removeClass (note that for the animation to work you need jQuery-ui):

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

This exhibits both property 1. and 2. of my original requirements, however 3 does not work.

I understand the reason for this:

When animating addClass() and removeClass() jQuery adds a temporary style to the element, and then increments the appropriate values until they reach the values of the provided class, and only then does it actually add/remove the class.

Because of this I have to remove the style attribute, otherwise if the animation is stopped halfway the style attribute would remain and would permanently overwrite any class values, since style attributes in a tag have higher importance than class styles.

However when the animation is halfway done it hasn't yet added the new class, and so with this solution the color jumps to the previous color when the user moves their mouse before the animation is completed.

What I want ideally is to be able to do something like this:

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

Where getClassContent would just return the contents of the provided class. The key point is that this way I don't have to keep my style definitions all over the place, but can keep them in classes in my stylesheet.

Any help would be much appreciated.

Prevent jQuery UI dialog from setting focus to first textbox

I have setup a jQuery UI modal dialog to display when a user clicks a link. There are two textboxes (I only show the code for 1 for brevity) in that dialog div tag and it is changed to be a jQuery UI DatePicker textbox that reacts on focus.

The problem is that the jQuery UI dialog('open') somehow triggers the first textbox to have focus, which then triggers the datepicker calendar to open immediately.

So I am looking for a way to prevent the focus from happening automatically.

<div><a id="lnkAddReservation" rel='nofollow' href="#">Add reservation</a></div>

<div id="divNewReservation" style="display:none" title="Add reservation">
    <table>
        <tr>
            <th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /></th>
            <td>
                <asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" />
            </td>
        </tr>
    </table>

    <div>
        <asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var dlg = $('#divNewReservation');
        $('.datepicker').datepicker({ duration: '' });
        dlg.dialog({ autoOpen:false, modal: true, width:400 });
        $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
        dlg.parent().appendTo(jQuery("form:first"));
    });
</script>

jQuery UI datepicker change event not caught by KnockoutJS

I'm trying to use KnockoutJS with jQuery UI. I have an input element with a datepicker attached. I'm currently running knockout.debug.1.2.1.js and it seems that the change event is never being caught by Knockout. The element looks like this:

<input type="text" class="date" data-bind="value: RedemptionExpiration"/>

I've even tried changing the valueUpdate event type but to no avail. It seems like Chrome causes a focus event just before it changes the value, but IE doesn't.

Is there some Knockout method that "rebinds all the bindings"? I technically only need the value changed before I send it back to the server. So I could live with that kind of workaround.

I think the problem's the datepicker's fault, but I can't figure out how to fix this.

Any ideas?

Is there a float input type in HTML(5)?

According to http://simon.html5.org/html-elements, the "number" input type's "value attribute, if specified and not empty, must have a value that is a valid floating point number."

Yet it is simply (in Chrome.latest, anyway), an "updown" control with integers, not floats:

<label>Total Amt $</label>
<input type="number" id="totalAmt"></input>

http://jsfiddle.net/clayshannon/8wRT3/8/

Is there a floating point input element native to HTML5, or a way to make the number input type work with floats, not ints? Or must I resort to a jQuery UI plugin?

Hook into dialog close event

I am using the dialog from jquery-ui.

I am looking for way to refresh the page when in some circumstances when the dialog is closed.

Is there a way to capture a close event from the dialog?

I know I can run code when the close button is clicked but that doesn't cover the user closing with escape or the x in the top right corner.

jQueryUI: how can I custom-format the Autocomplete plug-in results?

I'm using jQuery UI Autocomplete plug-in. Is there a way to highlight search character sequence in drop-down results?

For example, if I have data: "foo bar" it and I search for "foo" I get "foo bar" in drop down.

check / uncheck checkbox using jquery? [duplicate]

I have some input text fields in my page, I am displaying their values using javascript setVal function to edit , I added an extra checkbox field, I passed a value,

Here I want to check that if value == 1, then this checkbox should be checked otherwise unchecked,

I did this as using two divs, but I am not feeling comfortable with that, is there any other solution?

if(value == 1) {
    $('#uncheck').hide();
    $('#check').show();
} else{
    $('#uncheck').show();
    $('#check').hide();
}