Hi I've searched and found different things based loosely around this and some more closely tied but I haven't been able to devise and create a workable solution for the problem I'm having:
Summary:
I am looking to create a view in a specific way due to my requirements. This is currently looking at using a self implemented Treeview style - I don't wish to use any kind of other plugins or pre-made views at the moment, because as you can see by the attached JS fiddle demo at the bottom, I can achieve this myself.
Problem At Hand:
This may be stupidly easy or straightforward and if so please forgive my incompetence but the problem is coming down to the tags - which have text in-between like so:
<ul><checkbox class="collapsible" /><label>Value 1</label>...<ul>
now I have no problem retrieving this values - as there is quite a few in the list of them (one for each option). But finally the base of the problem is matching these to my search input. While I have used the very obvious and generic for each loop it has a problem actually matching the 'input' - my variable for the search input - and the label's text together - hence it wont alert the correct values and can sometimes alert all 15 values when only 4 may match...
Any help would be greatly appreciated with this - feel free to use any of the tree view code which works very nicely alongside the select boxes.
Side note
In my actual view these check boxes will be associated with the label names using an object class to populate the value. Also I want, not really alert the matching labels, but to highlight them - so if anyone could help with that or suggest anything as well that would be nice - not the critical problem though. (sorry i know this is no help or use to you but I thought id enlighten you as to my reasons for alerting these labels.)
MY JS FIDDLE DEMO - TREEVIEW -- EDIT: this was the answer I needed (i will leave it here incase anyone else wants to use this), answer perfectly supplied by Radu Andrei
EDIT: I am not looking to alert based on any criteria asides the fact that the labels text matches the search text.
Answer to the question can be found in the fiddle -> https://jsfiddle.net/mLbhLh89/11/ .
Try as shown in the fiddle
FIDDLE
I just updated your search function with following
$("#search").on("click", function() {
$("label").each(function(i,v){
if($(this).text().indexOf($("#search-criteria").val())>0){
alert($(this).text());
}
});
});
It will find the search string in each label text and show an alert if found.
Related
I am a newbie with html and i need your support. Please look at my code:
https://fiddle.jshell.net/ghLoau6r/1/
Now I want to make a list of FAQs as table. The requirements are:
when we click to any link button (here we have 2 link buttons as 2 rows of the table), the background must be changed (not pink anymore, but another color)
when we click to any link button, the triangle at the beginning of the row also changes to another form (i created already but my code does not run)
when we click "show info 2", the corresponding "content 2" should be shown, instead of "content 1" now.
please help me, thank you guys very much !
So, not to be rude but there is so many things that need to be fixed here, that I don't have time to share them all with you. I'd strongly recommend picking up a book (HeadFirst HTML & CSS isn't bad, there are plenty others) and getting a solid understanding before continuing the work.
That said, the core problems to your specific question are that first, ID's should be unique (you have two elements with the ID of 'content1'). Second, your second link is looking for content1 still, even though you want content2. A quick fix would be to update the ID of the second content area ,and then update the anchor onclick handler to look for the correct ID.
That said, this is pretty far from an ideal or scalable solution, so please read up.
As commented, I think it will be hard to help without completely writing it for you. But I'd like to at least point out that you should move your JavaScript from inline/in the HTML into a separate JS file.
In your JS Fiddle, take this:
onclick="document.getElementById('content1').style.display=(document.getElementById('content1').style.display=='none')?'block':'none'"
And put it in the "JavaScript" section of JS Fiddle, inside of a $(document).ready() function. Use jQuery to register the onclick event to the behavior you want. Can include jQuery in your fiddle by using a jQuery URI such as https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
Godpseeed
I would like to a keep an text became non-editable. still it's parent as editable mode. it's not working with ie9 i have posted a question regarding here. But yet to get the suggestion.
`ie9` - contenteditable false not working when parent editable
But mean while, I searched and find a information says that,
Any element with the "mceNonEditable" class will be blocked from modifications and treated as a single character.
at here: http://www.tinymce.com/wiki.php/Plugin:noneditable
But I am not in the position to use this plugin-now. since i have 600 pages+ with numerous instance need to replace. the site in UAT status.
Considering all, i looking for a solution, using jQuery to convert a class based element into single letter as like noted above.
Is it possible? if so any one have an idea to share?
Please help me.
Could someone look at the following screenshot for me and explain the following:
What is going on?
How can I programmatically detect it?
How can I programmatically fix / get rid of it?
I believe what's happening is I have multiple text nodes in a single pre element... I feel like I read on MDN many years ago that such a thing is possible, but I've never encountered anything like it before now.
jQuery doesn't reveal anything unusual about it via text() or html() (I attempt both in the console as seen in the screenshot)... it simply shows the content of all the text nodes consolidated into a single node.
Not shown is that when I attempt to manually fix this in the console, by doing:
$('pre').text($('pre').text())
Instead of replacing all the text nodes with a single text node with the content of all 3 merged into one, it only replaces the content of the first text node with the content of all 3.
All of this is really confusing me and I can't find any documentation on any of this, so I'd really appreciate it if someone could answer my questions above.
Oh, because I know someone will ask how I did this, the answer is I'm not quite sure what I did. It has something to do with the circular loop between the html and the js of my meteor project, I think:
In my html I have this:
<pre class="editable" contentEditable="true">{{text}}</pre>
And in my javascript I have this:
"input pre": function (event) {
var newText = $(event.target).text();
Ideas.update(this._id, {$set: {text: newText}});
}
So meteor is automatically checking for changes to text in my database and putting the latest copy into my pre. It also sees when the user edits the pre and edits the text in the database. Something about doing this somehow, sometimes yields what you see in the picture above (other times it yields other strange behaviors.)
What is going on?
There are multiple text nodes in the pre element.
How can I programmatically detect it?
$('pre').contents() will return a list of children of the element, including text nodes. In my case, I'll only ever have text nodes so simply checking if the list has a length greater than 1 will work. If I weren't able to make that assumption, I would have to iterate over the returned list and see if any two consecutive nodes were text nodes. See the documentation from jQuery.
How can I programmatically fix / get rid of it?
$('pre')[0].normalize() fixes it. See the documentation on normalize from MDN.
I have a horribly coded set of controllers which I am unable to refactor at this time. I need to bring them under automated testing, but have run into an issue with the UIAutomation tool.
These controllers are dynamically generated. There were many ways to do this but somebody decided it would be best if they made a tableview containing cells which each contain more tableviews, containing the cells that the user will see and interact with.
A simple example of one of these controllers is as follows:
I need to press one of those table view cells automagically.
After struggling with some view hierarchy issues, I finally managed to get the logElementTree to see all of the cells, with correct accessibility identifiers. Here is the result:
Now just to test that I can press one of the buttons from a script...
NOPE. I can't seem to drill down into the elements even though the logTree clearly shows they exist and are visible.
Any ideas very welcome. I'm not very experienced with javascript so I could be missing something obvious. Thanks!
To answer my own question and thanks to a helpful engineer at the WWDC:
target.frontMostApp().mainWindow().tableViews()[0].cells()[0].tableViews()[0].cells()["Open"].tap();
I am coding some sort of booking system - calendar. One of the features is also a (js) pop up window with detailed information about event - user can either view them or edit.
Now my problem - I have put there a HTML select control (dropdown box), quite simple - 5 options. But somehow, and I have no ide why, this select is uneditable - that means that after I click on it nothing happens (I do not get the list of the options).
I know that now I should put a code here, however, whole system is so complex that it would take me ages.
I do not await exact answer or solution of my problem. I would like to ask you for advice - what would you check? I went through CSS up and down - no clue at all. Maybe some javascript? But how? I do use one public js library, so it might be something there, I checked as well, no clue.
Any advice would be much appreciated. I am stuck now... :-(
Thanks a lot!
Peter
::EDIT::
I have found out what is was! The ID if that pop-up window is bbit-cal-buddle and there is this line in the .js:
$("#bbit-cal-buddle").mousedown(function(e) { return false });
which basically explains why I can't select anything in dropdown (funny thing - checkboxes and radio works!). So my question is: how do I exclude my select and option tag from that .js command?
I've found a useful option when the bug is that obscure is to logarithmically comment your code.
That is,
Comment 100% of the code that might be causing a problem.
Test
If it works, uncomment 50% of the code you commented and go to step #2.
If it doesn't work, you know the problem exists in the code you uncommented.
Yes, this is somewhat of a monolothic technique, but I've found it to be very useful in the past.
Regards,
-Doug
Just to be sure, turn off ALL styles. this will render your page without the styles(obviously) and check if you can click the drop down. If you can, it is 98% a CSS error. It happened to me awhile ago - most probably an absolutely positioned div is covering it.
If you still can't click it, bring back the CSS then disable all javascripts. It should still be clickable by then since and html select tag doesnt need JS to be clickable.
If it still doesn't work, try doing a regular html select tag and check if you can select that one. If you can, then there is something wrong with your select tag