I've got a textarea:
<p>
Input:<br>
<textarea name="text_input" id="text_input"></textarea>
</p>
I'm trying to treat the textarea value as a jQuery object to be able to find each hypertext link.
That textarea has some related script code:
<script>
$('#text_input').change(process).keyup(process);
function process(){
var html = $('#text_input').val();
$(html).find("a").each(function(i,elem){
alert('got here');
});
}
</script>
In that textarea, I paste, for example, the text:
<html>
<body>
hello
</body>
</html>
Problem is, the alert() never fires. What am I missing? I guess the $(html) line has issues.
Change $(html).find... into $('<div/>').append(html).find... and it will work.
http://jsfiddle.net/NQKuD/
If you want to treat the text as a complete HTML document, you'll have to parse it yourself rather than get jQuery to do it for you. Here's one approach:
function process() {
var html = $('#text_input').val();
var rgx = /<a [^>]*href\=\"?([^\"]+)\"?[^>]*>([^<]*)<\/a>/gi;
var result,url,link;
while (result = rgx.exec(html)) {
url = result[1];
link = result[2];
alert('url='+url+'\nlink='+link);
}
}
http://jsfiddle.net/NQKuD/2/
var html = $('#text_input').val(); <-- that is wrong
use var html = $('#text_input').html(); instead.
test code:
<textarea id="t123">text<something more</textarea>
<script>
window.alert($("#t123").val());
window.alert($("#t123").html());
</script>
also pay real close attention to what you get in the alert.
update:
okay, so difference would be that .html() would refer to the original content of the text area, where as val() would use with value entered/changed.
so, this would fix the problem:
$(document).ready(function(){
$('#text_input').change(function(){
var html = $('#text_input').val();
var dummy = $("<div></div>").html(html);
dummy.find("a").each(function(i, elem){
window.alert(elem);
});
});
});
You can create an invisible html placeholder and insert the html there (this sounds like a very dangerous method though, :P but I see no other way to use jquery to parse input text).
http://jsfiddle.net/y6tt7/1
<div id="placeholder" style="display:none"></div>
$("#placeholder").html(html).find("a").each(function(i,elem){
alert('got here 2');
}).html("");
If you are having trouble firing the event when pasting using "Paste" in the OS menu, try the input event:
$('#text_input').bind('input', process);
Also, to be able to parse the input content using jquery, you should probably append it to a DOM node:
$('#text_input').bind('input', process);
function process(){
var html = $('#text_input').val();
$('<div>').html(html).find('a').each(function(i, elem) {
alert('got here');
});
}
Example: http://jsfiddle.net/5npGM/9/
jQuery will strip out the html and body elements from your HTML string, the find function will then fail to find any a elements as it is searching inside a single a element.
See this question - Using jQuery to search a string of HTML
To prove the point, the following JavaScript will work if you put it inside a document ready block -
$('#text_input').change(process).keyup(process);
function process() {
var html = $('#text_input').val();
$('<div>' + html + '</div>').find("a").each(function(i, elem) {
alert('got here');
});
}
Demo - http://jsfiddle.net/Y5L98/4/
Related
I have two lines of javascript code at a Html body.
<script text="javascript">
Muse.Utils.initWidget('#widgetu94', ['#bp_infinity'], function(elem) { return new WebPro.Widget.Form(elem, {validationEvent:'submit',errorStateSensitivity:'high',fieldWrapperClass:'fld-grp',formSubmittedClass:'frm-sub-st',formErrorClass:'frm-subm-err-st',formDeliveredClass:'frm-subm-ok-st',notEmptyClass:'non-empty-st',focusClass:'focus-st',invalidClass:'fld-err-st',requiredClass:'fld-err-st',ajaxSubmit:true}); });/* #widgetu94 */
Muse.Utils.initWidget('#widgetu386', ['#bp_infinity'], function(elem) { return new WebPro.Widget.Form(elem, {validationEvent:'submit',errorStateSensitivity:'high',fieldWrapperClass:'fld-grp',formSubmittedClass:'frm-sub-st',formErrorClass:'frm-subm-err-st',formDeliveredClass:'frm-subm-ok-st',notEmptyClass:'non-empty-st',focusClass:'focus-st',invalidClass:'fld-err-st',requiredClass:'fld-err-st',ajaxSubmit:true}); });/* #widgetu386 */
</script>
I need to change text ajaxSubmit:true to ajaxSubmit:false only for the second line Muse.Utils.initWidget('#widgetu386'...
I've tried to use this code
<script>
document.body.innerHTML = document.body.innerHTML.replace('ajaxSubmit:true', 'ajaxSubmit:false');
</script>
But after that all of ajaxSubmitare gonna to false.
Maybe I need more Regural Expression?
<script>
document.body.innerHTML = document.body.innerHTML.replace(/MagicRegExp/, 'ajaxSubmit:false');
</script>
I just want find it by '#widgetu386'
Please help me. I don't know what to do.
You use the id of an element to make changes to that specific element. I have never used Muse.Utils.initWidget() personally, but I am assuming that the first paramter of the function is the element id.
<script>
document.getElementById("#widgetu386").innerHTML =
document.getElementById("#widgetu386").innerHTML.replace(
'ajaxSubmit:true',
'ajaxSubmit:false'
);
</script>
I have tested every solution I have found on Internet, but none of them works.
I have this HTML:
<h4>Códigos disponibles:<span id="codesQuantity">#Model.ExternalCodesForThisProduct</span></h4>
And this Javascript:
$('#eCodesFrm').on('submit', function (e) { //use on if jQuery 1.7+
e.preventDefault(); //prevent form from submitting
var availableCodes = $("#codesQuantity");
var totalCodesUsed = 0;
alert(availableCodes);
$('#eCodesFrm *').filter(':input').each(function () {
if (this.name.match(/.Quantity$/)) {
totalCodesUsed = totalCodesUsed + parseInt(this.value, 10);
}
});
But availableCodes is [object Object].
What am I doing wrong?
If you need the inner element try .html(). As long as it's plain text in there there shouldn't be a problem.
To get the text inside the <span> use .text():
jQuery("#codesQuantity").text() //or $("#codesQuantity").text() if $ is jQuery in your code.
The problem here is that you're assigning a jQuery object to your variable, and not the content of the element. To extract the text inside the <span>, you should use either .html() or .text(), and do this instead:
var availableCodes = $("#codesQuantity").text();
I found a lot of info about this, but I haven't foundanything that could help me yet.
My problem is that I have got a div with its id and it supposes to be a container (#cont_seguim).
I have a menu on the right side which contains circles (made by css and filled with text), like following:
<div class="circle_menu b">
<div class="text_menu n">ECO</div>
</div>
where b and n are the format for background and text.
When I click a circle, this one must be added to the container (notice that each circle has got its own text), but I can't get that.
I made and array and used alert() to test that click works, and it does, but append() doesn't even work to print text, and I don't know why.
<script type="text/javascript">
var arrayS = new Array();
$(document).ready(function() {
$(".circulo_menu").click(function() {
var text = $(this).text();
alert("calling " + text);
$("#cont_seguim").append(text);
});
return text;
});
</script>
Thank you for your responses!
Your code seems to work fine (if you fix the different class name used in html vs script circulo_menu vs circle_menu)
Demo at http://jsfiddle.net/7jbUj/
To add the whole circle append the whole element and not its text by using .append(this)
$(".circle_menu").click(function() {
$("#cont_seguim").append(this);
});
Demo at http://jsfiddle.net/7jbUj/1/
To add a copy of the circle, so you can add multiple of them use the .clone() first..
$(".circle_menu").click(function() {
var clone = $(this).clone(false);
$("#cont_seguim").append(clone);
});
Demo at http://jsfiddle.net/7jbUj/3/
Inside the click handler, this refers to the clicked element. And since you bind the click handler on the circle_menu element, this refers to that. You can use it directly for the appending or clone it to make a copy first..
unable to understand properly, hope below one can help you.
<script type="text/javascript">
$(document).ready(function() {
$(".circulo_menu").click(function() {
var myText = $(this).html();
alert("calling " + myText);
$("#cont_seguim").html(myText);
});
});
</script>
make sure classname and id name will remain same as html
Try using html() instead of text().
Try this: Demo
HTML:
<div class="circle_menu b">
<div class="text_menu n">ECO</div>
</div>
<div id="cont_seguim"></div>
Javascript:
$(document).ready(function() {
$(".circle_menu").click(function() {
var text = $(this).html();
console.log("calling " + text);
$("#cont_seguim").append(text);
});
});
Try this:
$( ".container" ).append( $( "<div>" ) );
source
use
$("#container").append($("<div/>", {id:"newID",text:"sometext"}));
You could try
<script type="text/javascript">
var arrayS = new Array();
$(document).ready(function() {
$(".circulo_menu").click(function() {
var text = $(this).text();
alert("calling " + text);
$("#cont_seguim").append($(this).html());
});
return text;
});
</script>
By this way the clicked circle element get added to div
I need help with some Regexp Javascript/JQuery. I got it working, but I think there is better, simpler solution.
Idea is:
If on button click, target inner html has tags <b></b> anywhere - remove them, else add tag <b> at beginning and </b> at end.
This is the code: jsFiddle example
<input id="button" type="button" value="Bold it"/>
<div id="target">This is <b>sample</b> text</div>
$(function(){
$('#button').click(function(){
var t = $('#target');
//: search for '</b>' too ???
var isFound = t.html().search(new RegExp(/<b>/i));
if(isFound >= 0) //: make 2 replaces into 1 ???
t.html(t.html().replace(/<b>/,'').replace(/<\/b>/,''))
else
t.html('<b>'+t.html()+'</b>')
})
})
Questions are commented in code:
How to search for <b> and </b>
Make .replace(/<b>/,'').replace(/<\/b>/,'') in one .replace(/<b>...?..../,'')
This is not something regex is good for, as there's so many ways in which the expression could fail. See RegEx match open tags except XHTML self-contained tags for humorous reasons as to why.
Try using t.children("b"); to find the instances of <b>...</b/> in your tag.
In this case, try the following:
t.children("b").each(function() {
var contents = $(this).contents();
$(this).replaceWith(contents);
});
Or fully expanded:
$(function(){
$('#button').click(function(){
var t = $('#target');
t.children("b").each(function() {
var contents = $(this).contents();
$(this).replaceWith(contents);
});
});
});
When I try to clone a textarea by using cloneNote(true), the cloned textarea is not editable. Does anyone know how to resolve the problem? The sample codes show as following:
<html>
<head>
<script type="text/javascript" src="/javascripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
});
</script>
<script type="text/javascript">
testclonenode = {
addAbove : function (element) {
var rowEl = element.parentNode.parentNode.parentNode;
var rowElClone = rowEl.cloneNode(true);
rowEl.parentNode.insertBefore(rowElClone, rowEl);
return false;
}
};
</script>
</head>
<body>
<table>
<tr><td>
<textarea name="content" style="width:100%">this is a test </textarea>
<p> <button onclick='return testclonenode.addAbove.call(testclonenode, this);'> Add above </button>
</td></tr>
</table>
</body></html>
It does not work that way. Also, it is impossible to move a tinymce editor using dom manipulation.
The tinymce wiki states the following:
mceAddControl
Converts the specified textarea or div
into an editor instance having the
specified ID.
Example:
tinyMCE.execCommand('mceAddControl',false,'mydiv');
So when you clone a textarea there is another problem: You will have the same id twice which will result in errors accessing the right tinymce instance.
I got this to work by using an ID which is incremented each time my clone function is triggered, so
var insertslideID = 0;
function slideclone() {
$('<div class="slides"><textarea name="newslide['+insertslideID+'][slide_desc]" id="mydiv'+insertslideID+'"></textarea></div>').insertAfter('div.slides:last');
tinyMCE.execCommand('mceAddControl',false,'mydiv'+insertslideID);
insertslideID++;
}
$('input[name=addaslidebtn]').click(slideclone);
Seems to work.
A wee bit tidier, I just use a number for my id - copy1 is the name of my button - I add the new element to the end of my container.
var count = 0;
$("#copy1").click(function(){
var newId = count;
$( "#first" ).clone().appendTo( "#container" ).prop({ id: newId, });
tinyMCE.execCommand('mceAddControl',false,newId);
count++;
});
I ran into a similar problem, except my element IDs (not just textareas) could be anything, and the same ID was always appearing twice. What I did is supposed to be horribly inefficient but there was no noticeable performance loss with dozens of elements on the page.
Basically I removed the TinyMCE ID first (uses jQuery):
$(new_element).find('.mce-content-body').each(function () {
$(this).removeAttr('id');
});
Then I reinitialized TinyMCE for all relevant elements.