Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jHTMLArea: how to remove text partially

Posted on 2014-04-12
5
Medium Priority
?
788 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

971 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