I have the following line of code in my JavaScript program
MyFrame.src = mainPath + "/resources/help.htm";
This is the default but in some cases I would like to load the contents of this iFrame with a string that I build dynamically, such as:
"<html><head></head><body>This is additional help that was built dynamically on the fly</body></html>"
Is there a way to do this?
Thanks
Yes:
MyFrame.contentWindow.document.write("<html><head></head><body>This is additional help that was built dynamically on the fly</body></html>");
Related
New to coding, trying to see what/if Tags would make this code work
So I'm a beginner with basic understanding and more of a Graphics/ Designer than code based. I found a codepen by WEDOO that has exactly what I need and want to try to just swap my "animationData" to see if I can get it to work and then modify it as needed for my test (will be assign the button code to various objects for the SVG). I Can't seem to find the right "Tags" or determine if its referencing an external script...I'd image it just needs the right information to function...is that correct?
Thanks in advance!
var animation = bodymovin.loadAnimation({
container: targetAnim,
path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/914929/data-testo4.json...
My output from BodyMovin in a JSON file:
var animationData =
{"v":"5.4.2","fr":29.9700012207031,"ip":0,"op":149.000006068894...
Does it make sense to think that I need replace the var animation with info that should be the targetAnim with the code in the JSON file? So far put the var animationData breaks things and does nothing (visually).
The bodymovin.loadAnimation can be passed either a URL to a Bodymovin JSON via the path option OR you can pass the animation JSON inline by setting the animationData option instead.
In you case it would end up looking something like:
var animation = bodymovin.loadAnimation({
container: targetAnim,
animationData = {"v":"5.4.2","fr":29.9700012207031,"ip":0,"op":149.000006068894...
...
})
<span class="left-menu-title selectorgadget_selected" data-xpal="xpath-verify-selected" style="">Admin</span>
How can I write an XPath or CSS expression? I tried the plug-ins does not work.
If anyone knows how to click an item from the left-side bar after log-in to the site will be a great help. it does not click, the script fails.
#FindBy(xpath = "//SPAN[#class='left-menu-title'][text()='Admin']")
WebElement clickOnAdmin;
public WebElement adminClick() {
return clickOnAdmin;
}
There are multiple classes but you are checking left-menu-title only.
The case of a SPAN tag name may also be a problem depending on a driver.
Fixed version, using contains() (note that it is not an ideal class XPath check - you need the concat and normalize-space, strictly speaking):
//span[contains(#class, 'left-menu-title')][text()='Admin']
what #alecxe wrote is a very good pointer.
Usually when a website has a strong front-end code embedded with data+JS, you should use functionalities. Especially when absolute xpath does not work such as your case with data var on the front-end. "data-xpal="xpath-verify-selected"
Guru99 xpath fonctionalities
also please verify if your application or website is not embedded with iFrames.
if so please change iframe window.
if you can provide the stackTrace Error. I assume you are talking about NullPointerException or NotFindElementException.
As per the HTML you have shared, the following code block must work :
#FindBy(xpath = "//span[#class='left-menu-title selectorgadget_selected' and contains(.,'Admin')]")
WebElement clickOnAdmin;
public WebElement adminClick() {
clickOnAdmin.click();
}
Note : As you named the function as adminClick(), assuming you want to invoke click() method on the WebElement clickOnAdmin, click() method won't return anything. hence you have to discard the return clickOnAdmin; statement as well.
I would suggest trying writing your XPATH as //span[contains(#class,'left-menu-title') and .='Admin']
And instead of just element.click(); use javascript executor click. Like how it's below:
JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", driver.findElement(By.xpath("//span[contains(#class,'left-menu-title') and .='Admin']")));
Hope this works for you! Let me know.
I want to give my users the possibility to create document templates (contracts, emails, etc.)
The best option I figured out would be to store these document templates in mongo (maybe I'm wrong...)
I've been searching for a couple of hours now but I can't figure out how to render these document template with their data context.
Example:
Template stored in Mongo: "Dear {{firstname}}"
data context: {firstname: "Tom"}
On Tom's website, He should read: "Dear Tom"
How can I do this?
EDIT
After some researches, I discovered a package called spacebars-compiler that brings the option to compile to the client:
meteor add spacebars-compiler
I then tried something like this:
Template.doctypesList.rendered = ->
content = "<div>" + this.data.content + "</div>"
template = Spacebars.compile content
rendered = UI.dynamic(template,{name:"nicolas"})
UI.insert(rendered, $(this).closest(".widget-body"))
but it doesn't work.
the template gets compiled but then, I don't know how to interpret it with its data context and to send it back to the web page.
EDIT 2
I'm getting closer thanks to Tom.
This is what I did:
Template.doctypesList.rendered = ->
content = this.data.content
console.log content
templateName = "template_#{this.data._id}"
Template.__define__(templateName, () -> content)
rendered = UI.renderWithData(eval("Template.#{templateName}"),{name:"nicolas"})
UI.insert(rendered, $("#content_" + this.data._id).get(0))
This works excepted the fact that the name is not injected into the template. UI.renderWithData renders the template but without the data context...
The thing your are missing is the call to (undocumented!) Template.__define__ which requires the template name (pick something unique and clever) as the first argument and the render function which you get from your space bars compiler. When it is done you can use {{> UI.dynamic}} as #Slava suggested.
There is also another way to do it, by using UI.Component API, but I guess it's pretty unstable at the moment, so maybe I will skip this, at least for now.
Use UI.dynamic: https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/
It is fairly new and didn't make its way to docs for some reason.
There are few ways to achieve what you want, but I would do it like this:
You're probably already using underscore.js, if not Meteor has core package for it.
You could use underscore templates (http://underscorejs.org/#template) like this:
var templateString = 'Dear <%= firstname %>'
and later compile it using
_.template(templateString, {firstname: "Tom"})
to get Dear Tom.
Of course you can store templateString in MongoDB in the meantime.
You can set delimiters to whatever you want, <%= %> is just the default.
Compiled template is essentially htmljs notation Meteor uses (or so I suppose) and it uses Template.template_name.lookup to render correct data. Check in console if Template.template_name.lookup("data_helper")() returns the correct data.
I recently had to solve this exact (or similar) problem of compiling templates client side. You need to make sure the order of things is like this:
Compiled template is present on client
Template data is present (verify with Template.template_name.lookup("data_name")() )
Render the template on page now
To compile the template, as #apendua have suggested, use (this is how I use it and it works for me)
Template.__define__(name, eval(Spacebars.compile(
newHtml, {
isTemplate: true,
sourceName: 'Template "' + name + '"'
}
)));
After this you need to make sure the data you want to render in template is available before you actually render the template on page. This is what I use for rendering template on page:
UI.DomRange.insert(UI.render(Template.template_name).dom, document.body);
Although my use case for rendering templates client side is somewhat different (my task was to live update the changed template overriding meteor's hot code push), but this worked best among different methods of rendering the template.
You can check my very early stage package which does this here: https://github.com/channikhabra/meteor-live-update/blob/master/js/live-update.js
I am fairly new to real-world programming so my code might be ugly, but may be it'll give you some pointers to solve your problem. (If you find me doing something stupid in there, or see something which is better done some other way, please feel free to drop a comment. That's the only way I get feedback for improvement as I am new and essentially code alone sitting in my dark corner).
Is there anyway we can add data like in php echo "something" in the first html page. I want to know the server's timestamp to format a document created time like 2 hours ago, the document already has a property createdTime. When I use Meteor.Collection.find, I cannot add the server time by using transform.
I can use Meteor.method but I may have to format time before the result arrives.
Thank you.
Well, after digging around the code, here is the answer.
You can use the global variable __meteor_runtime_config__ to add more information to the first downloaded html file. In my case, in a server side javascript file, I add __meteor_runtime_config__.now = new Date().getTime() and this value will be available on the client side
the __meteor_runtime_config__ approach is run-once; that is, only changes made at package load time (not Meteor.startup()) are taken into account, and then the __meteor_runtime_config__ snippet is frozen.
To pass run-time (per-page) metadata to the page, it looks like the only option is to set a custom tag on the <html> element using the (public, but undocumented) WebApp.addHtmlAttributeHook API.
I'm trying to build a website (I learning this whole subject now), and maybe the anwser is very simple.
I am devaloping in ASPX/C#, and I want that in form, there is a select field (<select>)
with option of number of files to upload, the max files to upload is 4.
I want that after I select the number of files, there will be some up;oad fields (in the number that I already chose).
My question is how can I do that? (maybe with javascript of AJAX ? I have no idea how)
Wish for help, Thanks.
I am not sure if this is what you are looking for, but give it a try
Try this:
http://jsfiddle.net/2bZwD/
`$('#select1').change(function(){
var count = $(this).val();
var uploadcount = 0;
$('.upload').each(function(){
if (count > uploadcount)
{
$(this).show('slow');
uploadcount++;
}
else
{
$(this).hide('slow');
}
});
});`
There will be two approach
1) Javascript : Using javascript you can read the max file number and add the Upload html tag on the document . As you are using ASPX , it will not work because when the form was build and viewstate was genetated these fields were not the part. If you will use ASP.NET MVC it will work and you easily using the jquery
2) If you want to use the ASP.NET webform you have to do the AutoPostback equals to true for the dropdown list and then read the value on the Selected Index change event on the server and file upload control on the server side. It has a drawback that it will require full post back. You can use the Updatepanel to do the partial post back and get the file controls in the page.