HTML-assigned 'id' Missing in DOM - html

Within the Moodle (v. 3.5.7) Atto editor (using both Chrome and Firefox) I've been trying to assign an ID to a particular row class, "span9". My ultimate objective is to assign this a unique ID and reference this element via jquery so as to append another element within it.
The ISSUE is that once I add an ID (id="checklist01") and click save, the ID simply does not appear in the DOM, and seems to not exist. When I re-enter the atto editor however, voila, there it is just sitting there. So it's NOT being removed completely... just not expressed somehow?
I have 2 screenshots linked below showing (1) the editor view, with the element and assigned ID highlighted, and (2) a screenshot of the DOM once the changes have been saved, with that same area highlighted, without the assigned ID.
Screenshots of ID Missing from DOM
Bootstrap ver. 4
So far I've tried switching the placement of the id in the atto editor (class coming first vs second after ); tried to add a "span" in front of the id (for some reason, I was desperate); and really just searched all over for someone who has encountered something similar.
I'm not sure how much help the html will provide, but here it is:
<div class="row-fluid colored">
<div class="iconbox span3">
h4>Your Completion Status (%)</h4>
</div>
<div id="checklist01" class="span9">
</div>
</div>

I found the reason for the removal of id attributes.
id attributes are removed because "Checklist" activity used safe HTML function of Moodle. If you want to access id attributes of description HTML follow below steps.
Go to mod\checklist\locallib.php file.
Then search formatted_intro() function (which is around line number 880).
In that function they used Moodle's format_text() function to return description text.
In that function, they have used 3 parameters.
string $text The text to be formatted.
int $format Identifier of the text format to be used
object/array $options text formatting options
Replace
$opts = array('trusted' => $CFG->enabletrusttext);
to
$opts = array('trusted' => $CFG->enabletrusttext,'allowid'=>true);
Then save your file and check. By following the above steps you can use id attributes.

Related

Extract values from HTML when parent div contains a specific word (multi-nested divs)

I copy the HTML of a "multi-select" list from a page which looks like that:
and then paste the HTML version (after beautifying it online) in a notepad++ page.
I know want to use Regex in order to extract the lines that are enabled in that list. In other words, I want to see what options I had selected from that dropdown. There are many lines and it is impossible to scroll and find them all. So, the best way in my mind is to use that HTML and search for the divs that contain "enabled". Then, the inner divs should have the values that I am looking for.
The HTML is shown below:
<div class="ui-multiselect-option-row" data-value="1221221111">
<div class="ui-multiselect-checkbox-wrapper">
<div class="ui-multiselect-checkbox"></div>
</div>
<div class="ui-multiselect-option-row-text">(BASE) OneOneOne (4222512512)</div>
</div>
<div class="ui-multiselect-option-row ui-multiselect-option-row-selected" data-value="343333434334">
<div class="ui-multiselect-checkbox-wrapper">
<div class="ui-multiselect-checkbox"></div>
<div class="ui-multiselect-checkbox-selected">✔</div>
</div>
<div class="ui-multiselect-option-row-text">(BASE) TwoTwoTwo (5684641230)</div>
</div>
The outcome should return the following value only (based on the above):
(BASE) TwoTwoTwo (5684641230)
So far, I have tried using the following regex in notepad++:
<div class="ui-multiselect-option-row ui-multiselect-option-row-selected"(.*?)(?=<div class="ui-multiselect-option-row")
but it is impossible to mark all the lines at the same time and remove the unmarked ones. Notepad++ only marks the first line of the entire selection. So, I am thinking whether there is a better way - a more complex regex that can parse the value directly. So, in lines:
a) I either want to make the above work with another regex line in notepad++ (I am open to visualstudio if that makes it faster)
b) Or an easier way using the console in Chrome to parse the selected values. I would still like to see the regex solution but for Chrome console I have an
Update 1:
I used this line $('div.ui-multiselect-option-row-selected > div:nth-child(2)')
and all I need know, as I am not that familiar with the Chrome console export, is to get the innerHTML from the following lines:
Update 2:
for (var b in $('div.ui-multiselect-option-row-selected > div:nth-child(2)')){
console.log($('div.ui-multiselect-option-row-selected > div:nth-child(2)')[b].innerHTML);
which works and I now only have to export the outcome
}
Open up Chrome's Console tab and execute this:
$x('//div[contains(#class, "ui-multiselect-option-row-selected")]/div[#class="ui-multiselect-option-row-text"]/text()')
Here is how it should look using your limited HTML sample but duplicated.
If you have multiple multi-selects and no unique identifier then count which one you need to target (notice the [1]):
$x('//div[contains(#class, "ui-multiselect-option-row-selected")][1]/div[#class="ui-multiselect-option-row-text"]/text()')
All you have to do is use css selectors followed by a .map to get all the elements' innerHTML in a list
[...$('div.ui-multiselect-option-row-selected > div:nth-child(2)')].map(n => n.innerHTML)
The css selector is div.ui-multiselect-option-row-selected > div:nth-child(2) - which, as I've already mentioned in my comment, selects the 2nd immediate child of all divs with the ui-multiselect-option-row-selected class.
Then we just use some javascript to turn the result into a list and do a map to extract all the innerHTML. As you asked.
If the list is sufficiently big, you might consider storing the result of [...$('div.ui-multiselect-option-row-selected > div:nth-child(2)')].map(n => n.innerHTML) in a variable using
const e = [...$('div.ui-multiselect-option-row-selected > div:nth-child(2)')].map(n => n.innerHTML);
and then doing
copy(e);
This will copy the list into your clipboard, wherever you use ctrl + v now - you'll end up pasting the list.

How to include template's value inside link or table in MediaWiki?

I search the documentation but I didn't know exactly how to call that.
I have a template Index2Name that return a name based on an index.
I'm trying to use that name in a link:
[[Articles/{{Index2Name|0001}}|{{Index2Name|0001}}]]
or
Image:Big-0001.png|link=Articles/{{Index2Name|0001}}|''{{Index2Name|0001}}''
In the last example, the name is printed but the link doesn't work. (In gallery element)
It doesn't work. The value from the template is printed but it is not converted to a link.
How can I make this works? And does this have a name? (For future reference)
EDIT: Index2Name is a simple switch returning a few words depending of the id. Since I'm using subpages I only want the name to appear (Example: MyArticle) but the link is Articles/MyArticle
Could you clarify exactly what you want to happen please. (Where you want to link and how you want it to look).
But for example if you use:
[[Image:Big-0001.png|''{{Index2Name|0001}}'']]
It will link to the page Image:Big-0001.png with the link text being the output of:
''{{Index2Name|0001}}''
Or if you use:
[[Image:Big-001.jpg|link=Articles/{{Index2Name|0001}}]]
The image, when clicked, will redirect you to the output of:
{{Index2Name|0001}}

How to add auto-complete Sublime Text 3

I would like to add custom auto-complete key bindings much like built-in:
Example: html+tab auto-completes the Doctype Block.
I tried adding html custom key binding: type c + o + l + tab to generate <div class="col-">
Preferences > Key Bindings > Default (OSX).sublime-keymap -- User
{"keys": ["c+o+l+tab"], "command": "insert_snippet", "args": {"contents": "<div class=\"col-$0\">"}},
However, two issues:
the new key binding overrides all other auto completes
the initial col or characters remains in front of the
generated tag. col<div class="col-">
What is the correct way to add this type of key binding?
The correct way to do something like this is to use either snippets or completions. Although there are some differences, generally speaking they both work the same way in the end, and which one you choose depends on how many such items you want to create and how complex you want them to be.
Using a snippet, you would select Tools > Developer > New Snippet... from the menu and fill out the snippet template, then save it as a sublime-snippet file in the location that Sublime defaults to (which is your User package).
For example, that might look like the following based on the example in your question:
<snippet>
<content><![CDATA[
<div class="col-$0">
]]></content>
<description>Insert DIV with column class</description>
<tabTrigger>col</tabTrigger>
<scope>text.html</scope>
</snippet>
Snippets are XML formatted, and everything between ![CDATA[ and ]] is inserted into the buffer (don't remove the CDATA even if you think you don't need it; Sublime will ignore the snippet if you do).
The tabTrigger specifies the text that you want to be the trigger for the snippet, the scope says what sort of files the snippet should trigger in, and the description will be displayed next to the snippet in the auto-completions panel.
In a snippet, the tabTrigger, scope and description are all optional. If you don't specify a tabTrigger you can only expand the snippet from the Command Palette or via the insert_snippet command (for example in a key binding). Without a scope the snippet applies everywhere, and without description it has no description in the panel.
If you have many such items that you want to add snippets for, you can also use completions instead. These are stored in JSON files with an extension of sublime-completions and should be saved in your User package (use Preferences > Browse Packages... if you don't know where that is.
An example of such a file would be:
{
"scope": "text.html",
"completions": [
{ "trigger": "col\tInsert DIV with column class", "contents": "<div class=\"col-$0\">" },
]
}
In this format, the trigger is always the text to trigger and the description (still optional) is separated from the trigger by a \t character in the trigger key.
In completions you only specify the scope once at the top instead of every time, but there are some functional differences between completions and snippets.
There can only be one snippet per sublime-snippet file, but a sublime-completions file can contain many completions in a single file; the completions key is an array so you can place more than one completion in the same file.
Completions are JSON, so contents that are multi line or contain JSON specific characters such as a " character are harder to enter; completions are better for shorter sequences while snippets are better for more complex things.
When autocomplete triggers, if there is a completion and a snippet that could be autocompleted, snipptets always "win" and are inserted, whereas completions cycle. That means that for example in this particular example you need to press Tab twice because col is also the name of a tag.
Snippets automatically appear in the command palette (when they apply) but completions do not. In the command palette, Snippets appear as commands like Snippet: Something, where Something is the description if it exists and the name of the file if it does not.
In either case, you can make the snippet/completion apply only in certain types of files by applying a scope; to determine the appropriate scope, position the cursor in a file at the appropriate place and select Tools > Developer > Show Scope Name...; the more of the displayed scope you use the more specific it becomes. Generally just the top level such as text.html is all that's needed unless you're doing something special.

Displaying and intrepreting tab layouts

I would like to know if it is possible to 'see' and display the following tab layout maybe through the Attribute Editor etc?
Or how can I interpret it?
In the following, I selected the shader - ShaderParam_resGen_srf01 but after searching through every attributes I can find in the Attribute Editor, I can neither find the CachedLayouts or the ShaderParamTabDepth elements.
Any ideas?
tabLayout -e -selectTabIndex 1"MayaWindow|MainAttributeEditorLayout|formLayout2|AEmenuBarLayout|AErootLayout|AEStackLayout|AErootLayoutPane|AEbaseFormLayout|AEcontrolFormLayout|AttrEdrexShaderSrfFormLayout|scrollLayout121|columnLayout971|frameLayout522|columnLayout976|columnLayout977|MW_ShaderParam_CachedLayouts|MW_ShaderParam_resGen_srf01|ShaderParamTabDepth0";
tabLayout is a UI element, not part of your scene.
From the documentation, this command is selecting the first tab of the specified tab layout control.
The long string is the "path" to the control:
MayaWindow
MainAttributeEditorLayout
formLayout2
AEmenuBarLayout
AErootLayout
AEStackLayout
AErootLayoutPane
AEbaseFormLayout
AEcontrolFormLayout
AttrEdrexShaderSrfFormLayout
scrollLayout121
columnLayout971
frameLayout522
columnLayout976
columnLayout977
MW_ShaderParam_CachedLayouts
MW_ShaderParam_resGen_srf01
ShaderParamTabDepth0
Depending on what you intend by "interpreting tab layouts," other commands listed in the documentation linked above should help you collect the specific information you need. If there's a particular aspect of the layout you want to query, be sure to specify that in your question.

Spring bean comma separating values, but I want to overwrite

Alright, so I'm pretty new to Spring, but I was asked to resolve a bug. So in our application, we have a page that queries a database based on an id. However, not all entries are unique to the id. The id and date pair, on the other hand, do define unique entries.
So this page takes in an id. If there is only a single entry related to this id, everything works fine. However, if there are multiple entries, the page displays a radio button selection of the various dates that pertain to that id. We use something like:
< form:radiobutton id="loadDate" path="loadDate" value="${date}" label="${date}" />
Later on the same page, we want to display the data for that option. As part of it, we display the date of that selection:
< form:input id="aiLoadDate" path="loadDate" maxlength="22" size="22" class="readonly" readonly="true"/>
The problem is that when this happens, the variable (or bean? I'm not quite sure about Spring yet..) loadDate (a string) ends up being the same date twice, seperated with a comma. I'm guessing the problem here is the "path="loadDate"" that is common to both lines.
Instead of appending the date to the already existing one like a csv, I'd like it to overwrite the current entry intead. Is there a way to do this?
Spring is not the direct cause of your problem. When the elements of an HTML form are submitted, each element will appear in the request as a name=value pair. If two or more elements in the form have the same name (not id, name attribute) then those elements appear in the request as name=value,value (with one value per element with a duplicated name).
Option 1: stop using an input as a display element. Just display the date in a span (or div or paragraph or what ever). If you want the look of an input box (border, etc.) use CSS to create a class that has the look you want and attach the class to the span (or div or paragraph, etc) in which you display the date.
Option2: continue using an input as a display element. Disabled input elements are not added to the request when the form is submitted. in the form:imput set disabled="true".