Solved

jHTMLArea: how to remove text partially

Posted on 2014-04-12
5
691 Views
Last Modified: 2014-04-19
Hi all.
I'm building a dashboard for a site, specifically I'm working on a panel to send email.

To compose the message I used jHtmlArea jQuery plugin. To send attachments, instead than fisically sent files I decided to add to the email a link to files, so recipients can download them and the site doesn't use too mutch server resources.
So, on the right I have the jHtmlArea and on the left side I have a list of documents available on the server which can be attached to the email selecting them with checkboxes.

Originally, I had put a button to the bottom to  collect all checked checkboxes and add a link to the email body, but I think it could be nicer adding the elements just clicking the checkboxes: all works fine, but I'm not able to remove the added link if the user uncheck a checkbox previously checked:

	$('#attachmentsList').on('click', ':checkbox', function(){
		$this = $(this);
		var link = "<br><p id='"+$this.attr('name')+"'>Scarica allegato: ";
		link = link + "<a href='"+urldecode($this.attr('value'))+"'>"+$this.attr('name')+"</a></p><br>";
		if ($this.is(':checked'))
		{
			$('#message').htmlarea('html', $('#message').val()+link); //WORKS
		}
		else
		{
			$('#message').htmlarea('html', $('p#'+$(this).attr('name')).remove()); //DOESN'T WORK
		}
	});

Open in new window


To better explain, the not-working code removes from the jHtmlArea everything not only the paragraph I want to remove. What am I doing wrong?

Thanks to all for any advice
Marco
0
Comment
Question by:Marco Gasi
  • 4
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39996924
What about :

else {
     var whatToRemove = 'p#' + $(this).attr('name');
     var fromWhereToRemove = "#message";
     $(whatToRemove, fromWhereToRemove).remove();
}

Open in new window

0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 39996963
Thanks for your reply, leakim971. Unfortunately, that doesn't work: the added link remains there.
0
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 0 total points
ID: 39997005
I found the solution. It's not so direct and clean, but it does the job. First, you have to get the whole content of the textarea. Next, you replace with a blank space the portion of html/text you need to delete; finally you have to call the updateHtmlArea() method to force jHtmlAre to reflect the contents of the underlying textarea.

Here's the code for future readers:

	$('#attachmentsList').on('click', ':checkbox', function(){
		var $this = $(this);
		var name = $this.attr('name');
		var id = name.replace(/\s/g, '_');
		id = $.trim(id);
		var link = "<br><div id='"+id+"'><p >Scarica allegato: ";
		link = link + "<a href='"+urldecode($this.attr('value'))+"'>"+name+"</a></p></div>";
		if ($this.is(':checked'))
		{
			$('#message').htmlarea('html', $('#message').val()+link);
		}
		else
		{
		 	var content = $('#message').attr('value');
			var newcontent = content.replace(link, '');
			$('#message').attr('value', newcontent);
			$('#message').htmlarea('updateHtmlArea');
		}
	});

Open in new window

0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 39997008
I leave this question open to see if you or someone else can suggest a cleaner solution, then, if no one else post a better solution, I'll close it accepting my own comment.
Have a nice day
0
 
LVL 31

Author Closing Comment

by:Marco Gasi
ID: 40010163
Found working solution by myself. Thanks for trying to help me.
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question