Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Dynamic generation of checkbox

 
Kunal Lakhani
Ranch Hand
Posts: 622
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 Lakhani
Ranch Hand
Posts: 622
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64631
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
     
    Bear Bibeault
    Author and ninkuma
    Marshal
    Pie
    Posts: 64631
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 622
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 64631
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    I don't know -- I only glanced at it. Post the refactored code if you have further difficulties with this.
     
    Kunal Lakhani
    Ranch Hand
    Posts: 622
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    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
    Pie
    Posts: 64631
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 622
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 64631
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Not quite: $(document.createElement('input') should simply be $("<input>")
     
    Bear Bibeault
    Author and ninkuma
    Marshal
    Pie
    Posts: 64631
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    .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
    Posts: 622
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 64631
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    The variables should work fine if they contain valid values.

    P.S. I hate the leading commas in the formatting.
     
    Kunal Lakhani
    Ranch Hand
    Posts: 622
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 64631
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 622
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Okay. Thanks Bear
     
    • Post Reply
    • Bookmark Topic Watch Topic
    • New Topic