I’d like to add basic form validation to a UI Dialog using the standard.. http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Where this call works elsewhere (I can’t make it work within a Dialog)..
$ (“#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm”).validate();

The Dialog Submit doesn’t seem to catch the validation.. What approach have you guys used to solve the problem? I figure it must be a fairly common one -

thanks

$  ('#lowValueSurvey').dialog({
                autoOpen: false,
                modal: true,
                width: 900,
                resizable: false,
                show:"puff",
                hide:"puff",
                close:"puff",
                open: function(event, ui) {
                    performElqLookups('#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm');
                },
                buttons: {
                    'Submit': function() {
                        $  ("#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm").validate();
                        $  .ajax({
                                    type: "POST",
                                    async: false,
                                    url:  $  ("#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm").attr('action'),
                                    data: $  ("#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm").serialize()
                                });
                        setCookie(lowValueCookieName, -1, 1000);
                        $  (":button:contains('Submit')").hide();
                        $  ("#lowValueSurvey").load('/longstoryshort/forms/confirmation.html');
                        $  ("#lowValueSurvey").dialog({
                                    close: {effect: "fadeOut", duration: 5000}
                                });
                    }
                }
            });

newest questions tagged jquery – Stack Overflow

Lets say I have the following jQuery plugin (this is just an example to demonstrate the point):

(function ($  ) {
    $  .fn.colourise = function (options) {
        var settings = $  .extend({
            color: "black"
        }, options);

        return this.each(function () {
            $  (this).css("color", options.color);
        });
    };
})(jQuery);

which I want to apply to the following markup:

<div data-color="red">
    This text should be red.
</div>
<div data-color="blue">
    This text should be blue
</div>
<div data-color="green">
    This text should be green
</div>

If the value I want to pass as one of the options of a plugin depends on the element, how do I apply it? At the moment I can only get this working by doing:

$  (function () {
    // This feels a bit wrong to have to use a .each() here, but how else do we do it?
    $  ("div").each(function () {
        $  (this).colourise({
            color: $  (this).data("color")
        });
    });
});

I.e. by iterating over each one with the .each() method and applying the plugin to each element individually (which kinda makes the this.each() inside the plugin a bit redundant). It feels like I should be able to do something like:

$  (function () {
    $  ("div").colourise({
        color: [get context of this "div" somehow].data("color")
    });
});

But I can’t use $ (this) or this here because they refer to the document.

Sorry for the lack of a http://jsfiddle.net/, but the site is really slow for me at the moment, they must be having a few issues.

newest questions tagged jquery – Stack Overflow

I’m trying to use tinyscrollbar for jQuery. It works well, but when I upgrade my container and I upgrade the scroll, it always puts me into the beginning of the container. I tried ‘relative’ option, but it’s the same. Here’s the source: http://www.baijs.nl/tinyscrollbar/
I removed the else statement in the line: iScroll = (sScroll == 'relative' && oContent.ratio <= 1) ... so it doesn’t get 0, but the problem is with using the mousewheel, it doesn’t scroll back to down.

It seems the bug is right here, but I can’t find it.

        function wheel(oEvent){
        if(!(oContent.ratio >= 1)){
            oEvent = $  .event.fix(oEvent || window.event);
            var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta/120 : -oEvent.detail/3;
            iScroll -= iDelta * options.wheel;
            iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));

            oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
            oContent.obj.css(sDirection, -iScroll);
            oEvent.preventDefault();
        };

BTW: Also if you know a different custom scrollbar component (with images)
that works on IE6+, tell me.

newest questions tagged jquery – Stack Overflow

Something like “Click here to get started” or whatnot. I am planning to add a “tutorial” mode for a site and was wondering if there was a jquery or rails plugin for it already.

I have tried googling for tool tips but all i get are hover(or click) activated ones. You usually see these tool tips for flash games with tutorials(just an example), but is it possible with jquery?

newest questions tagged jquery – Stack Overflow

I’ve built a filter plugin in jQuery that pops up an unordered list of query results from a database after I click an input textfield and filters the list depending on the changing content of the input field. I guess it’s clear so far, we see many such things.

After spending some time with building it into a plugin I quickly realised that the .live() function I use on the list items instead of .click() (I have to use it as the list items are generated dynamically) doesn’t work the way I want it to work. After some googling, I found some relating articles, but my real problem is that the .live() function binds my click event to all the input fields with which I use the plugin, and after I click a list item it pushes the text in all of the callers.

Here’s a snapshot of the problem.

Here’s the relevant code:

I call the plugin like this on two input fields:

$  ('#inputf').lookupFilter({ dataSource: '/GetTownsForCounty/1', loadOnce: true });
$  ('#inputfield').lookupFilter({ dataSource: '/GetTownsForCounty/1', loadOnce: true });

And defined the plugin like this:

(function( $   ){
    var settings = {
         datarows: '#datarows',
         //  other settings here
    };
    $  .fn.lookupFilter = function( options ) {
      return this.each(function() {
        var $  this = $  (this);
        if( options ) {
            $  .extend( settings, options );
        }

     //  Generating & filtering the list items here

        $  this.keyup( function(){
            if($  (this).val() != '') {
                $  ("#datarows > li:not([name^='" + $  (this).val().toLowerCase() + "']):visible").hide();
                $  ("#datarows > li[name^='" + $  (this).val().toLowerCase() + "']:hidden").show();
            }
        })
        .keyup();  

        ajaxRequest(settings.dataSource);

        $  (settings.datarows + ' > li').live('click', function() {
            pushText($  this, $  (this).text());
            alert('right after pushText for id: ' + $  this.attr('id'));
        });
     });
})(jQuery);

I tried the above mentioned source’s solution like this (changing the $ (settings.datarows… line to this):

$  (settings.datarows + ' > li').liveBindTest();

And introducing the function itself:

$  .fn.liveBindTest = function () {
      $  (this.selector).live('click', function() {
          console.log('live clicked ' + $  (this).attr('id'));
          return false;
      });

But it returns both input fields’ ID again.

So, question is whether there is a workaround to bind only the relevant input field to the click event, or is it me who do things wrong? (Or is it an actual problem that no one has spotted yet?)

Thanks for the help.

newest questions tagged jquery – Stack Overflow

I’m using the jQuery UI Selectmenu Plugin for styling my select fields. Now I have a general question to bring this code $ (this).val() to work with this plugin. After the onChange event it should me give out the value of the current select field.

Many thanks!

newest questions tagged jquery – Stack Overflow

I would like recommendation of a plugin that does 4×4 image carousel / pagination. Any recommendations?

I user needs to be able to select images from two different carousels on the page.

Thanks in advance!

newest questions tagged jquery – Stack Overflow

is there any other jQuery Isotope plugin implementor that knows, if it is possible to automatically shrink a currently enlarged .element when a new .element is clicked, and if it is possible to have that currently enlarged .element always displayed top left in the #container div (the other elements can Isotope themselves around as usual after reLayout)?

Thanks!

newest questions tagged jquery – Stack Overflow

I am using jQuery form validation plugin to verify the form.. It is working perfectly.. But problem is that it is showing error message next to form field in the same row.. I want to show this error message below the text field like first form in this example. I don’t want to redefine error messages in validate function. What is the shortest way.

I am applying plugin like this:

$  (".ValidateForm").validate();

Thanks

newest questions tagged jquery – Stack Overflow

I’m using this tooltip: http://flowplayer.org/tools/demos/tooltip/index.html

I have the following lines in my html file:

<script src="/javascripts/home.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>

<div id="boo">
<img src="image1.jpg" title="this thing is a tool"/>
<img src="image2.jpg" title="this thing is also tool"/>
</div>

I have the following line in my home.js file:

$  ("#boo img[title]").tooltip();

I have the following line in my css file:

.tooltip {
    display:none;
    background:transparent url(/tools/img/tooltip/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff;
}

I get this error:

Uncaught TypeError: Object [object Object] has no method 'tooltip'

I’m at my wits end. I feel like I’ve followed the example on the site exactly, but no idea what’s going on.

newest questions tagged jquery – Stack Overflow