Here's my sample HTML:
I would like to modify the content of the highlighted div to "New Title".
Here's my current code:
var divTitle = Ext.select('div[id="main_form"]/table/tbody/tr[1]/td/table/tbody/tr[1]/td/div/div[2]/div');
It seems that it is not working. I got that from using Chrome browser and copying the XPath. Can someone help or guide me here?
Also, I believe you can also simplify the query using the CSS select (in my case 'pt_title') so please mention how that can be coded too.
Thanks in advance.
Found one solution (using CSS selector):
var divTitle = Ext.select('#main_form div.pt_title');
I'm still interested on the other solution wherein you really have to go down each element. I believe this is the equivalent in jQuery:
var divTitle = $('#main_form > table > tbody > tr:nth-child(1) > td > table > tbody > tr:nth-child(1) > td > div > div:nth-child(2) > div');
divTitle.update('New Title');
Related
Suppose the following HTML
< div class="entry" >
< div class="partial_entry" >
Hello
< /div>
< /div>
I want to select Hello using Xpath...Select all elements with class partial_entry where parent is of class entry..
Try this:
//div[#class='entry']/div[#class='partial_entry']/text()
In Chrome Dev Tools or Firebug, in their DOM views("HTML" bookmark in Firebug and "Elements" bookmark in Chrome Dev Tools) you can quickly get an element xpath by righ-clicking it and selecting "copy XPath".
Hello I'm getting crazy around a dummy problem: how to remove paragraph tags < p > that RTE (in Typo3 6.1.7) adds oafter saving some text contents. I wish to add some images here to better explain this funny thing but I can't since I've not (yet) enough reputation.
BTW I put the images on an external site:
http://s16.postimg.org/uqbu40fut/rte_ptags_1.jpg
http://s16.postimg.org/7q56roi11/rte_ptags_3.jpg
The first image is a text entered in RTE; the second image (not shown here for the same reputation matter) is the same text shown in the "<>" raw view; the last image is what I see in raw view AFTER saving the content element.
I think that I must do something in the template or in the Typoscritp settings to remove these < p > useless tags... But what ??
Those <p> tags are enabled by default because in most cases you want your Text wrapped in propper HTML markup. However, typing your question into google, gets me to this two lines of Typoscript, wich I just tested on a 6.1.7 and which seem to do the job:
tt_content.stdWrap.dataWrap >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines >
// Remove Class Of <p class="bodytext">
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class =
// Remove P tag
tt_content.stdWrap.innerWrap >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines >
//Remove Extra Figure Tag of Image
tt_content.image.20.renderMethod = figure
tt_content.image.20.rendering.figure
I am generating XML from database records, then feeding it to Zend_Navigation to render it as treeview and before rendering I would like to add the level numbers, like a TOC numberings:
I have:
$partial = array('partials/menu.phtml', 'default');
$this->navigation()->menu()->setPartial($partial);
echo $this->navigation()->menu()->setUlClass('treeview')->render();
The output is dressed with ul/li(I need ul for treeview):
My First Web Page
Nice Page
Main Help
Works
But I Need:
1.My First Web Page
1.1 Nice Page
1.1.1 Main Help
1.2 Works
How can I dress each level with a number?
$navarray=$this->navigation()->menu()->toArray();
$it = new RecursiveIteratorIterator(new RecursiveArrayIterator($navarray[0]), RecursiveIteratorIterator::SELF_FIRST);
foreach ($it as $row) {
/// ????
}
Thanks Arman.
Maybe you could modify the partial to render an ol instead of ul, and then use some CSS magic to render the numbering properly.
You can see the example #48 in the Menu Helper documentation to get some inspiration.
EDIT:
If you need to use the ul tag, then probably you'll need to add the "current depth" of the menu items by hand. There is a very similar question answered here: PHP RecursiveIteratorIterator: Determining first and last item at each branch level.
Hope that helps,
Given the element of a table found with getElementById(), I need to get the body element and add a row to it. This fails in Chrome:
var tabBody = expressionTable.getElementsByTagName('TBODY')[0];
but works in IE.
How can I get the body in all browsers (ie 8, Chrome, FF, and Safari)?
The code looks like this:
var expressionTable = document.getElementById(tableID);
var tabBody = expressionTable.getElementsByTagName('tbody')[0];
var expressionRow = createExpressionRow(FieldTagsValue, row);
tabBody.appendChild(expressionRow);
tabody is 'undefined'
I think it might be because the table starts empty, and Chrome does not have a tbody element for an empty table. Could that be it?
Thanks,
Brian
don't rely on anything working in IE - it might behave slightly non-standard.
i would also advise not expecting tags You have not declared in Your HTML to be present in DOM.
i would try going with an explicit tbody tag if You do rely on it being present in DOM :
<table>
<tbody></tbody>
</table>
I know jQuery has some workarounds for handling tables (in IE) - so, unless You're patient to find out all the hacks Yourself, I would go with a library such as jQuery and add table elements like this :
$('#' + tableID).append(expressionRow);
i want to further use css selectors on "this" how can i do it? specifically i am trying to select this's sibiling ul > li > a's
how can i do it?
this + ul > li > a
i find that using sibling i cannot do .sibling("ul > li > a"), but i can use 3 .siblings() to do it? maybe i am using the wrong function? maybe i shld use find()? but the 1st "operator" i want is to get the sibling ul (i think i can also use next("ul")?)
$('ul>li>a', this) if I understood correctly.
Or
$(this).siblings('ul').find('>li>a')