Forum:

HTML Pages with CSS and JavaScript

Need help with Jquery

Ranch Hand

Posts: 182

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi

So I started to practice jquery but am having a touch time to actually do something with it.

I don't know if maybe I should be doing some more tutorials first or if the way I am approaching this right.

What I am trying to do is this: Make 6 checkboxes dynamically through C# code and display them on a page. Once I done this I want to try to take the first checkbox and write some javascript code to check the other 5 checkboxes.

First though I am trying to just see how many checkboxes are check when I click on my button.

Here is my code:

default.aspx + javascript code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="javascript._Default" %>
 
<!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 runat="server">
    <title></title>
 
 
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
 
    <script src="jQuery.intellisense.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function()
        {
            function checkCount()
            {
                var howmany = $("checkbox:checked").length;
                $('div:nth-child(2)').appendTo(howmany);
            }
            $('Button').bind('click', checkCount());
 
 
        });
            
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp  :-P	  laceHolder ID="PlaceHolder1" runat="server"></asp  :-P	  laceHolder>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    <div>
    
    </div>
 
    </form>
</body>
</html>

C# codebehind code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace javascript
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Table newTable = new Table();
            TableRow newRow = new TableRow();
 
            CheckBox selectRow = new CheckBox();
            selectRow.ID = "selectRow";
 
            PlaceHolder1.Controls.Add(selectRow);
 
            for (int i = 0; i < 5; i++)
            {
               
                CheckBox newCheckbox = new CheckBox();
 
                newCheckbox.ID = i.ToString();
 
                TableCell newCell = new TableCell();
 
                newCell.Controls.Add(newCheckbox);
 
                
                newRow.Cells.Add(newCell);
                
 
            }
            newTable.Rows.Add(newRow);
 
            PlaceHolder1.Controls.Add(newTable);
            
          
        }
    }
}

My hopes once I get all this working is to send all the checked boxes back to the server so I can do stuff to the checked ones. I don't even know where to begin on this one either but I first have to get there.

Thanks
[ June 09, 2008: Message edited by: Bear Bibeault ]

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I see no checkboxes in your code. I know that the ASP code will put them there, but this is an HTML forum. Please post the code after it has been processed so that the actuall HTML that is sent to the browser can be inspected.

Also, please be sure to disable smilies when posting code so that your code stops sticking its tongue out at people.

You are attempting to append checkboxes to a numeric value? Did you mean to use append()? Even so, you can only attach elements to the DOM, not numeric values. What are you really trying to accomplish?

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Michael Hubele

Ranch Hand

Posts: 182

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Bear Bibeault:
I see no checkboxes in your code. I know that the ASP code will put them there, but this is an HTML forum. Please post the code after it has been processed so that the actuall HTML that is sent to the browser can be inspected.

Also, please be sure to disable smilies when posting code so that your code stops sticking its tongue out at people.

var howmany = $("checkbox:checked").length; $('div:nth-child(2)').appendTo(howmany);
You are attempting to append checkboxes to a numeric value? Did you mean to use append()? Even so, you can only attach elements to the DOM, not numeric values. What are you really trying to accomplish?

I am not sure what you mean with "your are attempting to append checkboxes to a numeric value?"

What I am trying to do is get the number of checkboxes that are checked and display them.

I have tried another version I am not sure this is any better.

Also here is the generated code:

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am not sure what you mean with "your are attempting to append checkboxes to a numeric value?"

The code you posted attempts to do just that.

What I am trying to do is get the number of checkboxes that are checked and display them.

Ah, try something like:

$('#targetDiv').html(someValue);

appendTo() is used to add DOM elements to the DOM -- not to set inner values.

[Asking smart questions] [About Bear] [Books by Bear]

Michael Hubele

Ranch Hand

Posts: 182

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Bear Bibeault:

appendTo() is used to add DOM elements to the DOM -- not to set inner values.

I am not sure what you mean. Could you give me some examples?

I figured out why I am not seeing anything. It was the hacked file that I use to get vs2008 to show intellisense. I had to make it hide on run time.

I also changed the asp button to a regular input button because the asp.net button kept posting back after it did something.

It still does not work a 100% though. I can check all the checkboxes and I still will get a count of zero.

Here is my updated code for the default.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="javascript._Default" %>
 
<!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 runat="server">
    <title></title>
 
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
 
    <asp:PlaceHolder runat="server" visible="false">
        <script type="text/javascript" src="JQuery.Intellisense.js" ></script>
    </asp:PlaceHolder>
    
    <script type="text/javascript" >
        $(function()
        {
            $("a").click(function()
            {
                alert("Hello world!");
            });
 
            $("#button1").bind("click", function(event)
            {
                
                count();
                
            });
        });
 
        function count()
        {
            var howmany = $("checkbox:checked").length;
            alert(howmany);
            $("#targetDiv").html(howmany);
        }
 
</script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
        <input type="button" value="test" id="button1" />
        <a href="" > link</a>
    </div>
    <div id="targetDiv"></div>
    </form>
</body>
</html>

Generated code:

<!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>
 
</title>
 
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
 
    
    
    <script type="text/javascript" >
        $(function()
        {
            $("a").click(function()
            {
                alert("Hello world!");
            });
 
            $("#button1").bind("click", function(event)
            {
                
                count();
                
            });
        });
 
        function count()
        {
            var howmany = $("checkbox:checked").length;
            alert(howmany);
            $("#targetDiv").html(howmany);
        }
 
</script>
    
</head>
 
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMTg1MzQ2OTZkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYGBQlzZWxlY3RSb3cFATAFATEFATIFATMFATR1RxWzQoGZMdTeCZHvixaWeb/xeQ==" />
</div>
 
    <div>
        <input id="selectRow" type="checkbox" name="selectRow" /><table border="0">
<tr>
<td><input id="0" type="checkbox" name="0" /></td><td><input id="1" type="checkbox" name="1" /></td><td><input id="2" type="checkbox" name="2" /></td><td><input id="3" type="checkbox" name="3" /></td><td><input id="4" type="checkbox" name="4" /></td>
</tr>
 
</table>
        <input type="button" value="test" id="button1" />
        <a href="" > link</a>
    </div>
    <div id="targetDiv"></div>
    
<div>
 
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwLXxJ6YDAKAvYOvAwKQ76ruDAKP76ruDAKO76ruDAKN76ruDAKM76ruDHLjVuEF6H1ztgO306plEIxpJzH9" />
</div></form>
 
</body>
</html>

So I am not sure why its not showing up yet.

Also I don't get this line.

$("#targetDiv").html(howmany);

This does not show up. Even though the method comes back with zero. I got to
do something like $("#targetDiv").html(howmany + "work"); and then I get 0work.

What up with that?

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This statement:

will give you the count of checked checkboxes on the page. If you are finding other results you'll need to pare down your example to the simplest HTML page that shows the problem so that it an be diagnosed.

This does not show up. Even though the method comes back with zero. I got to
do something like $("#targetDiv").html(howmany + "work"); and then I get 0work.

What up with that?

Works fine for me as evidenced by this test page:

[Asking smart questions] [About Bear] [Books by Bear]

Michael Hubele

Ranch Hand

Posts: 182

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Bear Bibeault:
This statement:
var howmany = $("checkbox:checked").length;
will give you the count of checked checkboxes on the page. If you are finding other results you'll need to pare down your example to the simplest HTML page that shows the problem so that it an be diagnosed.

Works fine for me as evidenced by this test page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery html() test</title> <script type="text/javascript" src="scripts/jquery-1.2.3.js"></script> <script type="text/javascript"> $(function(){ $('#targetDiv').html(6); }); </script> </head> <body> <div id="targetDiv"></div> </body> </html>

When I setup my function to be like this

function count()
{
var howmany = $(":checkbox:checked").length;
$("#targetDiv").html(0);
}

I don't see anything.

Also whats the difference between .click and .bind? Why would you use .bind to setup the stuff when they got stuff like .click?

Also I seen people use function(event)-This is what I am using but whats the purpose of this. It seems like I don't need to actually pass the event in.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Michael Hubele:
I don't see anything.

I can't think of any reason that it shouldn't work -- assuming that an element with id of targetDiv exists at the time of execution.

Did you try the test page? When something doesn't work as you expect, trying a simple test will tell you if the function really doesn't work, or if it's something in your page environment.

Also whats the difference between .click and .bind?

.click() is a shortcut for bind('click').

Why would you use .bind to setup the stuff when they got stuff like .click?

Shortcuts don't exist for all event types -- only the most-often used ones.

Also I seen people use function(event)-This is what I am using but whats the purpose of this. It seems like I don't need to actually pass the event in.

The event instance is passed to all listeners as its parameter. If you are not going to reference the instance, there's no need to declare it.
[ June 09, 2008: Message edited by: Bear Bibeault ]

[Asking smart questions] [About Bear] [Books by Bear]

Michael Hubele

Ranch Hand

Posts: 182

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Bear Bibeault:
The event instance is passed to all listeners as its parameter. If you are not going to reference the instance, there's no need to declare it.

[ June 09, 2008: Message edited by: Bear Bibeault ]

I am not sure what you mean with this one.

I am not sure why it does not work either. Like I know it is going into that method since it does work. I can put $("#targetDiv").html(10); and it will show up. But if I put $("#targetDiv").html(0); It won't show up.

Also is the jquery site up for you(like the tutorial or documentation pages?)

Since I get always "file not found" been getting this for the last hour.

So can't really look up how I would proceed with my next step.

I now want to take my first checkbox(the one with the id="selectrow") and once thats clicked I want to check all the other 5 boxes.

So I am not sure what I could use to archive this.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Michael Hubele:
I am not sure what you mean with this one.

When an event listener is invoked, it is passed a single parameter that is a normalized instance of Event. If you declare the event parameter, that will give you access to the instance. If you're not going to use it, you can leave it off or put it on. Doesn't matter. That's a JavaScript thing, not a jQuery thing.

I am not sure why it does not work either. Like I know it is going into that method since it does work. I can put $("#targetDiv").html(10); and it will show up. But if I put $("#targetDiv").html(0); It won't show up.

Dude, you're right! I didn't try zero. it seems to work fine with any other numeric value. Let me see if I can find out what's up with that..

Also is the jquery site up for you(like the tutorial or documentation pages?)

Yup. http://docs.jquery.com/Main_Page is working fine for me.

I now want to take my first checkbox(the one with the id="selectrow") and once thats clicked I want to check all the other 5 boxes.

Perhaps something like:

You didn;t say you wanted to uncheck them all in lock-step so it doesn't do that.

So I am not sure what I could use to archive this.

Not sure what you mean by "archive this".
[ June 09, 2008: Message edited by: Bear Bibeault ]

[Asking smart questions] [About Bear] [Books by Bear]

Michael Hubele

Ranch Hand

Posts: 182

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Dude, you're right! I didn't try zero. it seems to work fine with any other numeric value. Let me see if I can find out what's up with that..

Ya its really weird. Like if you would put something after the 0 like a word the zero and the word will display.

Yup. http://docs.jquery.com/Main_Page is working fine for me.

Cool it seems to be working again.

$('#firstCheckbox').click(function(){
if ($(this).attr('checked')) $(':checkbox').attr('checked',true);
});

This works great. See I am still to noobish I would have never figured out that I could first find all checkboxs and then use a chain to switch them to true.

You didn;t say you wanted to uncheck them all in lock-step so it doesn't do that.

ya I forgot to mention that however I just took what you did and switched it around a bit.

So I got this

Now I need to somehow make group these checkboxes into groups. Since I am going to have quite a bit of rows of 6 checkboxes(with out being the select that row checkbox).

So does jquery have away to group them together? Like I know in C# I could have make a checkbox list(and I guess then with CSS change it to be a list vertically). However that won't cut it for me. Since ontop of each of these checkboxes I am going to have a image above it. So a checkbox list is too close together for me to use. Thats why I have to use individual ones.

Thanks so far for all your help. Stuff is making alot more sense but I know I am going to have alot more questions.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Michael Hubele:
Ya its really weird. Like if you would put something after the 0 like a word the zero and the word will display.

That converts it to a string, which displays fine. The string '0' displays as well. it's just the numeral 0 that is a problem, which makes me believe that it's being misinterpreted as false somewhere in the jQuery code.

Now I need to somehow make group these checkboxes into groups. Since I am going to have quite a bit of rows of 6 checkboxes(with out being the select that row checkbox).
So does jquery have away to group them together?

Yup. Remember that jQuery selectors follow CSS rules. So if you place the "group" in a container (a <div> for example, or any other appropriate container), you can use the id of the div to limit the selection of the checkboxes:

(note that space is significant)

Thanks so far for all your help. Stuff is making alot more sense but I know I am going to have alot more questions.

We'll be here. You could also pick up a good book on the subject... (whistles innocently)

[ June 09, 2008: Message edited by: Bear Bibeault ]

[Asking smart questions] [About Bear] [Books by Bear]

Michael Hubele

Ranch Hand

Posts: 182

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Bear Bibeault:
We'll be here. You could also pick up a good book on the subject... (whistles innocently)

[ June 09, 2008: Message edited by: Bear Bibeault ]

$('#containerOne :checkbox')

I did this

$('tr#firstRow > td > input :checkbox').attr('checked', true);

So basically instead of trying to figure out how to wrap each row in a container like a div I just gave the row a ID. This did not work so I tried this.

$('tr#firstRow > td > input:checkbox').attr('checked', true);

and it worked. So I thought you needed a space.

We'll be here. You could also pick up a good book on the subject... (whistles innocently)

I thought your name looked familiar. Yes I like your book(thats where I got the idea of using the > then sign.) I love your chapter 2 selector tool very much. I am actually wondering is there a full tool like this on the web? Where you insert your own html and do selectors on it(sort of like the xpath tools out there?).

I skimmed the book for a big overview of jquery and now I am going back and reading it in more detail but like most computer books I don't remember much of the content or how to use it till I make my own project up and go through it(like I am doing now). Lots of the stuff is making alot more sense now.

Now before I ask my next set of questions I want to let you know where I am going with this.

My current version of the site(http://www.interactivejapanese.com/PracticeQuiz.aspx)

I have a site that teaches people basic Japanese through the use of flash cards.

Currently I have a database with all the Japanese character names and a link of the image that shows the character.

I make a table with this information on it(dynamically through C# code). So you basically get alot of rows of 6(first one being select entire row) and the rest just single textboxes. One top of the remaining checkboxes are the pictures.

You then go abouts and choose what you want. This information would then get sent back to the server and I would check for all checked boxes. I would then grab the ID's of all checked boxes. I do this because the ID's are like this chk_a where "a" is the answer. So basicly the ID's contain the answer.

I then send the user to a new page where I have a Image box and textbox with a button. A image is randomly choosen and the user try's to guess at it. Since in the process of setting up the quiz my code makes sure that the image path and the ID are all together. So they where stored in the same array.

The user then keep going through the quiz till the repetitions hit zero.

Now what I want my new site to do.

Since at the time of my first site I was in the process of learning asp.net and C# so I tried to avoid the use of javascrip and ajax at all costs. So when I did the check the entire row. Well I used the regualar asp.net checkbox that caused a postback. I then put a update panel around that table so when that happens the user is fooled into thinking there was no post back. Of course it is slow. The same goes with when they do the acutal quiz. Every time they type in a guess it goes back to the server to check.

So what I want to do is I am making this whole section in javascript now to speed up everything.

This is what I am now trying to figure out.

1. How to make a row of checkboxes to be selected.(done).
2. How to figure out how to make each row unquie from each other so the wrong rows are not selected.(done)
3. How to make number 2 work dyanmically. Like I going to have 6 with the largest having a 11 rows on it. I don't think it would be wise to hard code each of these rows with the same code.(Currently working on).
4. How to grab the picture url and checkbox ID and group them together for use on the quiz part.(not currently done or thought about).
5. Currently in my old version I got a Javascrpit accordion and all the tables load up at once and are hidden with the accordion. I now wnat to have 6 links on the top of the page. When a link is clicked that link is bolded to show that it is choosen. It then loads up in the remaing area the apporprate table is then display. So this will be ajax that will have to grab database values and make the table. Also then try to cahce it. (not currrently done or thought about)

6. I am guessing that I won't be having a seperate page now for the actual quiz since I don't know/think you can transfer data from on page to another page in javascript. So I guess I will have it all in the same page and all the stuff in that container would get clearned and then the new stuff would posp up.

7. Do the quiz portion of the javascript.

So as you can see I got a lot of work cut out for myself but hopefully with the help of this fourm I will be able to achive each of these steps. Once I done this I should be able to tackle quite a bit of problems on my own in javascript.

So now that you know where I am at lets get this fun started lol.

As I mentioned I am on step 3. I not sure how to do this. I pretty sure I am going to have to pass in a value into a function as a parameter that would contain the "select rows ID".

Like this is how I see it.

function check(ID)
{

$(this.ID).bind("click,function(event)
{

if ($(this).attr('checked'))
{
$('tr#firstRow > td > input:checkbox').attr('checked', true);
}
else
{
$('tr#firstRow > td input:checkbox').attr('checked', false);
}

});

}

Not sure if you can do something like that and I am not sure again how to actually pass a value in to the parameter.

Sorry for the long post. Just wanted to give you a idea of where I am heading since right now this all probably seemed pretty random what I was trying to do.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Michael Hubele:
I love your chapter 2 selector tool very much. I am actually wondering is there a full tool like this on the web? Where you insert your own html and do selectors on it

You should be able to copy that Lab Page and plug your own HTML into it fairly easily.

I'll look over the rest of your post later today...

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

$('tr#firstRow > td > input:checkbox').attr('checked', true);

and it worked. So I thought you needed a space.

The space indicates descendency. So in my example, where the checkbox was searched for as a child of some container, the space is required. In your example, you are using the > to indicate direct parentage.

In input:checkbox the lack of a space indicates an input that is a checkbox, versus in div :checkbox (with space) which indicates a checkbox that is in a <div>.
[ June 10, 2008: Message edited by: Bear Bibeault ]

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Going forward, it'll probably be best to post each new question in its own topic (rather than letting this one ramble on and on). Also be sure to use UBB code tags when posting code to preserve its formatting and indentation.

Your project sounds really interesting and challenging, but I think your making good progress.

[Asking smart questions] [About Bear] [Books by Bear]

Michael Hubele

Ranch Hand

Posts: 182

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by Bear Bibeault:
Going forward, it'll probably be best to post each new question in its own topic (rather than letting this one ramble on and on). Also be sure to use UBB code tags when posting code to preserve its formatting and indentation.

Your project sounds really interesting and challenging, but I think your making good progress.

Ya I think that would be a good idea too. I will start a new topic for my new problem now.

What I don't understand is how they changed the earth's orbit to fit the metric calendar. Tiny ad:

Smokeless wood heat with a rocket mass heater

https://woodheat.net