I am looking for a way to inject HTML into an already loaded page in response to a user clicking the page.
Precisely, what I need to do is:
Capture a click
Generate a HTML string to be displayed
Inject that HTML string into the page, to be displayed on top of the current markup.
Of these, 1 is done and 2 is partially complete, so now I need to display the HTML string on top of the current markup (like a pop-up box). The injected markup should disappear when the markup behind it is clicked. How can I do this?
This is being developed as a feature of an Angular2 web app, so I'd like to achieve this using only typescript, HTML and CSS for styling, rather than use an existing library.
A few pointers to make things a little clearer:
Generated HTML will be interactive, so it may be clicked on, not just a simple popup or alert.
Generated HTML should be removed from the DOM when an area outside of that HTML is clicked.
Related
I want to click an element in a list on a website through VBA macro. However, the website is build in a way that it has another "html", "head" and "body" tags build into the ones that are on top, possibly because it loads a list of clickable items only after I choose "open items" from a dropdown.
I think this is the reason I cannot find a way to reference the button in my code, as it is sitting in the second html. For example, using IE.Document.GetElementsByTag("html") will display 0 even though there are more than one html tags on this page (two to be exact). The furthest I can get with my scraping is right before the second html tag in the page. Also when i try to use Debug.Print IE.Document.GetElementsByTagName("body")(0).innerText, the code after second HTML tag is omitted there.
I am not posting any more code because the problematic part is visible only under "Inspect element" in IE, not when I view "Source" in IE. Therefore I am just hoping for more general suggestions on how to get to an element in such embedded HTML document.
Thanks, Bartek
I'm creating a webform using a marketing automation platform. I want to add a field that functions with jquery to do an autocomplete. Unfortunately, the forms are generated through a WYSIWYG editor in the software, and then generated and put into the page when it renders. The only code for the form that appears in the HTML for the page is a simple variable placeholder - %%FORM::DEFINITION%% - which is then replaced with the form code when you visit the URL. The software support team tells me that making the change I want to make is impossible, which I see as a challenge.
The only thing I need to be able to do is add an id="autocomplete-dynamic" attribute to the input on the form. I had two ideas how I could achieve this.
The first, and most preferable option, would be some script that runs at the bottom of the page that simply inserts the attribute into the input tag after the page renders out. This would only be a client-side change, but since all this does is make the text field capable of looking up values out of another table, it should be fine. If someone had a script blocker in place, they would not be prevented from typing into the text field normally, it's just that the auto-lookup wouldn't work. We're trying to make it easier to select an item from a list of thousands of possibilities, but if someone had to type in their own entry without the autocomplete, it would not be a disaster. This seems like a clean solution, but I am not sure if it can be done.
The other possibility is to get the form code out of the software and embed it in a separate HTML document, and make the change there. You can extract the raw HTML for the form for use on another page, but pasting this code right back into the landing page causes errors. So, the thought then was that if I have taken the code generated by the software and put it in an HTML page on a separate web server, I could modify it as needed, and then turn around and use an iframe to stick it right back in the landing page. The software shouldn't complain because the form is being used on an external site like it's supposed to be... I have just hidden that external site back inside the platform-hosted page.
Option 1 would still be much easier to implement, I think, provided it is actually possible.
Thanks in advance.
Your first solution seems completely appropriate.
$(function() {
$('#myForm input').attr('id', 'autocomplete-dynamic');
});
This can be added anywhere inside a script tag because it's wrapped in a shorthand document.ready function, which waits to run until the DOM is ready.
A little context on my problem.
I am updating the MathML in this div that is currently displaying HTML. When I load the page the first time, if runs the MathJax script and displays all the MathML perfectly.
When I click "Preview Changes", a button that takes the current changes made in a text area and displays them on the preview div, the MathML disappears.
I think problem here is that refreshing the div doesn't trigger the MathJax script. I have tried $.getScript(), and I tried adding a script using document.createElement(script) everytime the preview changes button is clicked, but all that to no avail.
I was hoping if someone could help me w/ this.
Thank you in advance.
MathJax.Hub.Typeset() is the JavaScript command that can re-render the math content within your page or within individual elements that have been updated by current changes. If you are sure that all typesetting is finished, then you can call it directly, but in general it is good to use the safe way to call it, like this MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
Read more instructions for how to use it here: http://docs.mathjax.org/en/v1.1-latest/typeset.html
For instance, MathJax.Hub.Queue(["Typeset",MathJax.Hub,"previewdiv"]); would re-render the updated contents of the HTML element with an ID of previewdiv after you have updated its contents using your jQuery call.
I've a question about best practices in javascript.
I've a dropdown menu with some statuts. If the statut is : external, I want to display a form. I don't know the best way to do this. Do i need to hide a DIV from the DOM and display him when i need it or do i need to generate my form dynamically in jquery and make a call ajax to populate some data.
It really depends on your application. If you already have a lot of elements in the DOM, and the likelyhood of actually needing to show this form is low, you may want to add it later (using ajax) because in most cases you don't need it anyway. However, if your DOM load is light, and in most cases the form will be shown, you make want to have it ready and hidden so that is can be quickly shown.
There is also a middle ground where you can "lazy load" it (using javascript on page load), and keep it in a json object until it is ready to be used. This will keep your DOM responsive, and give the added benefit of a quicker load of the form.
it depends on the probability of user clicking on that element and number of elements already present in the DOM. I suggest to create form runtime whenever user performs action instead of hiding it. There are some browser plugins which shows all hidden elements in a page.
Unless your page is unusually large already or there are a lot of different forms like this that could be used from the same page, putting the HTML into the page and just starting out with it hidden gives you the advantage that all your markup is in one place (in the HTML file that represents your page) and can more easily be centrally maintained that way.
When you start putting markup into your javascript, you split up the maintenance of the markup between both the HTML of the page and the HTML that is embedded into your page.
If, on the other hand, you had a lot of these forms that were all slightly different that could all be used from the same page, then it gets messy to pre-specify all possible combinations of the form in the original HTML and you would probably be better off dynamically generating it via javascript or perhaps generating it from a template with slight modifications.
I am programming a CMS that allows creating and editing elements (content blocks) on the site in a WYSIWYG manner. basically, when logged in, you see visually the same website, but hovering and clicking on elements brings up either editors (like Aloha) or additional controls.
For instance:
hovering a paragraph would display a
small menu on its side which allows
selecting between left, center and
right alignment
clicking on a paragraph would make it editable
hovering over an image would display a dot on the right side of the image, which can be dragged thus changing the width of the image (height would update proportionally)
hovering any of the blocks in the website would bring up a "+" button that allows to create another block before the hovered block.
etc.
My current strategy is to use a similar technique that i saw used on Nike Better World and have been using ever since: there's an instantiating javascript that invokes jquery plugin on each html element that has a data-controller attribute, the name of the plugin being specified by the data-controller attribute.
Slightly extending this concept i would use it to attach all kinds of controls to the content blocks.
But, being a noob, only recently i came across javascript mvc frameworks like backbone.js. I've been working with MVC on the server side (in Kohana), but never yet in javascript. It seems that i can use it, but it's unclear to me, what would be the strategy. The CMS i'm working on is a kind of a hybrid between a proper javascript application, and an old-school html website. I don't understand, how can i use, e.g., backbone.js's collection object for content blocks, if they are already loaded in the page html (that doesn't make sense to me to load them with javascript).
does anybody have any suggestions?
Quick answer:
ContentModel: It's the data item you want to edit. The actual content. e.g.: $(#mydiv).text();
DisplayView: The view that will display this data (This is where ContentModel is first instantiated and initialized with $('#mydiv).text()
EditView: The view of "editing" this data (a text area perhaps) - When created, initialized with the ContentModel (same model object)
EditTemplate: The corresponding html of "how" the edit box should look like (can populate and create using _.template(...) i.e, a textarea/box etc.,
Now DisplayView holds the current value of the text (in it's model) at initialization itself. If you have an 'edit' button/link on this view (a div block for example), clicking it creates a new EditView and just "hides" the current div (#mydiv) that is showing the text and shows the EditView loaded with the model data in it's place ($.append() is your best friend here).
You click cancel, just hide/remove EditView and show the underlying div back. If you update, on success (from server) just hide the EditView and show the data on DisplayView! DisplayView can subscribe to the "change" event of the model! So once the model changes, the view knows what to do!!
Hope this helps!