wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Dynamic generation of checkbox Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Dynamic generation of checkbox" Watch "Dynamic generation of checkbox" New topic
Author

Dynamic generation of checkbox

Kunal Lakhani
Ranch Hand

Joined: Jun 05, 2010
Posts: 622
In my application, data is retrieved from database and then checkboxes are created dynamically. Following is the code


When the checkbox is checked/unchecked, it should call another function named "checkboxClicked" in the above code

Following the function code


Thus, if 4 checkboxes are created , their name would be myCheckbox0,myCheckbox1,myCheckbox2,myCheckbox3 respectively. This is implemented in the 1st code posted
Now, when the 2nd checkbox with id myCheckbox1 is checked , the checkboxClicked function is called. This function contains the parameter, which is passed as a var i. The function runs and It alerts the id, i.e myCheckbox1. However, it alert false.
This happens with all checkboxes. I need that if the checkbox is checked, it should alert true, and if unchecked, it should alert false.

What is wrong with my code?


kunal
Kunal Lakhani
Ranch Hand

Joined: Jun 05, 2010
Posts: 622
I spent last day watching my code and I still don't know what's wrong with my code
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

One thing that might help is to repost your code with proper indentation and formatting, The wonky formatting and too-deep indentation of what you have posted makes it hard to read.

Just glancing through the code, I see a number of problems. You are using jQuery for some things, and then you ignore it for others. A few things I'd refactor:
  • Don't build up HTML strings in text to create DOM elements; use jQuery's DOM methods.
  • Never use onclick (and other DOM Level 0 attributes) to establish event handlers; use jQuery event handling.

  • I'd suggest refactoring the code as above, and then if the problems persist, post back with neatly formatted code that is easy to read.


    [Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60740
        
      65

    Also, if you are still using alerts for debugging, you need to get familiar with the modern debugging consoles built into every modern browser. Otherwise it's like trying to fight a laser remote with the blast shield down -- and you can't use The Force.
    Kunal Lakhani
    Ranch Hand

    Joined: Jun 05, 2010
    Posts: 622
    Thanks Bear for your reply.

    Looking forward to Jquery's DOM methods & jQuery event handling.
    But, Still i wonder, what's wrong with the code i have posted?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60740
        
      65

    I don't know -- I only glanced at it. Post the refactored code if you have further difficulties with this.
    Kunal Lakhani
    Ranch Hand

    Joined: Jun 05, 2010
    Posts: 622

    Don't build up HTML strings in text to create DOM elements; use jQuery's DOM methods.
    Never use onclick (and other DOM Level 0 attributes) to establish event handlers; use jQuery event handling.


    Can you give a link where i can find these topics? Searching them in google, but not able to find a suitable one
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60740
        
      65

    The jQuery documentation is here.

    And, of course, there's my jQuery book: jQuery in Action (2nd Ed)

    For creating DOM elements, you can easily create them with code such as:


    Establishing a click handler:

    Kunal Lakhani
    Ranch Hand

    Joined: Jun 05, 2010
    Posts: 622
    I am looking into your book only


    I need to convert this




    This is what i tried



    If this is correct, well and good, else provide some guidance.

    Also, how can i include css style present in my code. I am looking into .css details
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60740
        
      65

    Not quite: $(document.createElement('input') should simply be $("<input>")
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60740
        
      65

    .css() is the correct way to add styles directly to the element; though I recommend applying styles via CSS rather than plunking it on the element.

    Kunal Lakhani
    Ranch Hand

    Joined: Jun 05, 2010
    Posts: 622
    Thanks Bear

    This is the whole piece of code


    Keeping in mind "name: checkName", checkName is a var type. similarly for id,value, top in .css.

    It works , but the looks & positions of textfields are changed.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60740
        
      65

    The variables should work fine if they contain valid values.

    P.S. I hate the leading commas in the formatting.
    Kunal Lakhani
    Ranch Hand

    Joined: Jun 05, 2010
    Posts: 622
    The variables are working fine, but, the look and design is changed now. I wish i could show you the screen shots
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60740
        
      65

    That's likely a matter of the CSS and the structure. The Chrome debugging console, in Element view, also has excellent tools for inspecting the CSS so you can find out exactly what was applied and where.

    Select an element in Element view, and the right pane will show you the computed CSS and where it came from. You can use that to debug any style issues.
    Kunal Lakhani
    Ranch Hand

    Joined: Jun 05, 2010
    Posts: 622
    Okay. Thanks Bear
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: Dynamic generation of checkbox
     
    Similar Threads
    Displaying alert message after submit in textbox
    How to get value from innerHTML
    toggle checkbox group when the max limit is reached
    Check All button for all spring check boxes array
    How to change the inner color of a CheckBox