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

Monday, September 21, 2009

Change or Set HTML Attributes Using jQuery

Monday, September 21, 2009 9:25:33 PM (GMT Daylight Time, UTC+01:00) ( jQuery )

It’s often necessary to change the HTML attributes of an element dynamically. This example changes the photo image, alt tag and border width when the link is clicked. Notice how the properties can be chained together.

Here is a working demo

<html> 
  <head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jquery/jquery-1.3.2.js"></script>
    
<script type="text/javascript"> 
  $( domReady );  
  function domReady() { 
    $("#clickMe").click( changeImage ) 
  }
    
  function changeImage() {
      $("#myimage").attr({src : "moe.jpg"}).attr({alt : "Moe Bush"}).attr({border : "10px"});
  }      
    
</script>
   
  </head> 
  <body> 
    
    <a id="clickMe" href="#">Change the image below</a> 
    <br /> 
    <img id="myimage" src="/images/code.for.jpg" alt="code for food" border="0" />

 </body> 
</html>

Comments [0] | |

Changing Stylesheets Using jQuery

Monday, September 21, 2009 8:58:02 PM (GMT Daylight Time, UTC+01:00) ( jQuery )

This example shows you how to allow your users to change the default stylesheet using jQuery.

Here is a working demo.

Assume you have your default stylesheet:

<link rel="stylesheet" href="plain.css" type="text/css">

List of available stylesheet options:

<ul> 
  <li><a id="css-plain" href="#plain">Plain</a></li> 
  <li><a id="css-jazzy" href="#jazzy">Jazzy</a></li> 
  <li><a id="css-disco" href="#disco">Disco</a></li> 
</ul>

The jQuery which actually changes the stylesheet:

<script type="text/javascript"> 
  $( domReady ); 
  
  function domReady() { 
    // plain 
    $("#css-plain").click(function() { 
      $("link[rel=stylesheet]").attr({href : "/css/plain.css"}); 
    }); 
 
    // jazzy
    $("#css-jazzy").click(function() { 
      $("link[rel=stylesheet]").attr({href : "/css/jazzy.css"}); 
    }); 
 
    // disco 
    $("#css-disco").click(function() { 
      $("link[rel=stylesheet]").attr({href : "/css/disco.css"}); 
    }); 
  }; 
</script>

Comments [0] | |

Changing Div Content Using jQuery

Monday, September 21, 2009 8:28:43 PM (GMT Daylight Time, UTC+01:00) ( jQuery )

Here is a working demo of this code

<html> 
  <head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jquery/jquery-1.3.2.js"></script> 
    
    <script type="text/javascript">        
        $( domReady );        
        function domReady() {
            $('#btn').click( showMessage );
        }
        
        function showMessage() {
            $('#message').html("<h2>Goodbye from jQuery!</h2>");
        }        
        </script> 
   
  </head> 
  <body> 
    <button id="btn">Change Content</button>

    <div id="message">
        <h2>Hello from jQuery!</h2>
    </div>    
    
  </body> 
</html>

Comments [0] | |

Checking for duplicate records

Monday, September 21, 2009 8:07:01 PM (GMT Daylight Time, UTC+01:00) ( SQL )

This is an interesting example of how to check for a duplicate record in a table. If this record does not exist, then proceed with the INSERT. If a duplicate already exists, then do an UPDATE instead.

-- Check for duplicate Employee. If no there is duplicate, do an INSERT.
IF (NOT EXISTS (SELECT E.SSN
      FROM EmployeeTable E, inserted
      WHERE E.SSN = inserted.SSN))
   INSERT INTO EmployeeTable
      SELECT EmployeeID,SSN, Department, Salary
      FROM inserted
ELSE
--If there is a duplicate, change to UPDATE so that there will not
--be a duplicate key violation error.
   UPDATE EmployeeTable
      SET EmployeeID = I.EmployeeID,
          Department = I.Department,
          Salary = I.Salary
   FROM EmployeeTable E, inserted I
   WHERE E.SSN = I.SSN
END

A second way of doing this using a parameter is to count the number of records matching the given criteria.

IF (SELECT COUNT(UserID) 
FROM TLoginStatus
WHERE UserID = @UserID) = 0
        
BEGIN 
INSERT INTO TLoginStatus(UserID, SessionID) Values (@UserID, @SessionID)
     
END 
ELSE
         UPDATE TLoginStatus
         SET SessionID = @SessionID
         WHERE UserID = @UserID

Comments [0] | |

Thursday, September 17, 2009

Microsoft AJAX Content Delivery Network (CDN)

Thursday, September 17, 2009 4:03:55 PM (GMT Daylight Time, UTC+01:00) ( ASP.NET AJAX | Javascript/AJAX | jQuery )

http://www.asp.net/ajax/CDN/

Here is a working demo of this code example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery from Microsoft AJAX CDN</title>
        <script src="http://ajax.Microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>

        <script type="text/javascript">
        
        $( domReady );
        
        function domReady() {
            $('#btn').click( showMessage );
        }
        
        function showMessage() {
            $('#message').fadeIn('slow');
        }
        
        </script>
    </head>
    <body>

    <button id="btn">Show Message</button>

    <div id="message" style="display:none">

        <h1>Hello from jQuery!</h1>

    </div>

    </body>
    </html>

Comments [0] | |

Wednesday, September 09, 2009

Using jQuery to Hide Table Rows in a Gridview

Wednesday, September 09, 2009 4:26:55 PM (GMT Daylight Time, UTC+01:00) ( CSS | Gridview | jQuery )

I’m working on a project which requires users to have the ability to hide rows in a table associated with a certain value. I checked around and using jQuery seemed to be the best option. This is a much more elegant approach than doing it server-side. Here’s what I did.

First, I included a hidden field as a row in my Gridview. This field is a bit field (true/false) which two CSS classes and one of which is ‘hiddenField’ which makes the field invisible to the user.

<asp:boundfield DataField="InternalOnly" ShowHeader="true" ItemStyle-CssClass="hiddenField internalField" />

CSS code:

.hiddenField {    
    visibility:hidden;
}

Above the Gridview, I included a checkbox with an Id of chkInternal which the user can toggle to hide/show the rows in the Gridview

<input name="chkInternal" id="chkInternal" type="checkbox" />Exclude Non-product fields

Lastly, I use this bit of jQuery code to hide/show the rows in the table. When the chkInternal checkbox is checked, it applies the CSS property display: none to the the entire table row using the jQuery method .parent. It looks for the second CSS class property ‘internalField’. Conversely, when the checkbox chkInternal is not checked, the CSS property display: block is applied to the row making the row visible again.

<script language="javascript" type="text/javascript">    
$(document).ready(function() {      
      $('#chkInternal').click(
          function() {
          $('.internalField').each(function() {
             if ($("#chkInternal").is(":checked"))
            {
                if ($(this).text() == "True") 
                        $(this).parent().css('display', 'none');                
            }
            else
            {      
                $(this).parent().css('display', 'block');                
            }
        });                 
    });                      
});
</script>

Comments [0] | |

Wednesday, September 02, 2009

Removing Duplicate Values from a String

Wednesday, September 02, 2009 2:04:06 PM (GMT Daylight Time, UTC+01:00) ( ASP.NET | VB.NET )

I’ve been working on a project recently where I needed to prevent users from adding the same value twice to a string.

Here is a working demo.

<script runat="server" type="text/VB">

    Sub btnRemoveDupes_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim dupeValues As String
        dupeValues = lblWithDupes.Text
                
        'Remove duplicates
        dupeValues = RemoveDuplicates(dupeValues)
                
        'Reassign the label value without the duplicates
        lblNoDupes.Text = dupeValues
    End Sub


    Public Function RemoveDuplicates(ByVal items As String) As String
        Dim Result As StringBuilder = New StringBuilder()
        Dim newArray As Array
    
        newArray = Split(items, ",")
        For i As Integer = 0 To newArray.Length - 1
            If Result.ToString.IndexOf(newArray(i).ToString()) = -1 Then
                Result.Append(newArray(i).ToString() & ",")
            End If
        Next
        Return Result.ToString.Substring(0, Result.ToString.LastIndexOf(","))
    End Function

</script>

<form id="form1" runat="server">
    <div>
    
    Enter a comma delimited string with some duplicate values:<br />
    <asp:TextBox runat="server" ID="lblWithDupes" Width="400px" />
    <br /><br />
    
    The result without the duplicate values is:<br />
    <asp:Label runat="server" ID="lblNoDupes" /> <br /><br />
       
    <asp:Button ID="btnRemoveDupes" runat="server" Text="Button" OnClick="btnRemoveDupes_Click" /> 
    </div>
</form>

Comments [0] | |

Stone Coast Web Design Blog

Mostly .NET Development

Navigation

Search

Categories

On this page

Archive

Blogroll