SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    string logic issue

    Hi there,

    I've got this code to add bbcode into a wysiwyg rich text editor. Everything's working fine except when I want to add an image. The first time the script is run everything is ok, but the second time i get two image inserts, third time I get three and so on.

    Here's the code:
    Code:
    $('#uploads tr').click(function(){
      var filename = $(this).text();
      var insert = '[img="'+filename+'"]';
      textarea.value = textarea.value+insert;
      $('#images').hide();
      textarea.focus();
    });
    So first time I click on '#uploads tr', I get [img="filename"], then if I type some more stuff and then add another image, I get [img="filename"] 'Some more stuff' [img="filename2"][img="filename2"], then i'll get three image tags, then four and so on.

    I can see that it's something to do with the line I've highlighted, but I can't see why, or how to change it.

    Any help greatly appreciated,
    Mike

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    What happens if you just use

    Code JavaScript:
    textarea.value = insert;
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What happens if you just use

    Code:
    textarea.value = insert;
    Anything that is currently in the textbox is replaced with '[img="filename"]'

    In my original post I only included a snippet of the code. With my WYSIWYG form, I have a number of buttons. The image button uses the toggle() jQuery function to display a table of images. I've noticed that every click on this button ('#image') will result in an extra tag being inserted when I click on the uploads table row ('#uploads tr') further on down the code. I've highlighted them just to be über clear.

    Here's a more expansive snippet of my code:
    Code:
    $('input').click(function(){
      var textarea = document.getElementById('wysiwyg');
      var length = textarea.value.length;
      var start = textarea.selectionStart;
      var end = textarea.selectionEnd;
      var selection = textarea.value.substring(start, end);
      if ($(this).attr('id') == 'image'){
        $('#images').toggle('slow');
        $('#uploads tr').click(function(){
          var filename = $(this).text();
          var insert = '[img="'+filename+'"]';
          textarea.value = textarea.value+insert;
          $('#images').hide();
        });
      }
      ... more if clauses ...
    Don't really understand why this is happening. I would have thought that textarea.value = textarea.value+insert would give textarea.value a string, like 'some text blah blah [img="filename"]', then if I wanted to add another image, textarea.value + insert would be 'some text blah blah [img="filename"]' + '[img="filename"]'

    Could it be because I am declaring the variables within the function?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •