How to find the variables that are asssigned to HTML elements - jquery-ui

I'm trying to write a plugin for a website that uses jquery widget library.
In the given example they asking the above:
you should always use the variables assigned to elements and never the element ID’s
I know I can access to variables through inspect mode and than print to the console
document.getelementbyid('elementid')
I still cant find the variable name assigned to the element I'm looking for.
Is it the right way to do it? is there en efficient way to do it?
Thank a lot!

To find the variables assigned to HTML elements, you need to look at the JavaScript code that is associated with the HTML file. Here are the steps to follow:
Open the HTML file in a code editor or text editor that supports syntax highlighting for HTML and JavaScript.
Look for the tags in the HTML file. The JavaScript code will be contained within these tags.
Scan the JavaScript code for any variable declarations that are associated with HTML elements. Typically, these declarations will use the "document.getElementById" method to select the HTML element and assign it to a variable.
For example, if you have an HTML element with an id of "myElement", the associated JavaScript code might look something like this:
javascript code
var myVar = document.getElementById("myElement");
This code selects the HTML element with the id of "myElement" and assigns it to a variable called "myVar".
This code selects the HTML element with the id of "myElement" and assigns it to a variable called "myVar".
Look for any references to the variable in the JavaScript code to see how it is being used. You should be able to see how the variable is used to manipulate the associated HTML element.
By following these steps, you should be able to find the variables that are assigned to HTML elements in your code.

Related

Pass Javascript Variable into taglib method call Grails

any idea for this
var elemVal = $("#element").val();
var finalVal = "${someTagLib(attr: elemVal)}";
The element is a select option, so I am getting the value that the user selected to pass into a taglib function. It seems that search isn't being passed into the taglib. Anyone have a suggestion?
This is not possible at all. You are trying to mix server side code with client side code which is a common mistake.
When you use gsp's they first compiled on server i.e. in JVM, but there javascript can not be executed. Similarly when compiled gsp content is rendered as html in the browser, there will be no ${} since that is an groovy expression.
So the thing you are trying to achieve is not possible.

How to select polymer dart custom elements in a angular dart view

So, I'm trying to select a polymer custom element(using paper_elements) in my view with querySelector. I'm able to select regular html elements just fine. In particular, I'm trying to select a specific paper-input element. I want to be able to query it's input element which is buried in it's second shadowroot.
I've tried the following:
querySelector('#my-paper-input::shadow #input')
querySelector('paper-input::shadow input')
and a bunch of other variations. However, no matter what I do, the query always returns null. It's driving me mad because I can style it in css. What do?
As far as I know you have to use several steps
querySelector('#my-paper-input').shadowRoot.querySelector('input');
but you should also be able to access the value using the attribute of the outer element like
querySelector('#my-paper-input').attributes['value'] or
querySelector('#my-paper-input').attributes['inputValue']
you could also use http://pub.dartlang.org/packages/angular_node_bind
but I wasn't able using Angular with paper-elements recently (see https://github.com/angular/angular.dart/issues/1227)

multi line tag in grails or html

With a grails app and from a local database, I'm returning some text in a xml format.
I can return it well formed in a <textarea></textarea> tag with the correct indenting (tabulation, line return,...etc.)
I want to go a bit further. In the text I'm returning, there are some <img/> tags and I'd like to replace those tag by the real images themselves.
I searched around and found no solution as of now. I understood that you can't add an image to a textarea (other then in a background), and if I choose a div tag, I won't have the indenting anymore (and therefore, harder to read)
I was wondering if using a <g:textField/> or an other tag from the grails library will do the trick. And if so, How can I append them to a page using jquery.
For example, how to append a <g:textField/> in jquery. It doesn't interpret it and I get this error
SyntaxError: missing ) after argument list [Break On This Error]...+doc).append("<input type="text" id="FTMAP_"+nb_sec+"" ...
And in my javascript file, I have
$("#FTM_"+doc).append("<g:textField id='FTMAP_"+nb_sec+"' ... />
Any possible solutions ?
EDIT
I did forget to mention that my final intentions are to be able to modify the text (tags included) and to have a nice and neat indentation so that it is the easiest possible for the end user.
You are asking a few different questions:
1. Can I use a single HTML tag to include images inside pre-formatted text.
No. You will have to parse the text and translate it into styled text yourself.
2. Is there a tag in the grails standard tags to accomplish this for me?
No.
3. How can I add grails tags from my javascript code.
Grails tags are processed on the server-side, and javascript is processed on the client. This means you cannot directly add grails tags via javascript.
There are a couple methods that can accomplish the same result, however:
You can set a javascript variable to the rendered content of a grails tag. This solution is good for data that is known at the time of the initial request.
var tagOutput = "${g.textField(/* etc */)}";
You can make an ajax request for the content to be added. Then your server-side grails code can render the tags you need. This is better for realtime data, or data that will be updated more than once on a single rendered page.

Keeping HTML tags in Rails

I'm working on a pastebin clone. I need the user to be able to type in HTML without it being used like HTML. For example, my user types "<html> Hello, world! </html>", and the html tags don't appear because the text is being treated like HTML. I do not want this to happen.
I want this to happen to this line:
<%=simple_format(#post.content )%>
How could I accomplish this? I tried using raw and .html_safe and they didn't work.
The SanitizeHelper module provides a set of methods for scrubbing text of undesired HTML elements. These helper methods extend Action View making them callable within your template files.
http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html

Generating a link with Markdown (BlueCloth) that opens in a new window

I'd like to have a link generated with BlueCloth that opens in a new window. All I could find was the ordinary [Google](http://www.google.com/) syntax but nothing with a new window.
Ideas?
Regards
Tom
Here is a complete reference for markdown: http://daringfireball.net/projects/markdown/syntax
And since there is no mention of how to set the target attribute, I would believe it is not directly possible, but the reference also says:
For any markup that is not covered by
Markdown’s syntax, you simply use HTML
itself. There’s no need to preface it
or delimit it to indicate that you’re
switching from Markdown to HTML; you
just use the tags.
Source: http://daringfireball.net/projects/markdown/syntax#html
So I would suggest you have to use the html syntax for links like this
update
if you wrap the markdown generated content in a div with a specific id like this:
and you use jQuery, you can add the following javascript:
$('#some_id a').attr('target','_blank');
Or you can save the BlueCloth output in a variable before outputting.
markdown_generated_string.gsub!(/<a\s+/i,'<a target="_blank" ')

Resources