Javascript

Using not() in jQuery to exclude a member of a class

by

This is just a quick tip I thought I throw out there. We have an application that applies a fade to a .alert class on all its pages. We have 2 pages that need to not fade one particular alert. Here is one way it can be handled.

  1. Add a class of .notfade to the alert that needs to stay put and not fade out:
    <div class="alert alert-info nofade"></div>
  2. Place the following in $().ready(): $(".alert").not(".notfade")fadeOut(7000);

Saving to a database with ColdFusion using jQuery

by

A commenter asked me how to extend a previous jQuery post to perform the database save via ColdFusion.  It is REALLY easy (and please keep in mind this is meant to be a SIMPLE example, not production code).  From the jQuery side my example only required the following code to ship the data off to ColdFusion:

function fSave(){
you=$("#you").val();
// Try to save
$.get("adduser.cfm?"+"you="+you , function(data){
// Result
alert(data);
window.location=location.href;
});
}

The adduser.cfm page then validates and inserts the data and returns a success or failure message.

See it here | Get it here.

Use jQuery to enable submit button and set form action

by

I recently had to do a quick bit of coding to only accept data from a form if JavaScript was enabled.

This example starts with a form that has no action and a disabled submit button.  When jQuery’s .ready() fires though it enables the submit button and attaches the appropriate action.

Please note the example file is in ColdFusion so your mileage may vary slightly for your own use.

See it here | Get it here.

Using jQuery style a cftooltip span

by

It’s not hard to figure out how to style the box that pops up when using cftooltip.  It is controlled by the .yui-tt class.

/* Tool tip styling */
.yui-tt {
color: #444;
font-size:110%;
border: 2px solid #1C64D1;
background-color: #eee;
padding: 10px;
width:250px;
cursor:help;
}

But how do you style the text that is triggering the tooltip?  cftooltip is going to generate a span around your text with the id of cf_tooltip_999999999 (where 999999999 is some random number).  I didn’t want to add another span to the mix to provide styling so I turned to jQuery for a simple, quick solution.

In the css file I added a class:

.terms{
color:#168FC0;
border-bottom:1px dashed #168FC0;
text-decoration:none;
margin-bottom:10px;
font-weight:bold;
}

In the jQuery .ready() function I added this line:

$("[id^=cf_tooltip_]").addClass("terms");

The result is that the text which triggers all cftooltips is now controlled by the .terms class.