Adding JQuery to form elements

Hi all, I'm trying to add a simple word counter to the blog plugin. I have the code and I 've tested on a simple text-area to see if it works, which it does. The trouble is when trying to use it on an elgg/input.

The word counter requires the element to have an id. I thought simple enough to use the internalid which comes with the input, but the JQuery doesn't seem to pick this up. Next I thought use the input's built in "js" option and add it in there, but also didn't seem to work.

 

The coding is below:

$text_textarea = elgg_view('input/longtext', array('internalname' => 'blogbody', 'value' => $body));

And the JQuery:
$(document).ready(function()
{
$('#what's the id').wordCount({counterElement:"word_counter"});
});
If anyone can give me a little guide as to how to make javascript work successfully on form elements it would be much appreciated. I've long wanted to know why they don't pick up the "internalid" and I've not found any documentation on how to make use of the element's "js" array option.
Thanks
  • 'internalname' => 'blogbody'
    is the name='blogbody'
    not the id='aaa'


    i think you need to say
    array('internalname' => 'blogbody', 'id'=> 'aaa', ... (not tested lolz ;-P)
    then the jquery $('#aaa').zzzzzz should pick it ;)


    without your code 'id'=> 'aaa'
    elgg will create elgg-input-<random-number> for the id that you really need ;-)

  • This is what I thought as well, but it seems that it still doesn't pick it up. In the input view is the following:

     * @uses $vars['value'] The current value, if any - will be html encoded

     * @uses $vars['js'] Any Javascript to enter into the input tag

     * @uses $vars['internalname'] The name of the input field

     * @uses $vars['internalid'] The id of the input field

     * @uses $vars['class'] CSS class

     * @uses $vars['disabled'] Is the input field disabled?

    and at the bottom it says (as you would expect)

    <?php if (isset($vars['internalid'])) echo "id=\"{$vars['internalid']}\""; ?>

    but depressingly, JQuery seems to have a hard time dealing with this.

    my code:

    $text_textarea = elgg_view('input/longtext', array('internalname' => 'blogbody', 'internalid' => 'word_count', 'value' => $body));

    and the JQuery:

    $(document).ready(function()

    {

    $('#word_count').wordCount({counterElement:"word_counter"});

    });

     

  • u (i) r confusing me ;-)
    [ earlier i had written the 1.8 call - here the 1.7.x call ]
    ==>
    (/inputlong/text says )
    <?php if (isset($vars['internalid'])) echo "id=\"{$vars['internalid']}\""; ?>
    should work..
    try maybe without the (wild guess;) _ in the id ?;-)
    what view-source shows on that field ?
    also firebug it...

  • i got this :-
    <p class='longtext_editarea'>
    <label>Blog text</label><br />
    <textarea class="input-textarea" name="blogbody" id="blogbodyid" ></textarea>
    </p>
    so jquery func shud pick it, unless there's something wring with yr
    $('#word_count').wordCount({counterElement:"word_counter"});

    (g/n@abt 2am)

  • Also keep in mind when dealing with ids that an id should be unique on a page.  If you have another element with the same id somewhere that can cause issues.

  • This is a bug. with input/tags the internalid sets itself properly (according to Google Chrome's inspect element). But with input/longtext the internalid does not set itself and takes the internal name value every time.

    Could this be a tinyMCE related issue perhaps?