25 Replies Latest reply on Mar 25, 2009 6:23 PM by Günter Schenk

    Comma Separate checkbox help

      is there a way that instead of the text or title of an item made with the Comma Separate checkbox i could display a picture of the item? <br /> <br />Example i was trying to edit the js for it to have a field called wdg:picturefield but with no luck is there any easy way to do it or how could i edit it that when i insert the wgd it looks something like this <br /> <br /> <form> <input name="idItemNeed_&lt;?php echo $cnt1; ?&gt;" id="idItemNeed_&lt;?php echo $cnt1; ?&gt;" value="<?php echo KT_escapeAttribute($row_rsvaultneed['idItemNeed']); ?>" size="32" maxlength="255" wdg:recordset="vaultis" wdg:subtype="CommaCheckboxes" wdg:type="widget" wdg:displayfield="vaultItem" wdg:valuefield="idVault" wdg:picturefield="filename" wdg:groupby="7" /> </form>
        • 1. Re: Comma Separate checkbox help
          Günter Schenk Level 4
          Hi Miguel,

          that´s an absolutely interesting idea !

          -------
          Example i was trying to edit the js for it
          -------

          guess you found out that you´ll have to patch the file "includes/wdg/classes/CommaCheckboxes.js", and that you´ll assumingly have to add another utility.dom.createElement("IMG") method in here that´s tied to the value of your custom wdg:picturefield attribute.

          what changes did you make so far ?

          Cheers,
          Günter Schenk
          Adobe Community Expert, Dreamweaver
          • 2. Re: Comma Separate checkbox help
            Level 1
            so far i did a bunch of changes but have ctrl+z back to original right now i have an extra line (this.img = WDG_getAttributeNS(this.input, 'img');) and thinking what to do after your replay i have no idea how to add an img scr=path/file into the utility.dom.createElement("IMG") i gues it has to go somewhere after lbl = utility.dom.createElement("LABEL", { ill keep trying but kinf of frustrated.

            this.recordset = new JSRecordset(WDG_getAttributeNS(this.input, 'recordset'));
            this.valuefield = WDG_getAttributeNS(this.input, 'valuefield');
            this.displayfield = WDG_getAttributeNS(this.input, 'displayfield');
            this.img = WDG_getAttributeNS(this.input, 'img');
            var group = WDG_getAttributeNS(this.input, 'groupby');
            • 3. Re: Comma Separate checkbox help
              Level 1
              i now have like this but it got worse now not even displaying the checkboxs

              var cb = utility.dom.createElement("INPUT", {
              "type" : "checkbox",
              "id" : this.name +"_commacheckbox" + cbCounter,
              "value": this.recordset.Fields(this.valuefield)
              });
              //changes
              curCell.appendChild(lbl);

              lbx = utility.dom.createElement("IMG", {
              "src" : "image/vault/" + imgx,
              "htmlFor": this.recordset.Fields(this.imgx)
              });
              // end changes
              • 4. Re: Comma Separate checkbox help
                Albert S. Level 3
                Hi Miguel and Gunter,

                I'm going to add something but keep in mind I have little to no knowledge about JS.

                So this is purely me messing around. the only reason I am showing it is because I did get the images to show with the checkbox.

                CommaCheckboxes.js

                Lines 107 to 111
                lbl = utility.dom.createElement("LABEL", {
                "id" : this.name +"_label" + cbCounter,
                "htmlFor" : this.name +"_commacheckbox" + cbCounter
                });
                curCell.appendChild(lbl);

                I replaced with:
                lbl = utility.dom.createElement("IMG", {
                "src" : this.recordset.Fields(this.xtrafield)
                });
                curCell.appendChild(lbl);

                I added this line underneath line 39
                this.xtrafield = WDG_getAttributeNS(this.input, 'xtrafield');

                Form Page (input field)
                And added this to the input
                wdg:xtrafield="field_name_in_db_that_holds_picturename"

                ###

                I have no idea what this will do as far as the form functioning but it does display image and checkbox.

                This may be a waste, I'm just surprised it worked haha.
                • 5. Re: Comma Separate checkbox help
                  Albert S. Level 3
                  To further mess around...

                  I see you want to have it pull from specific folder. If I house the folder structure in the db I can do something like.

                  Add this to form:
                  wdg:folderfield="folderfield_in_db"

                  Then add this to CommaCheckboxes.js

                  After line 39
                  this.folderfield = WDG_getAttributeNS(this.input, 'folderfield');

                  Then change dom element to:
                  lbl = utility.dom.createElement("IMG", {
                  "src" : this.recordset.Fields(this.folderfield) + this.recordset.Fields(this.xtrafield)
                  });
                  curCell.appendChild(lbl);

                  ###
                  This works in Firefox but totally breaks in IE. I'll see if I can get it to work IE.
                  • 6. Re: Comma Separate checkbox help
                    Level 1
                    thanks nice it displays the pictures for me on firefox but not the checkboxs on IE it gives a javascript error and doesnt load the rest of the page
                    • 7. Re: Comma Separate checkbox help
                      Albert S. Level 3
                      You don't see checkboxes and images in Firefox? I see both in Firefox.
                      • 8. Re: Comma Separate checkbox help
                        Level 1
                        i see the pictures but the check box are gone o and i added the path this way cause ill be only using it for this part

                        "src" : "image/folder/" + this.recordset.Fields(this.xtrafield)
                        • 9. Re: Comma Separate checkbox help
                          Albert S. Level 3
                          Sorry for the wasted time. I will mess around with it for a little, if I get something concrete working I will post it. I don't want you to waste your time.
                          • 10. Re: Comma Separate checkbox help
                            Level 1
                            No man thanks a lot its not a waste of time, it was a pretty close attempt and with it im also trying to figure out but with a more solid information thanks to you if i get it to ill be posting it to
                            • 11. Re: Comma Separate checkbox help
                              Level 1
                              Günter any idea from what albert posted, if you try it its a pretty close one, hope Günter gives us the light ;)
                              • 12. Re: Comma Separate checkbox help
                                Albert S. Level 3
                                Ok here we go...

                                lbl = utility.dom.createElement("LABEL", {
                                "id" : this.name +"_label" + cbCounter,
                                "htmlFor" : this.name +"_commacheckbox" + cbCounter
                                });
                                curCell.appendChild(lbl);

                                img = utility.dom.createElement("IMG", {
                                "src" : this.recordset.Fields(this.xtrafield)
                                });
                                curCell.appendChild(img);

                                var cb = utility.dom.createElement("INPUT", {
                                "type" : "checkbox",
                                "id" : this.name +"_commacheckbox" + cbCounter,
                                "value": this.recordset.Fields(this.valuefield)
                                });

                                Try that, let me know. I await your response.
                                • 13. Re: Comma Separate checkbox help
                                  Günter Schenk Level 4
                                  Hi guys,

                                  what an interesting discussion ;-)

                                  However I really can´t suggest to modify the CommaCheckboxes.js file at all, because the default functionality (incl. the LABEL element, who knows what it´s good for) is certainly needed in a regular context, and I assume that a standard CommaSeparated checbox control that doesn´t have this additional custom wdg:picturefield="filename" attribute will break the script badly.

                                  What I´d do in this case, is to save the original file as e.g. "CommaCheckboxesWithImages.js", make all modifications to this one, and finally include this file in the document that needs it.

                                  Cheers,
                                  Günter Schenk
                                  Adobe Community Expert, Dreamweaver
                                  • 14. Re: Comma Separate checkbox help
                                    Level 1
                                    ok got it but have the title next to the image but well this is what i changed Albert o i see u got the same idea i just did

                                    lbl = utility.dom.createElement("LABEL", {
                                    "id" : this.name +"_label" + cbCounter,
                                    "htmlFor" : this.name +"_commacheckbox" + cbCounter
                                    });
                                    curCell.appendChild(lbl);

                                    var cb = utility.dom.createElement("INPUT", {
                                    "type" : "checkbox",
                                    "id": this.name +"_commacheckbox" + cbCounter,
                                    "value": this.recordset.Fields(this.valuefield)
                                    });

                                    var xb = utility.dom.createElement("IMG", {
                                    "src" : "image/vault/" + this.recordset.Fields(this.xtrafield)
                                    });

                                    lbl.appendChild(cb);
                                    lbl.appendChild(xb);
                                    lbl.innerHTML += this.recordset.Fields(this.displayfield);
                                    • 15. Re: Comma Separate checkbox help
                                      Albert S. Level 3
                                      Hi Günter,

                                      I added the LABEL back and fixed the IE error. I do agree with you that it should be added as a seperate JS file included in the page and to leave the initial CommaCheckboxes.js intact. I am curious to see if it works in for both of you as it does for me. And most importantly does it work for normal form operations?
                                      • 16. Re: Comma Separate checkbox help
                                        Günter Schenk Level 4
                                        I wonder if this:

                                        "src" : "image/vault/" + this.recordset.Fields(this.xtrafield)

                                        ...isn´t far too inflexible on the long run, because the image path will always be relative to the document which displays the extended Dynamic Checkboxes.

                                        Instead of hardcoding the path in here I´d rather suggest to implement yet another custom attribute, say, wdg:picturepath"../../foldername" and use this one as additional variable in the modified script.

                                        Cheers,
                                        Günter Schenk
                                        Adobe Community Expert, Dreamweaver
                                        • 17. Re: Comma Separate checkbox help
                                          Albert S. Level 3
                                          This is the output I am getting from the DOM:

                                          [label id="textfield_label0" htmlfor="textfield_commacheckbox0" for="textfield_commacheckbox0"]
                                          [input id="textfield_commacheckbox0" type="checkbox" value="1" cbFor="textfield"]
                                          Here
                                          [/label]
                                          [img src="107O0053B Instinct 17.5X23.5.jpg"/]

                                          I think were in good shape.

                                          [Günter sez: had to edit this post by replacing < with [ and > with ], otherwise the web forums think it´s something it should display as HTML contents]
                                          • 18. Re: Comma Separate checkbox help
                                            Albert S. Level 3
                                            Yes Günter you are correct it needs to be flexible for future.

                                            I addressed that in post #5
                                            • 19. Re: Comma Separate checkbox help
                                              Level 1
                                              works good both methods, i just try both of them making it a var and the one to declare img = both work nice :) i also tested inserting data en the database, it did it without problems
                                              • 20. Re: Comma Separate checkbox help
                                                Albert S. Level 3
                                                It's great to be able to bounce ideas and code with you guys, LOVE IT!!! haha
                                                • 21. Re: Comma Separate checkbox help
                                                  Level 1
                                                  Thanks Albert for that great help without it i would be using the horrible text check boxes lol
                                                  • 22. Re: Comma Separate checkbox help
                                                    Günter Schenk Level 4
                                                    Guys,

                                                    I´m so proud of you :-)

                                                    Cheers,
                                                    Günter Schenk
                                                    Adobe Community Expert, Dreamweaver
                                                    • 23. Re: Comma Separate checkbox help
                                                      Albert S. Level 3
                                                      The funny thing is, IS I know so little about working with JS and DOM.

                                                      ###
                                                      I´m so proud of you :)
                                                      ###

                                                      Thanks Günter, (fart) ;)
                                                      We couldn't do it without you.

                                                      Thanks for fixing the brackets to.
                                                      • 24. Re: Comma Separate checkbox help
                                                        Albert S. Level 3
                                                        Hi Miguel,

                                                        I'm glad that it is working for you. It was a nice challenge for me just to see if I could make something actually work. :)
                                                        • 25. Re: Comma Separate checkbox help
                                                          Günter Schenk Level 4
                                                          -------
                                                          Thanks Günter,
                                                          We couldn't do it without you
                                                          -------

                                                          Well, all I fortunately had to do was providing a vague utility.dom.createElement("IMG") - pointer and then watch you guys doing the dirty work :-)

                                                          Cheers,
                                                          Günter Schenk
                                                          Adobe Community Expert, Dreamweaver