I have a $('.textarea').val() that gets the value of said textarea upon submission, inserts it into a Mongo.Collection and then displays it through {{#each}}{{/each}} in the body.
Before the text is inserted into the collection and then returned & published again, I have a regex set up to replace all image links with <img src='said link'>
My issue is that .val() does not work with tags, only .html and .text does, which I cannot use to get the value of a textarea. Is there any clever way of going about this (replacing .val() with .html()? Perhaps a listener on the body to replace all links with the tag after the text has already been submitted, in which case, how would I go about setting it up to listen for all text change?
EDIT:
To be more precise, is there a way to perform
$('.messages').html($('.messages).html().replace(this, 'that'))
on values that are constantly changing and output by {{#each}}
after returned from a collection? Is there a way to refer to each of the messages rather than whole?
If I understand correctly you are trying to replace all the sources in a text with images. This should help you:
http://forum.jquery.com/topic/replacing-text-links-with-images
Also, read this part of the jquery documentation:
http://api.jquery.com/attr/
I think that you are on the right track: changing the .html() should work.
Related
I have a function that appends dynamic a and img tags to a specific div ID :
$('<a class="fap-single-track" href="http://web.com"><img src="http://web.com/image.jpg').appendTo("#status_01");
But I want the user to be able to update this link (elsewhere on the page).
How do I remove the appended data from #status_01 when I don't know exactly what the data is going to be (the url and image links are being gathered from a remote API).
The problem I'm having is that when the user selects a new URL to populate the appendTo data, the old one is also there, so I end up with multiple <a> & <img> sets.
I've tried a bunch of different ways but nothing seems to work.
If I :
$('#status_01').remove(); // before adding new data
The status_01 DIV is no longer available in the dom for the next function.
$('#status_01').detach();
Doesn't work either.
I've also tried and mixture of prepend and some other stuff but none of it seems to get rid of the appendTo data.
Is it possible?
Or maybe there is something other than appendTo that I can use instead to attach the data in the first place?
This maybe ?
$('#status_01').html("");
Or, if you want to only remove the last :
$('#status_01').children().last().remove();
In addition to #Remy's correct answer, you can also use .empty():
$('#status_01').empty();
I'm using a script for showing a tag-cloud from here.
var word_list = getTags();
$("#example").jQCloud(word_list);
<div id='example'></div>
I'm loading the tags dynamically from different sources by clicking on a button. The first time it shows the the tags properly, but the next time it "adds them up" to the tags that are already there. I need to clear or refresh the tag-cloud somehow, I tried this:
$('#example').val('');
and there was no luck.
Is there a way to do it at all?
You may try using this:
$('#example').html("");
The .val method is primarily used to get or set the values of form elements such as input, select and textarea. It won't set the value of the div as you are trying to.
You can use jQuery empty() to remove all child nodes from your div and then call $("#example").jQCloud(word_list); again so that you can fill it up with new ones
Try:
$('#example').empty();
I have already found some question of this genre but the answer didn't help.
Javascript - div content without innerHTML
Javascript: Does not change the div innerHTML
I have a div called adx-title by id and i have to change the content. So i made my ajax call and i stored (i use jQuery) in a call the title i want this div to contain:
$('#adx-title').inneHTML = title;
Firebug report this ($('#adx-title').inneHTML) as undefined, and it does report so in every attempt i make to change the content of the div, which is read as an object but it doesn't have the innerHTML property. The script is loaded after i click a button so it should recognize the div as already loaded by the page. And indeed it gets the div with $('#adx-title'). it just doesn't apply the change and reports innerHTML as undefined.
Anyone has had a similar issue? Anyone can help? Thanks Agnese
You're using jQuery.
$('#adx-title').html( title );
The .innerHTML property is part of the DOM API. When you make a call to jQuery (as you're doing with the $) the result is a jQuery object, not a DOM element.
You can get the DOM element from the jQuery object like this:
var elem = $('#adx-title').get(0);
However, the jQuery .html() API wraps access to the .innerHTML property and also provides some other useful bookkeeping features. If you're using jQuery in general to manipulate the DOM, it's a good idea to use .html() and not the raw DOM API for that reason.
Try $('#adx-title').html(title);
In one javascript function I am creating a textarea based on some JSON data I am grabbing from another site. I create the textarea here:
if(type == 'fill-in'){
var textField = $('<center><div id="response-text"><textarea id="test" name="test" rows="10" cols="80">Answer here</textarea></div></center>').appendTo(panel.root);
}
In another function, I need to grab the value of this textfield and send it off to another site. I have tried this in various ways using
document.getElementById("test").value
But that gives me an error, and if I use
document.getElementByName("test").value
It tells me that the value is undefined. Do text areas not automatically set their values to whatever you type into them? Is there a better way to grab what is being typed into the textarea?
EDIT:
getElementById is working now... not sure what I was doing before but I must have tried it 3-4 times. I apologize for the pointless question.
Here's my best guess as to what's actually going on in your code and why you may be getting screwed over by variable hoisting.
I imagine you're trying to dynamically add your text area and then grab a reference right after by using var test = document.getElementById("test");. Because of variable hoisting, declared variables are hoisted to the top of the current scope. This would result in the declaration happening before the text area gets added.
As it is unclear where the problem lies with the OP, I did notice that you're using getElementsByName incorrectly.
getElementByName should be getElementsByName. A subtle but significant difference. Since names do not need to be unique, the function gathers a node list of all DOM elements with a given name attribute.
getElementById on the other hand returns a reference to the element itself.
getElementsByName:
Returns a list of elements with a given name in the HTML document.
getElementById:
Returns a reference to the element by its ID.
Using getElementById works just fine. You must have something wrong with your HTML markup - perhaps another element with the id of test.
Working fiddle:
I am assuming that Teaxarea element is loaded successfully and present in the DOM. In that case, your javascript is loading & executing even before Textarea element is loaded & ready in the DOM.
Regards,
I'm trying to make a simple image browser for TinyMCE which I am using in my CMS. As part of this I need to detect whether the user has selected an existing image, so I can display the "edit" form instead of the "choose an image form".
var selected_html = ed.selection.getContent();
var $elem = $(selected_html);
console.log($elem);
The first function returns the user selected text from the editor window as a string of HTML. I then would like to use jQuery (although plain javascript is just ok too) to check if this string contains an img tag before subsequently grabbing the src and title attributes for editing.
Now I've got as far as getting the html to turn into an object. But after this I can't manage to search it for the img element. After reading this (How to manipulate HTML within a jQuery variable?) I tried:
$elem.find('img');
But it just comes out as an "undefined" object...
I think I'm missing something fairly obvious here (it is getting late), but after an hour I still can't figure out how to grab the img tag from the selection. :(
Many thanks in advance.
Because the <img> is at the root of the jQuery object, you need to use .filter() instead of .find().
$elem.filter('img');
The .filter() method looks at the element(s) at the top level of the jQuery object, while .find() looks for elements nested in any of the top level elements.
If you're not sure beforehand where the target element will be, you could place the HTML into a wrapper <div> to search from. That way the HTML given will never be at the top.
var selected_html = ed.selection.getContent();
var $elem = $('<div>').html(selected_html);
var $img = $elem.find('img');
Try to see what is really inside your $elem variable. Just do a console.log($elem) using both Firefox and Firebug and you should be able to manage quite alright! ;)