Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jHTMLArea: how to remove text partially

Posted on 2014-04-12
5
Medium Priority
?
766 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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)
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…

704 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