Most of the examples that are provided in jqgrid documentation starts off with table tag with an id. Can we create/initialize the grid with say div or any other html tag?
A quick glimpse into jqGrid source code will reveal following snippet:
if(this.tagName.toUpperCase()!='TABLE') {
alert("Element is not a table");
return;
}
So the element must be a table.
There is no explicit check for id attribute, but it is used in several places for building the surrounding elements so you should keep it as well.
Related
I want to automatically load up adverts inside the body of my blog website
For Example:
<div class="dynamic-ads-div"></div>
After loading up ckeditor 5, i want to replace the above element with an advert code from platforms like ezoic, google, etc. I have tried to put the code directly in the blog post body, but ckeditor keeps filtering, after rigorous research, i could only preserve the custom html elements like <ins>, but any form of script tags are filtered out, i want to use the approach of loading up ckeditor before adding the advert code dynamically, I tried editor:
document.querySelectorAll(".dynamic-ads-div").forEach(ads => { ads.innerHTML = '<script src="LINK_TO_ADS_PLATFORM"></script><custom-element></custom-element><script>INIT_ADS_CODE</script>' }).
Ckeditor completely ignores the above code.
Any form of help will be greatly appreciated; If you can help me preserve the script tags, or help me insert content dynamically after loading up ckeditor.
Thanks
I'm importing into Google Sheets with IMPORTXML with the following XPATH:
=IMPORTXML(A2;"//*[#id='mw-content-text']/div/table[1]/tbody/tr[4]/td[1]/ul/li")
A2 containing the URL (https://stt.wiki/wiki/20th_Century_Pistol).
From the website I want to import the list entries in the "Basic" column and "Crafted From" row of the table.
There are only two list entries in this section of the table:
"x1 Basic Security Codes" and
"x4 Basic Casing"
Therefore, I expected to get only those two list entries as rows in my sheet.
Instead, I got an additional blank row above those two entries. When I change "td[1]" to "td[3]" in the XPATH query however, there are no extra blanks.
I don't understand where the additional blank row is coming from and how I can avoid it.
Google Sheet with desired and actual result
When I saw the HTML of the URL, there are 2 li tags in the ul tag. So I think that your xpath is correct. But from your issue, I was worry that the sup tag might affect to this situation. But I'm not sure whether this is the direct reason. So I would like to propose to add the attribute of li for your xpath as follows.
Modified xpath:
When your xpath is modified, please modify as follows.
From:
//*[#id='mw-content-text']/div/table[1]/tbody/tr[4]/td[1]/ul/li
To:
//*[#id='mw-content-text']/div/table[1]/tbody/tr[4]/td[1]/ul/li[#style='white-space:nowrap']
By adding [#style='white-space:nowrap'], the value of li with style='white-space:nowrap' is retrieved.
Result:
The formula is =IMPORTXML(A1;"//*[#id='mw-content-text']/div/table[1]/tbody/tr[4]/td[1]/ul/li[#style='white-space:nowrap']"). Please put the URL to the cell "A1".
Note:
Also, you can use the xpath of //*[#id='mw-content-text']/div/table[1]/tbody/tr[4]/td[1]/ul/li[position()>1].
To complete the very neat #Tanaike's answer, another expression :
=IMPORTXML(A2;"//th[contains(.,'Crafted')]/following::td[1]//li[contains(#style,'white')]")
If a blank line is added it's because GoogleSheets parses an additional blank li element containing a #style attribute.
I have 2 elements that have the same attributes but shown one at a time on the page (When one is shown, the other disappears).The only difference between the two is that the element which is displayed will have the '::before' selector. Is it possible to use an xpath or css selector to retrieve the element based on its id and whether or not it has ::before
I bet also to try with the javascript solution above.
Since ::after & ::before are a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is - you see it but can't really locate it with xpath for example (https://css-tricks.com/almanac/selectors/a/after-and-before/).
I can also suggest if possible to have different IDs or if they in different place in the DOM make more complex xpath using above/below elements and see if it is displayed.
String script = "return window.getComputedStyle(document.querySelector('.analyzer_search_inner.tooltipstered'),':after').getPropertyValue('content')";
Thread.sleep(3000);
JavascriptExecutor js = (JavascriptExecutor) driver;
String content = (String) js.executeScript(script);
System.out.println(content);
I am having a bit of difficulty refering to a table element of the Jqgrid directly as it appears to be lacking a id element. Is there any way to do so?
When I look at the source code, I see a non-standard aria-labelledby element which I am assuming is Jqgrid's own but doesn't help me.
Any ideas?
I have refered to the grid table as follows:
$('#gbox_mytableID table')
I am assuming one could also do
$('[aria-describedby=mytableID]')
But I haven't verified it.
My html looks like this:
<table id="mytableId"></table>
I am using the Twitter Bootstrap Affix JS component. My UL list is affixing properly when I scroll the page down. Also - when I click on the individual list items (much like Twitter does on its docs page), it scrolls down to my anchor ID in my document, but the LI element does not receive the Twitter 'active' class. Nor does it get the 'active' class when I scroll my document.
I would expect the appropriate link to be active when I have scrolled to the particular part in the document (much like scroll-spy works), but I can't seem to get this to work.
Is there something special I need to set up so that Bootstrap will add the 'active' class when appropriate?
Yes, you need to also use the ScrollSpy plugin. You can activate it through markup or through JS. Letting #scroll-pane be the element that triggers scroll events and #navbar be the element containing the ul.nav, the following should get it working:
HTML
<div id="scroll-pane" data-spy="scroll" data-target="#navbar">
JS
$('#scroll-pane').scrollspy({target: '#navbar'});
Use either the HTML or the JS, but not both.
Additional Info
When the ScrollSpy plugin is passed a target, like scrollspy({target: '#navbar'}), this is used to construct a selector of the form
target + ' .nav li > a'
which, in this example would give
'#navbar .nav li > a'
It is important to understand the stipulations that this selector creates.
The original target must be an element which contains an element with class nav. So .nav should probably never be your target.
The .nav element must contain list items.
Those list items must have a <a> as a direct child.
The <a> elements selected by this are then filtered out by those whose data-target or href begin with a '#'. These href's are in turn used to select the elements contained in the element to which the ScrollSpy plugin is attached. Offsets of those selected are stored, and when a scroll occurs, a comparison of the current scroll offset is made with the stored values, updating the corresponding <a> element with the class active.
Hopefully, this summary can aid in better understanding what one might be tripping over when attempting to implement the plugin, without having to dig into the code in further detail.