We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 42562
    • 1,145 Posts
    Excellent work! solved many stones with one bird!
    Good job vacatoro.

    Now I can allow users to create a new Category or choose from an existing one.
    And since I use the same articlestags for a number of blogs, the tagLister parents is an absolute kill. It spits out only respective tags for this or that blog, and so eliminates chaos.
    In the npTagOuterTpl I use
    [[*id:is=`101` //NewsPublisers id
    :then=`[[!tagLister? &tv=`articlestags` &tpl=`npTagTpl` &parents=`201` //the actual blog
    &limit=`100`]]`]]
      TinymceWrapper: Complete back/frontend content solution.
      Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
      5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
      • 20135
      • 188 Posts
      Here's an update on vacatoro's code. I've adapted it to work with jquery ui's autocomplete (http://jqueryui.com/autocomplete/#multiple). This is totally dynamic - that is, this is only required once for any number of autotag fields included in the form.

      <div id="np-[[+npx.fieldName]]-container" class="np-text">
        [[+np.error_[[+npx.fieldName]]]]
        <label class="fieldlabel" for="np-[[+npx.fieldName]]" [[+npx.readonly]] title="[[+npx.help]]">[[+npx.caption]]: </label>
        <input name="[[+npx.fieldName]]" class="text" id="np-[[+npx.fieldName]]" type="text"  value="[[+np.[[+npx.fieldName]]]]"  maxlength="[[+npx.maxlength]]" />
      </div>
       
      <script>
       $(function() {
          var [[+npx.fieldName]]Tags = [ [[!tagLister? &tv=`[[+npx.fieldName]]` &tpl=`npTagTplJSON` &parents=`213` &sortBy=`tag` &limit=`0` &outputSeparator=`,`]] ];
          function split( val ) {
            return val.split( /,\s*/ );
          }
          function extractLast( term ) {
            return split( term ).pop();
          }
       
          $( "#np-[[+npx.fieldName]]" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
              if ( event.keyCode === $.ui.keyCode.TAB &&
                  $( this ).data( "ui-autocomplete" ).menu.active ) {
                event.preventDefault();
              }
            })
            .autocomplete({
              minLength: 0,
              source: function( request, response ) {
                // delegate back to autocomplete, but extract the last term
                response( $.ui.autocomplete.filter(
                  [[+npx.fieldName]]Tags, extractLast( request.term ) ) );
              },
              focus: function() {
                // prevent value inserted on focus
                return false;
              },
              select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
              }
          });
      });
      
      </script>


      Once problem with this is that it's repeated within the page for each field. Would be great if someone could find a solution that runs this script once to cover all included autotag fields.
        • 20135
        • 188 Posts
        Following on from my post above, this combination of autocomplete and autotags has created a problem, and I am hoping someone will see this and be able to help.

        The autocomplete function adds the tags from the TV without issue; however, when adding the tags to the input box it tacks on a comma and a space in order to delimit the items in the text box as multiple tags, and so present the drop down box for the next tag to be selected. So for instance, the text box looks like this:
        Banana, apple, mango, 

        This becomes an issue when saving the resource, because that extra comma and space is identified by MODx as another (albeit empty) tag and adds it to the resource. When listing out the tags later, there is included an empty tag.

        I have tried to remove the comma/space from autocomplete, but to do this breaks autocomplete. I would otherwise try and find a place where I can have Newspublisher trim the autotag value, but I have no idea where to do this. Can someone please help me work this out?
          • 3749
          • 24,544 Posts
          I suspect that your problem is only with the final comma. You might take a look at the JS code used by Notify for its tags. You can add or remove a tag by clicking on its button and the commas are handled correctly.

          If you're going to hack something, I think hacking the autotag TV might be a better option. Look for an explode() statement with a loop below it and add something like this at the top of the loop:

          if (empty($tag)) {
             continue;
          else {
             tag = trim(', ') tag.
          }


          Of course I'm talking completely out of my butt here because I've never seen the autotag TV code.

          If you were going to hack NP, I think it would be in the TV section of the saveResource() method in the newspublisher class file.

          Just above this line:

          $fields['tv' . $tv->get('id')] = $_POST[$name];


          You'd want something like this:

          if ($name == 'TagTV') { // or whatever the TV's name is
             $tags = explode(',', $_POST[$name]);
             foreach ($tags as $tag) {
                $tag = trim($tag);
                if ($empty(tag)) {
                   $finalTags[] = $tag;
                }
                $_POST[$name] = implode(',', $finalTags);
             }
          }
            Did I help you? Buy me a beer
            Get my Book: MODX:The Official Guide
            MODX info for everyone: http://bobsguides.com/modx.html
            My MODX Extras
            Bob's Guides is now hosted at A2 MODX Hosting
            • 20135
            • 188 Posts
            Thanks BobRay. In the end, I've added some jQuery to the template to help it remove the trailing comma/space:
            $('form').submit(function(e) {
                        $('.ui-autocomplete-input').each(function() {
                            var pH = $.trim($(this).val());
                            var pHn = pH.replace(/,\s*$/, '');
                            $(this).val(pHn);
                        });
                    });

            It's not all that pretty, but it does the trick. I think having you confirm that you've not added anything between the form submission and the resource insertion allowed me to explore adding my own code without consequence.

            Thanks again for your help BR, it's a really robust component you've put together. Maybe it would be worth adding autotag integration in to a new version of NP. Tags and hashtags have very much become universal, and allowing NP to handle this gracefully would be a real bonus.
              • 3749
              • 24,544 Posts
              The problem is that there should never be a comma at the end of the list to begin with. I'm curious to know how it gets there.

              My guess is that there's no check for an empty tag (or the check happens after the comma is added) and what's at the end is really a comma followed by an empty tag.
                Did I help you? Buy me a beer
                Get my Book: MODX:The Official Guide
                MODX info for everyone: http://bobsguides.com/modx.html
                My MODX Extras
                Bob's Guides is now hosted at A2 MODX Hosting
                • 42562
                • 1,145 Posts
                Looks like this is broke in MODx 2.3.1 and Articles 1.7.8-pl. Tags no longer are listed sad
                  TinymceWrapper: Complete back/frontend content solution.
                  Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
                  5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.