Stone Coast Web Design Blog

I looked all over the place for an example of how to name a jQuery function and couldn’t find one.  This is all that really needs to be done.

<script language="javascript" type="text/javascript"> 
    function getDirectorIds() { 
    // code here
}  

 // this gets all of the director id_individual values 
   $(document).ready(function() { 
       getDirectorIds(); 
 }); 
 </script> 

The Learning jquery site has a nice article on how to do this.

This comes up a lot for me when I need to juggle client side and server side values back and forth.  In this example, I will create and set the values on the client side using javascript and then demonstrate how to read those values on the server side using ASP.NET.  To do this we need to follow these steps:

• Create a HTML hidden field on the page
• Set the value(s) using javascript
• Read those values on the server side

The first thing I did was create a repeater control and within the ItemTemplate place a checkbox which contains the value we’re interested in – in this case id_individual.  Notice that the checkboxes have a class value of “DirectorName” which we’ll use in our jQuery next. Next to the checkbox we list the person’s name in label controls. 

<asp:Repeater id="rptDirectors" DataSourceID="dsDirectors" Runat="Server">  
  <ItemTemplate>
      <input type="checkbox" value='<%# Container.DataItem("id_individual") %>' id="chkDirectorName" name="chkDirectorName" runat="Server" class="DirectorName" checked />
      <asp:Label ID="Label1" Text='<%# Eval("DirFName") %>' Runat="Server"/>  <asp:Label ID="Label2" Text='<%# Eval("DirLName") %>' Runat="Server"/><br />      
   </ItemTemplate> 
</asp:Repeater>    

We also need our hidden client-side field which will hold our id_individual values. Notice that it has a runat=”server” property.  This is what makes it accessible to both the client and server sides of this equation. We will also create a asp:Literal control which will show us the value on the server side after the value has been passed to the server side.

<input id="lblCheckedDirs" name="lblCheckedDirs" type="Hidden" runat="server" visible="true" />

<asp:Literal ID="lblServerSideValue" runat="server" Visible="true" />

Next, we will create a javascript function named getDirectorIDs to get the value of each checked checkbox inside of the repeater control rptDirectors.  Using the jQuery library makes it very easy to iterate over the checkboxes to get these values.  We place the comma delimited values into a variable named result. We then place the value of result into the hidden control, lblCheckedDirs.  

<script language="Javascript" type="text/javascript">
    // this gets all of the director id_individual values
    $(document).ready(function getDirectorIDs() {    
        var result = "";
        $(".DirectorName:checked").each(function() {
            result = result + $(this).val() + ",";
        });
        // place the selected id_individual values in the label control lblCheckedDirs
        document.getElementById('lblCheckedDirs').value = result;
    }); 
</script>

Next, our submit button calls both the client side function getDirectorIDs() as well as our server side function btnContinue_Click.  getDirectorIDs populates the client-side hidden control, lblCheckedDirs, and btnContinue_Click populates the server literal control, lblServerSideValue.

<asp:Button ID="btnContinue" runat="server" Text="Continue >>" OnClientClick="getDirectorIDs();" onclick="btnContinue_Click" />    

<script runat="server">
    Protected Sub btnContinue_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        lblServerSideValue.Text = lblCheckedDirs.Value
    End Sub
</script>

Here is the source code for the whole page. 

I’m a relative beginner with jQuery and just starting out with a lot of things but here are some examples on using checkboxes in your applications.

This example checks/unchecks all of the checkboxes on a page.  Clicking on the checkbox with an id of ‘chkAll’ checks/unchecks every checkbox element on the page.

$(document).ready(function() {            
            $('#chkAll').click(
             function() {                
                $("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
            });     
     });

<input name="chkAll" id="chkAll" type="checkbox" Checked />

The next example is a little more targeted and is actually the preferred method of doing this.  Rather than targeting every checkbox element on the page, in most cases you will want to target specific checkboxes or form elements.  This case whenever the checkbox with an id of chkDivDirectors is checked, every checkbox element with of class of chkDirector will be checked/unchecked.

$(document).ready(function() {
    $("#chkDivDirectors").click(
        function() {
                $(".chkDirector").attr('checked', $('#chkDivDirectors').is(':checked'));
                           
            });
        });   

<input name="chkDivDirectors" id="chkDivDirectors" type="checkbox" Checked />

<input type="checkbox" id="chkDirectorName" name="chkDirectorName" runat="Server" class="chkDirector" checked />

A slightly different version of this but less preferred method is to look at the element’s id rather than it’s class name. In this example, every checkbox that has an id that begins with ‘chkDirector’ gets checked/unchecked.

$(document).ready(function() {
    $("#chkDivDirectors").click(
        function() {
                $("INPUT[id^='chkDirector']").attr('checked', $('#chkDivDirectors').is(':checked'));                            
            });
        }); 

Some time ago, I posted something about using user-defined function to split a comma-delimited string into a usable format for searches. This one is simpler.

CREATE FUNCTION dbo.Split(@String varchar(8000), @Delimiter char(1))     
returns @temptable TABLE (items varchar(8000))     
as     
begin     
    declare @idx int     
    declare @slice varchar(8000)     
    
    select @idx = 1     
        if len(@String)<1 or @String is null  return     
    
    while @idx!= 0     
    begin     
        set @idx = charindex(@Delimiter,@String)     
        if @idx!=0     
            set @slice = left(@String,@idx - 1)     
        else     
            set @slice = @String     
        
        if(len(@slice)>0)
            insert into @temptable(Items) values(@slice)     

        set @String = right(@String,len(@String) - @idx)     
        if len(@String) = 0 break     
    end 
return     
end

To use this function do something like this:

CREATE PROCEDURE [dbo].[ba_Company_Profile_Div4_Customize]
(
@id_company int,
@UpdateDescription varchar(8000)
)
AS 
BEGIN
SELECT 
id_event,
EventDate,
UpdateDescription,
EventDescription

FROM events

WHERE id_company=@id_company
AND
UpdateDescription IN (SELECT * FROM dbo.Split(@UpdateDescription,','))
ORDER BY EventDate DESC
END
GO

The show/hide or expand collapse effect is pretty simple with jQuery but I’m stupid so I need to document it here

CSS
#box {
display: none;
}

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function()
{

$("#trigger").click(function(event) {
event.preventDefault();
$("#box").slideToggle();
});

$("#box a").click(function(event) {
event.preventDefault();
$("#box").slideUp();
});
});
</script>


<a href="#" id="trigger">TRIGGER</a>

<div id="box">
<a href="#" class="close">[x]</a>
My content here
</div>