1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Select category on submission

Discussion in 'General Troubleshooting' started by carlo75, Oct 20, 2011.

  1. carlo75

    carlo75 Design & Development

    I've noticed that if you have a lot of categories on submission step 2,
    the html select operator (dropdown) is not really useful. A radio option will be better, or something like the old digg.com

    Anyone has experienced the same problem?
     
    Last edited: Oct 20, 2011
  2. PuckRobin

    PuckRobin New Member

    carlo75 likes this.
  3. carlo75

    carlo75 Design & Development

    Hi PuckRobin,
    this is a great widget but what I mean it's a bit different: instead of a select I'd like to use radio input button.

    If you remember the old DIGG interface... something like that:

    digg_selection.png
     
  4. carlo75

    carlo75 Design & Development

    This is the function categoryPicker that I've modified:


    PHP:
        /**
         * Build code for category picker in submit step 2 and edit post
         */
        
    public function categoryPicker($h)
        {
            
    $output '';
            
            
    $sql "SELECT category_name, category_safe_name FROM " TABLE_CATEGORIES " WHERE category_id = %d";
            
    $result $h->db->get_row($h->db->prepare($sql$h->vars['submit_category']));
            
            if(
    $result) { 
                
    $category_safe_name stripslashes(htmlentities(urldecode($result->category_safe_name), ENT_QUOTES,'UTF-8'));
                
                if (
    $category_safe_name == 'all') { 
                    
    $output .= "<INPUT TYPE=RADIO NAME='post_category' VALUE='1'>" $h->lang['submit_category_select'] . "<br />\n";
                } else {
                    
    $output .= "<INPUT TYPE=RADIO NAME='post_category' VALUE=" $h->vars['submit_category'] . " checked>" urldecode($result->category_name) . "<br />\n";
                }
            } else {
                
    $output .= "<INPUT TYPE=RADIO NAME='post_category' VALUE='1' checked>" $h->lang['submit_category_select'] . "<br />\n";
            }
            
            
    $sql "SELECT category_id, category_parent, category_name FROM " TABLE_CATEGORIES " ORDER BY category_order ASC";
            
    $cats $h->db->get_results($h->db->prepare($sql));
            
            if (
    $cats) {
                foreach (
    $cats as $cat) {
                    if (
    $cat->category_id != 1) { 
                        
    $cat_name stripslashes(htmlentities(urldecode($cat->category_name), ENT_QUOTES,'UTF-8'));
                        
    $indent = ($cat->category_parent != 1) ? '--- ' ''
                        if (
    $indent == '--- ') {
                        
    $output .= "<div class='sottocategorie'><INPUT TYPE=RADIO NAME='post_category' VALUE=" $cat->category_id ">" $indent $cat_name "<br /></div>\n"// controllo se sono SOTTOCATEGORIE
                        
    } else {
                        
    $output .= "<div class='categorie'><INPUT TYPE=RADIO NAME='post_category' VALUE=" $cat->category_id ">" $cat_name "<br /></div>\n"; } //controllo se sono CATEGORIE MADRI
                    

                }
            }
            
            return 
    $output;
        }
    The result it's ok, but if you have a lot of categories, the look isn't so great...
     
  5. nothingman

    nothingman Active Member

    Carlo, could you share where this code needs to go? I mean which file do we need to add these lines of code to? submit2.php?

    /Sorry for digging a VERY old thread - was searching for this functionality and voila! :eek:
     
  6. valMETNG

    valMETNG Administrator Staff Member Admin

    As I look at the /plugins/submit/submit.php code, I see the function categoryPicker starting at line 674, continuing through line 707. So I believe the idea is to replace 674 - 707 with his code.
     
  7. nothingman

    nothingman Active Member

    Thanks valMETNG. But as Carlo pointed out, it doesn't looks that pretty if you have a lot of categories

    http://i.imgur.com/hYz8c9l.png?1
     
  8. valMETNG

    valMETNG Administrator Staff Member Admin

    I have a huge to-do list right now, but how about this for a solution? Give me a few weeks and I'll modify the typeahead functionality that's in the category widget so that you can do the same thing in submit.
     
    nothingman likes this.
  9. nothingman

    nothingman Active Member

    Hey, that's would be cool - kinda like when you type /r/...and the subreddits are suggested for you. But IMHO it would be confusing for new users who won't know what to type in the input box (as in, noobs not knowing what categories are available).
     
    Last edited: Jul 18, 2013
  10. valMETNG

    valMETNG Administrator Staff Member Admin

    Although coding is never easy for me, it is pretty straight-forward to put some light grey text in the input box to direct the user what to do (e.g., just like the Search widget shows Search). And that's one of the great things about the way the category widget works - it will search on any word in the name, description, or keyword/tag fields so all the user has to do is enter the general topic they're interested in and it will bring up all sorts of choices (assuming that other information is populated).
     
    nothingman likes this.
  11. nothingman

    nothingman Active Member

    I get it. Something that says, "start typing" and the results are populated in the input box and with a suggestion of some popular categories as a hint.
     
  12. Graeme

    Graeme Member

    Submit to category depending on page

    Hey I need help with something similar.

    I'm trying to add a submit button that depends on the page you are currently on.

    If you are on page with category=4, you submit into category 4.

    I've modified a little bit so that there is an extra query string on the submit 1 page, for example:
    HTML:
    site.com/index.php?page=submit&cat=4 
    (category depends on page)

    the problem is when I use the Hotaru GET function to get the category, it can never pick it up and I don't know why. It works if I try to access the 'page' query string, but not the 'cat' one... what could I be doing wrong? I've tried like this:

    HTML:
    $category = $h->cage->get->getInt ('cat');
    
     
  13. valMETNG

    valMETNG Administrator Staff Member Admin

    I'm assuming you changed 'category' to 'cat' in base, correct? Because there won't be a 'cat' in GET otherwise. Having said that, if you're trying to find what is being put into various cage get variables, you might put a print at the top of one of your pages to see what's in there. It would look something like this:

    Code:
    print "get variables are: "
    print_r($h->cage->get);
    That should help you troubleshoot the problem.
     
    Graeme likes this.
  14. Graeme

    Graeme Member

    Hey thanks for the help. I've managed to do it now. Here's what I've done:

    I've added a new submit button, with a href that is generated from current page you are on (using a bit of javascript). For example, if you are viewing category A, the submit button will be for category A...if you are viewing category B, the submit button is for B...basically you don't need to choose the category on the submit page anymore since the category is filled out depending on which page you are on.

    I think this could solve the problem where you have so many categories to choose from as a category select can get ugly..

    I'll make a plugin for it since i think it can be a useful option.
     
  15. valMETNG

    valMETNG Administrator Staff Member Admin

    Sounds neat :)
     
  16. valMETNG

    valMETNG Administrator Staff Member Admin

    Bootstrap typeahead for submit categories using categories widget

    As promised...

    This will only work if you have the categories widget installed already (because that creates the category tree JSON needed here, as well as already has the necessary javascript). In /plugins/submit/templates/submit2.php, replace lines 71 - 73 that look like this:
    Code:
    <td><select name='post_category'>
    <?php echo $h->vars['submit_category_picker']; ?>
    </select></td>
    to be this:
    Code:
    <td>
    	<input class='searchfield' type='text' id='submit_category_typeahead' class='searchfield' autocomplete='off' placeholder='<?php echo $h->lang('submit_category_placeholder'); ?>' onfocus="if(this.value == '<?php echo $h->lang('submit_category_placeholder'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo $h->lang('submit_category_placeholder'); ?>';}" />
    	<input type='hidden' id='post_category' name='post_category'>
    </td>
    Replace lines 67 - 69 in /plugins/submit/templates/submit_edit.php that look like:
    Code:
    <td><select name='post_category'>
    <?php echo $h->vars['submit_category_picker']; ?>
    </select></td>
    with:
    Code:
    <td>
    	<input class='searchfield' type='text' id='submit_category_typeahead' class='searchfield' autocomplete='off' placeholder='<?php echo $h->lang('submit_category_placeholder'); ?>' onfocus="if(this.value == '<?php echo $h->lang('submit_category_placeholder'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo $h->lang('submit_category_placeholder'); ?>';}" />
    	<input type='hidden' id='post_category' name='post_category'>
    </td>
    Add this (or whatever wording you'd like) to /plugins/submit/languages/submit_language.php (and don't forget to clear your language cache):
    Code:
    $lang['submit_category_placeholder'] = "Enter some words to find a category";
    Add this to the bottom of /plugins/categories_widget/javascript/categories_widget.js:
    Code:
    $("#submit_category_typeahead").typeahead({ source: objects,
        matcher: function(item) {
    		var lcQuery = this.query.toLowerCase();
    		return ~item.name.toLowerCase().indexOf(lcQuery)
    			|| ~item.description.toLowerCase().indexOf(lcQuery)
    			|| ~item.tags.toLowerCase().indexOf(lcQuery);
        },
        sortBeginsWith: function(item, sensitive, insensitive) {
            return  ! item.name.toLowerCase().indexOf(insensitive);
        },
        sortSensitive: function(item, sensitive, insensitive) {
            return  ~item.name.indexOf(sensitive);
        },
        sortInsensitive: function(item, sensitive, insensitive) {
            return  ~item.name.toLowerCase().indexOf(insensitive);
        },
        updater: function(item) {
            if (item.name) {
               $("#post_category").val(item.id).change();
            }
            return item.name;
        },
        highlighter: function (item) {
            var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&amp;');
            return '<blockquote>' + item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                return '<strong>' + match + '</strong>';
            }) + '<small class="muted">' + item.description + ' (' + item.tags + ')' + '</small></blockquote>';
        }
    });
    I've packaged up the files with the changes here to make it easier for you.

    View attachment submit using typeahead.zip
     
    Graeme and nothingman like this.
  17. nothingman

    nothingman Active Member

    valMETNG, this is really good. Is there a way to make the text box width a bit longer as "Enter some words to find a category" doesn't fit in the text box (input box?) -> http://i.imgur.com/E5bjqrv.png



    Also, noticed the following snippet in the zipped file (submit2.php) - I believe not all of have have the image_upload plugin installed - could be removed? (just a suggestion).
    PHP:
    <?php $h->pluginHook('image_upload'); ?>
     
    Last edited: Jul 24, 2013
  18. valMETNG

    valMETNG Administrator Staff Member Admin

    I'm glad you like it. To change the width of the text box, you'll need to add a style tag specifying the width (or do it via .css) so it looks something like this:
    Code:
    <input [COLOR="#FF0000"][B]style="padding:0; margin:0; width:300px;"[/B][/COLOR] class='searchfield' type='text' id='submit_category_typeahead' class='searchfield' autocomplete='off' placeholder='<?php echo $h->lang('submit_category_placeholder'); ?>' onfocus="if(this.value == '<?php echo $h->lang('submit_category_placeholder'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo $h->lang('submit_category_placeholder'); ?>';}" />
    As far as the image_upload tag, that's a hook in base for 1.5.2 so that, when the plugin is installed, it puts the code right there. It won't do any harm leaving it in and will only work if you have the image upload plugin installed anyway (or some other plugin that would use that hook). Having said that, certainly you can remove it if you'd like.
     
  19. nothingman

    nothingman Active Member

    Thanks that soved it. One question: When a user edits a post, the category name in the input box disappears and you need to type in the category again, is this how it is supposed to behave? Would be nice to have the category 'stick' instead of having to type it again in edit more - not complaining though :)
     
  20. valMETNG

    valMETNG Administrator Staff Member Admin

    There's probably a much better, slicker javascript way of doing this that's beyond me at this point, but I made the following two changes to enable it to do what you'd like.

    In /plugins/submit/submit.php, add the following in red as line 688:
    Code:
    if ($category_safe_name == 'all') { 
    	$output .= "<option value='1' selected>" . $h->lang['submit_category_select'] . "</option>\n";
    } else {
    	$output .= "<option value=" . $h->vars['submit_category'] . " selected>" . urldecode($result->category_name) . "</option>\n";
    	[B][COLOR="#FF0000"]$h->vars['submit_category_name'] = urldecode($result->category_name);[/COLOR][/B]
    }
    } else {
    $output .= "<option value='1' selected>" . $h->lang['submit_category_select'] . "</option>\n";
    }
    In /plugins/submit/templates/submit_edit.php, change line 68 so it now includes the red part:
    Code:
    <input class='searchfield' type='text' id='submit_category_typeahead' class='searchfield' autocomplete='off' placeholder='<?php echo $h->lang('submit_category_placeholder'); ?>' onfocus="if(this.value == '<?php echo $h->lang('submit_category_placeholder'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo $h->lang('submit_category_placeholder'); ?>';}"[COLOR="#FF0000"][B] <?php if (isset($h->vars['submit_category_name'])) { echo "value='" . $h->vars['submit_category_name'] . "'"; } ?> [/B][/COLOR]/>
    I've updated the packaged files here for you to make it easier:

    View attachment submit using typeahead.zip
     
    nothingman likes this.

Share This Page