We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 28042 ☆ A M B ☆
    • 24,524 Posts
    Quote from: spacefish at Sep 28, 2010, 04:23 PM

    I’ve used the code as it was provided. I’d really like to have the image posting working but it isn’t happening and I’ve spent (literally) days searching the forums trying to find alternative solutions. If anyone has this working could you provide some pointers about what I should look at changing to get it working.
    The id attribute of the html input element has to be specified in the javascript as described. The javascript has a function
    function SetUrl(url, width, height, alt){
        document.getElementById('wtImage'+window.notesId).value = url;
    }
    

    The ’wtImage+window.notesId’ part must match the id in the form field:
    id="wtImage[+notes.id+]"

    Th notesId value is passed as a parameter in the onclick event in the form
    onclick="BrowseServer('[+notes.id+]')"

    so that it can be added to the Javascript "windows" global array for use in the SetUrl function.
      Studying MODX in the desert - http://sottwell.com
      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
      Join the Slack Community - http://modx.org
      • 28100
      • 66 Posts
      So if I haven’t changed anything from the stock notes you posted, it should work? huh

      I have: BrowseServer(’d14268e04981565edc66530df8b9e64b’)
      And: input id="wtImaged14268e04981565edc66530df8b9e64b"


      IMO it should work ... but then javascript has always been a bit like voodoo for me. rolleyes
        • 28042 ☆ A M B ☆
        • 24,524 Posts
        Yes, it should work... I’ve installed it several times on different servers and it always "just works". It’s voodoo to me too, I hate working with Javascript; I mostly just copy/pasted from how TVs do it, with a few trial-and-error additions to adapt it to Jot/Notes.
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 28100
          • 66 Posts
          I’ve installed it on my Mac (Xampp) and on shared hosting and it doesn’t work for either which is a bit sad.

          Does the comments template also need to be edited for the image? I have tried but I’ve either got that wrong (numerous variations) or it isn’t needed. My current rendition is showing the following in the resulting HTML: <img src="">

          The other possibility is, if TinyMCE has a bug will this have an effect?
            • 28042 ☆ A M B ☆
            • 24,524 Posts
            Ok, going over things I see where the javascript needs editing for each installation.

            Here is the form tpl I used (it’s modified from the default as little as possible):
            <a name="jf[+notes.link.id+]"></a>
            <h2>[+form.edit:is=`1`:then=`Edit Note`:else=`Add a Note`+]</h2>
            <div class="notes-list">
            <ul>
                <li>Required fields are marked with <b>*</b>.</li>
            </ul>
            </div>
            [+form.error:isnt=`0`:then=`
            <div class="notes-err">
            [+form.error:select=`
            &-3=You are trying to re-submit the same post. You have probably clicked the submit button more than once.
            &-2=Your post has been rejected.
            &-1=Your post has been saved, it will first be reviewed before it is published.
            &1=You are trying to re-submit the same post. You have probably clicked the submit button more than once.
            &2=The security code you entered was incorrect.
            &3=You can only post once each [+notes.postdelay+] seconds.
            &4=Your post has been rejected.
            &5=[+form.errormsg:ifempty=`You didn't enter all the required fields`+]
            `+]
            </div>
            `:strip+]
            [+form.confirm:isnt=`0`:then=`
            <div class="notes-cfm">
            [+form.confirm:select=`
            &1=Your post has been published.
            &2=Your post has been saved, it will first be reviewed before it is published.
            &3=post saved.
            `+]
            </div>
            `:strip+]
            <form method="post" action="[+form.action:esc+]#jf[+notes.link.id+]" class="notes-form">
                <fieldset>
                <input name="NotesForm" type="hidden" value="[+notes.id+]" />
                <input name="NotesNow" type="hidden" value="[+notes.seed+]" />
                <input name="parent" type="hidden" value="[+form.field.parent+]" />
                
                [+form.moderation:is=`1`:then=`
                    <div class="notes-row">
                        <b>Created on:</b> [+form.field.createdon:date=`%a %B %d, %Y at %H:%M`+]<br />
                        <b>Created by:</b> [+form.field.createdby:userinfo=`username`:ifempty=`[+notes.guestname+]`+]<br />
                        <b>IP address:</b> [+form.field.secip+]<br />
                        <b>Published:</b> [+form.field.published:select=`0=No&1=Yes`+]<br />
                        [+form.field.publishedon:gt=`0`:then=`
                            <b>Published on:</b> [+form.field.publishedon:date=`%a %B %d, %Y at %H:%M`+]<br />
                            <b>Published by:</b> [+form.field.publishedby:userinfo=`username`:ifempty=` - `+]<br />
                        `+]
                        [+form.field.editedon:gt=`0`:then=`
                            <b>Edited on:</b> [+form.field.editedon:date=`%a %B %d, %Y at %H:%M`+]<br />
                            <b>Edited by:</b> [+form.field.editedby:userinfo=`username`:ifempty=` -`+]<br />
                        `+]
                    </div>
                `:strip+]
                
                [+form.guest:is=`1`:then=`
                    <label for="name[+notes.id+]">Name:<br />
                    <input tabindex="[+notes.seed:math=`?+1`+]" name="name" type="text" size="40" value="[+form.field.custom.name:esc+]" id="name[+notes.id+]" />
                    </label>
                    <label for="email[+notes.id+]">Email:<br />
                    <input tabindex="[+notes.seed:math=`?+2`+]" name="email" type="text" size="40" value="[+form.field.custom.email:esc+]" id="email[+notes.id+]"/>
                    </label>
                `:strip+]
                
                <label for="title[+notes.id+]">Subject:<br />
                <input tabindex="[+notes.seed:math=`?+3`+]" name="title" type="text" size="40" value="[+form.field.title:esc+]" id="title[+notes.id+]"/>
                </label>
                <label for="content[+notes.id+]">Comment: *<br />
                <textarea tabindex="[+notes.seed:math=`?+4`+]" name="content" cols="50" rows="8" id="content[+notes.id+]">[+form.field.content:esc+]</textarea>
                </label><br />
                
                            <label for="wtImage[+notes.id+]">Image:<br />
                        <input tabindex="[+notes.seed:math=`?+6`+]" name="image" type="text" size="20" value="[+form.field.custom.image:esc+]" id="wtImage[+notes.id+]" /><input type="button" value="Select Image" onclick="BrowseServer('[+notes.id+]')" />
                    </label><br />
            
                    <label for="category[+notes.id+]">Category: <br />
                    <select name="category" id="category[+notes.id+]">
                            <option value="One">One</option>
                            <option value="Two">Two</option>
                            <option value="Three">Three</option>
                    </select>
                    </label><br />
                
              [+notes.captcha:is=`1`:then=`
                    <div style="width:150px;margin-top: 5px;margin-bottom: 5px;"><a href="[+notes.link.current:esc+]"><img src="[(base_url)]manager/includes/veriword.php?rand=[+notes.seed+]" width="148" height="60" alt="If you have trouble reading the code, click on the code itself to generate a new random code." style="border: 1px solid #003399" /></a></div>
                    <label for="vericode[+notes.id+]">Help prevent spam - enter security code above:<br /><input type="text" name="vericode" style="width:150px;" size="20" id="vericode[+notes.id+]" /></label> 
                `:strip+]
                
                <div style="float:right;width: 100px;"></div>
                <input tabindex="[+notes.seed:math=`?+5`+]" name="submit" type="submit" value="[+form.edit:is=`1`:then=`Save Comment`:else=`Post Comment`+]" />
                [+form.edit:is=`1`:then=`
                    <input tabindex="[+notes.seed:math=`?+5`+]" name="submit" type="submit" value="Cancel" onclick="history.go(-1);return false;" />
                `+] 
                </fieldset>
            </form>

            The addition for the image field is
                
                            <label for="wtImage[+notes.id+]">Image:<br />
                        <input tabindex="[+notes.seed:math=`?+6`+]" name="image" type="text" size="20" value="[+form.field.custom.image:esc+]" id="wtImage[+notes.id+]" /><input type="button" value="Select Image" onclick="BrowseServer('[+notes.id+]')" />
                    </label><br />

            The javascript (at the bottom of the resource content in <script>...<script> tags along with the function for ordering):
            unction OpenServerBrowser(url, width, height ) {
                var iLeft = (screen.width  - width) / 2 ;
                var iTop  = (screen.height - height) / 2 ;
            
                var sOptions = 'toolbar=no,status=no,resizable=yes,dependent=yes' ;
                sOptions += ',width=' + width ;
                sOptions += ',height=' + height ;
                sOptions += ',left=' + iLeft ;
                sOptions += ',top=' + iTop ;
            
                var oWindow = window.open( url, 'FCKBrowseWindow', sOptions ) ;
            }           
            function BrowseServer(notesId) {
                window.notesId = notesId;
                var w = screen.width * 0.7;
                var h = screen.height * 0.7;
                OpenServerBrowser('/notes/manager/media/browser/mcpuk/browser.html?Type=images&Connector=/notes/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/Applications/MAMP/htdocs/notes/assets/', w, h);
            }
            
            function SetUrl(url, width, height, alt){
                document.getElementById('wtImage'+window.notesId).value = url;
            }
            

            The two parts that need attention are first the paths to the mcpuk browser; on my MAMP installation in a subdirectory:
               OpenServerBrowser('/notes/manager/media/browser/mcpuk/browser.html?Type=images&Connector=/notes/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/Applications/MAMP/htdocs/notes/assets/', w, h);

            Then the function for loading the selected image’s path into the form field:
            function SetUrl(url, width, height, alt){
                document.getElementById('wtImage'+window.notesId).value = url;
            }

            If you’ve uploaded an image, you still have to click on the image in the browser to have its path loaded into the form field.
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 28100
              • 66 Posts
              Still not working for me. But I have a prob with TinyMCE and wondered if it may be why Notes images isn’t working:
              http://modxcms.com/forums/index.php/topic,55081.0.html

              huh
                • 28042 ☆ A M B ☆
                • 24,524 Posts
                It probably is related then. There are a lot of little things that can go wrong; one thing I really hate about javascript applications is the lack of comprehensible error messages. Because it’s totally disconnected from the server (being executed by the browser) there are far too many opportunities for things to go wrong. I suppose a real js guru would have a better grasp of what is happening, but at best I’m a js dabbler.
                  Studying MODX in the desert - http://sottwell.com
                  Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                  Join the Slack Community - http://modx.org