Stone Coast Web Design Blog

Navigation

Search

Blogroll

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

| |

E-mail

Total Posts: 378
This Year: 6
This Month: 1
This Week: 0
Comments: 17

Friday, March 27, 2009

jQuery and the Selectbox

Friday, March 27, 2009 3:44:44 PM (GMT Standard Time, UTC+00:00) ( jQuery )

I’m not a jQuery or javascript expert so there may be better ways of doing this but here are a few approaches to common tasks involving a selectbox including how to add an option item, remove and option item and display the selected value.

I first start every jQuery function with the document.ready function

<head>
    <title>jQuery and the Selectbox</title>
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
    
    $(document).ready(function()
      {   
          
      }
    );    
    </script> 
</head>

Then build on this basic structure:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery and the Selectbox</title>
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
    
    $(document).ready(function()
      {   
          $("#myselect").change(onSelectChange);     
      }
    );
    
    function onSelectChange(){   
        // remove the option with a value of option1
        $('#myselect option[value="option1"]').remove();
        
        // add an item to it         
        $("#myselect").append('<option value="option5">option 5</option>'); 
        
        // remove all items
        //$('#myselect >option').remove(); 
        
        // display the output of the item selected in the div named output
        var selected = $("#myselect option:selected");        
        var output = "";   
        if(selected.val() != 0){   
            output = "You Selected " + selected.text();   
        }   
        $("#output").html(output);      
     } 

    </script>     

</head>
<body>

    <select id="myselect" name="myselect">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
    
    <div id="output"></div>

</body>
</html>

Comments [0] | |

Wednesday, March 18, 2009

T-SQL: Get only Date from DateTime

Wednesday, March 18, 2009 8:17:26 PM (GMT Standard Time, UTC+00:00) ( SQL )

SQL Server's 'smalldatetime' data type includes, as you may have guessed, both the date and time in this format mm/dd/yyyy 00:00:00. Often times you'll want to display just the date part of this without the time.

Here are a couple of ways of doing this.

The first is explicitly convert the smalldatetime field to CHAR field like this

> CONVERT(CHAR(10), dbo.Events.EventDate, 101) AS EventDate

This produces the format that we want but it's no longer a date field and if it's used in a gridview then you won't be able to sort the data using this field.

Another approach is to get the number of days in the date since 'date 1' and add it to 'date 1'. You get a clean new date where the time component is 0.

> DATEADD(dd, - DATEDIFF(dd, dbo.Events.EventDate, 1), 1) AS EventDate

Comments [0] | |

Wednesday, March 11, 2009

Using the jQuery loadData method to load an external file

Wednesday, March 11, 2009 4:19:23 PM (GMT Standard Time, UTC+00:00) ( jQuery )

Here is a working demo

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Using the jQuery loadData method to load an external file</title>
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
    
    $(document).ready(function() 
    {  $("#loadData").click(function()
       {    
       $(this).text("...One Moment Please...");
            $("#container").append('<div id="favoriteMovies"></div>')            
            .children("#favoriteMovies").hide()
            .load("theOtherPage.htm ul#favoriteMovies", function()
            {
                $("#loadData").remove();                      
                $("#favoriteMovies").slideDown("slow");                     
            });   
            return false;   
        });
    });
    </script>
    
</head>
<body>
<div id="container"> 
    <a href="#" id="loadData">Click This Link To Load My Favorite Movies</a>
</div>
</body>
</html>

theOtherPage.htm

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>The Other Page</title>
</head>

<body>

<ul id="favoriteMovies">
    <li>My Favorite Movies</li>
    <li>Contact</li><li>Shawshank Redemption</li>
    <li>Napoleon Dynamite</li><li>Back To The Future</li>
    <li>The Goonies</li><li>Cinderella Man</li>
    <li>Apollo 13</li>
</ul>

</body>
</html>

Comments [0] | |

Tuesday, March 03, 2009

CSS Reference

Tuesday, March 03, 2009 4:15:57 PM (GMT Standard Time, UTC+00:00) ( CSS )

I came across this amazing CSS reference on MSDN

http://msdn.microsoft.com/en-us/library/ms531205(vs.85).aspx

Comments [0] | |

Stone Coast Web Design Blog

Mostly .NET Development

Navigation

Search

Categories

On this page

Archive

Blogroll