I have an XML node called "myNode" and it contains:
"This is some text"
Now I can use the myNode.nodeValue property to get the string of text
above. But say myNode contains:
"This is <em>some text</em>"
The property myNode.nodeValue will now be "This is ". How can I get the
exact string above returned?
let's say I have this code markup:
<div id="id1">
This is some text
<div class="class1"><p>lala</p> Some markup</div>
</div>
What I would want is only the text "This is some text" without the child element's .class1 contents.
How would I do that? A normal selector would select "recursively", so how do I limit it to one level?
I have a small question. I am building an AJAX-based content editor and in one portion the following xml tag needs to be processed:<
[Code]...
I'm using jsTree-0.9.9a. As a test this is the code i'm using to display the ID
oncreate: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB)
{
if (TYPE === "inside") {
parent_id = $(REF_NODE).attr('id');
alert(parent_id)
}}
This works fine when the parent has no child nodes, however, when a child node exists nothing is returned.
how to modify the DOM with jQuery in order to correct an (dynamic) HTML structure. I have a markup like this:
Thinking about a replacewith or append or a combination??
<ul class="MyClass">
Test1 <br />Test2</ul>
But I need to get all texts in the UL be surronded by LIs, and to delete the br.
<ul class="MyClass">
<li>Test1<li>
<li>Test2</li></ul>
In real life this could be a like two text elements like in this example, but it´s dynamic so it could be like 3 or 15 or whatever sometimes.
I'm trying to figure out how I can take user input from a textarea and insert it into a table as HTML. An example:
<script type="text/javascript">
<!--
function echo_input() {
var input = document.getElementById("user_input").value;
var cell = document.getElementById("display_area");
cell.childNodes[0].nodeValue = input;
}
//-->
</script>
<form>
<textarea id="user_input" name="user_input" onkeyup="echo_input();"></textarea>
</form>
<table>
<tr>
<td id="display_area">test</td>
</tr>
</table>
The childNodes[0] that the script keeps editing is the text node that starts out as "test". The problem is that I want the text that I put in the table to be parsed if any markup is in it (so that a <br /> will become a break, and not literally printed out as "<br />"), something that the DOM automatically escapes. It seems a very cumbersome means of doing this is to write a javascript parser, which would go through the text and create different types of nodes as it stumbles upon markup.
Im trying to find if a particular html markup pattern (<ROD> ... </ROD>) within a string and if its found then replace it with another string.eg."This is my string and it might <ROD>PartNumber123</ROD> contain HTML markup"So in this case I want to replace "<ROD>PartNumber123</ROD>" with {0}. If there is no <ROD>...</ROD> then dont do anything.Im sure im doing this the wrong way, maybe a regular expression would be best.Although this works its not very clean and I just cant find the correct solution.
function parseData(data){
var r1 = data.indexOf("<ROD>",0);
var r2 = data.indexOf("</ROD>",0);
[code]....
This is a dedicated thread for discussing the SitePoint article 'Enhancing Structural Markup with JavaScript'
View 20 Replies View RelatedFrom my understanding the main feature of unobtrusive JavaScript is to remove event handing from the markup.The main reason for doing this is to avoid repetition of code.There are also other reasons but that is the main one. e.g. no having to write <tag onclick="function()" > over and over again. This traditional event handling method makes code less maintainable.However is it worth writing unobtrusive code when we consider the following:
1, Server sider scripting laguages can be used to avoid code repetition. e.g. we can use a loop to add multiple onclick event handlers to all the elements of a navigation list. Thus we would only have to write onclick="function()" once.
2, Unobtrusive coding makes the code harder to follow.It is easier to look at the markup to find out what happens when an event occurs on an element rather than having to look through wades of JS code to find the correct event listener. This is especially true when a team is working on a project. It is easier to find out what another person has done when the traditional model of event handling is used.
3, Unobtrusive coding means longer and more complicated code. Also there there is a need for having to deal with browser differences.I know this can be reduced using libraries such as JQuery. Is it worth using such a library?
I'm just starting out, and having a little difficulty understanding how to target other html markup around a certain 'on click' item.[code]So when the user clicks the anchor the text is inserted into the following textarea. I achieved this by:[code]
View 2 Replies View RelatedI have been trying to figure out how to find all instances of a certain word or phrase within an element and wrap those words in <span> tags or other html. I.e. change all instances of 'the keywords' to <span>the keywords</span>So far I've found a lot of references to :contains() but that will change the element the text is inside of rather than just the text itself
View 2 Replies View RelatedOn my site I use an SVG image. The <embed> tag works fine in Opera and Firefox. And <img> works fine in Chrome and Safari. I would like to know if it is possible to change the tag with an 'if' browser statement, and if it is ho would I write it.
if (jQuery.browser.webkit) {
* // Replace <embed> with <img>
}
I have a js application, that loads formular-markup dynamically for a specific entity. Is there a way to access elements within this dynamically loaded markup through jquery?
eg.
in the form load function:
$('#container').empty().append($(entityForm.markup).addClass
("formContainer"));
[Code].....
I have an application that produces a dynamic unordered list from DB categories table. The list is representing the hierarchy by adding a “..” (Double dot) in front of the list item name for each hierarchy level like so:
<ul id="categories">
<li>Cat1</li>
<li>..Cat1a</li>
<li>..Cat1b</li>
[Code].....
I've been working on a Spin Control that uses only a standard textbox. <input type="text" /> With Javascript enabled the textbox looks and acts like a spin-button control without adding any extra elements. [URL] The up/down arrows are achieved using a background image, the rest is handled by Javascript/JQuery. I hope it is useful for some of you. I'm also working on a drop down date-picker that uses similar principles. (I just don't like solutions that add loads of extra markup!) Feedback/comments are welcomed, though I won't be able to respond to
View 12 Replies View RelatedI inherited Javascript and jQuery for a sliding belt (carousel) module. Basically, left and right navigation arrows would appear to the sides of the belt if there were more slides to show.
The jQuery and Javascript code was originally a singleton, so I decided to convert it into a jQuery plug-in in case the belt HTML markup was instantiated more than once. We have a CMS, so multiple belt modules theoretically could be placed on the same template.
Below is test page with two belts on the same page and the associated Javascript jQuery.
My problem is that when you click on the arrows or the slides, I found that the second belt works fine but not the first one. The first one does not show a left arrow when you page to the right. Likewise, the first belt gets mixed up going to the left. Somehow, only the second belt works as expected.
What I would like to do is when I attach my plug-in to a DIV, I want each belt to operate independently of each other (i.e keep its own local variables, functions, etc.).
I am not sure what I am missing here. what I am doing wrong? (You should be able to copy and paste the code into jsFiddle to see how it currently works.)
I have the page here also: [url]
<html>
I am VERY NEW to javascript programming as I am to web development. I am pretty decent with VB.Net though. My question is, what are the different ways to call a JavaScript Function either from within XHTML Markup code or from a VB.Net Code-Behind file?
View 3 Replies View RelatedI have a question about manipulating a document. Suppose for example
that I had a table like this:
<table>
<tr id="row1">
<td>R1C1</td>
</tr>
<tr>
<td>R2C1</td>
</tr>
</table>
What I want to do is add an onclick event handler to row1 to insert a
row after row1. I can't seem to find a way to do it though. After
creating the new row node, I could try something like
document.getElementById("row1").parentNode.appendChild(newNode) but
that would add the new row to the bottom of the table. The
insertBefore() method is the right idea but I want to insert the new
row AFTER row1 and there doesn't seem to be an insertAfter() method.
I thought about navigating through the DOM tree to get the row after
row1 and then using insertBefore() but the table is generated
dynamically and there won't necessarily be a next row.
jsFiddle URL : [URL]
I am trying to add a new node in XML using jQuery. Following code works fine in Firefox, Safari and Chrome but giving error in IE8:
<div id="result"> </div>
<div id="result2"> </div>
<script type="text/javascript">
<!--
[Code]....
The error description on IE8 is "Wrong number of arguments or invalid property assignment".
Is there a way to fix this on IE8?
[URL]
I am trying to target specific DOM nodes in order to change the background color.
The html code is:
<div id="rightcol"><h1>Highlights Regional</h1>
<div class="art"><a name="clergy"></a><h2><a href="clergy.html">Understanding Addiction: Recovery Tools for Clergy and Other Congregational Leaders</a></h2>
<p>A unique opportunity for clergy and congregational leaders.</p></div>
I am using this javascript phrase:
var x=document.getElementById('rightcol').getElementsByTagName("A");
It is returning all of the links within 'rightcol'. What I need is the anchors, which I wish to address by individual name.
I have :
objParent.firstChild.childNodes[1]
How can I get this childNodes ID? I can get the nodeValue but not sure how I can get its ID.
is there a quick mode to insert a new Node inside a Node (the new one will become a Node for all the Childs)?
Ex I have
<td>
--childs here--
</td>
I need
<td>
<div>
--childs here--
</div>
</td>
I'm trying to output the text value from a list node. why it's not working. How do i tell how many childNodes are in the ul element?
Code:
function test(){
var x = document.getElementById("test");
alert(x.firstChild.nodeValue);
[Code].....
I want to move a node from its current position, wherever in the parent it may be, to the top of its parent node.
so say i have:
a very abbridged dictionary
- abacus
- banana
- candle
i might want to move "banana" to be above "abacus". I've seen plenty of things about deleting and removing nodes, but to clone and remove would seem a bit of a cludge. Is there anyone who acn help?
I'm trying to add the text value of an xml element to a variable but the closest i can get is having the variable set to [text object] using this method:
rootNode.getElementsByTagName('instructions')[0].childNodes[0];
I have also tried these methods but they always return undefined:
rootNode.getElementsByTagName('instructions')[0].childNodes[0].text;
[code].....
I'm attempting to run some checks on an input value. Initial HTML:[code]After the page loads a javascript calendar function called JDPicker runs and changes it to:[code] my issue only occurs on this HTML that is hard coded into the page. I have several other inputs (same element structure with the divs, etc) added later with javascript using createElement functions and my javascript works fine on those:[code]My problem is only in IE (testing with v 8). When I try to get the child elements value it gives me this error: "value null or is not an object". I tried using .nodeValue after that and it worked, but then started giving me errors regarding the .length function "length null or is not an object".
View 1 Replies View Related