I have a simple WebApp application that reads the data from google sheet and displays in HTML using materialize css( 1.0.0), JS. I am new to this stack of tools. HTML page has 2 containers and bottom one supposed to be populated (using innerHTML assignment)based on the selection on the top container. The bottom container content is simple card contents in table format. I want to put a HTML Select object with List of values to be displayed and created a Appscript function. I am assigning the function output to innerHTML like this.
-- JS
function generateCards(text_card){
document.getElementById("container-id").innerHTML += text_card;
}
function createAuthorCards(authorName) {
document.getElementById("container-id").innerHTML = "";
google.script.run.withSuccessHandler(generateCards).getCardDynamicText(authorName) ;
}
--
If put copy/paste the function output in HTML it works( goes through rendering when refereshing), but if i use InnerHTML, the listbox is disabled, but all else seems ok. needed imageplease see the 2 attachments needed and missing_listbox images.enter image description here Is there any limitations of using innerHTML in webApp?
I was using google Webapp. It looks google doesn't allow the editing of dynamically created items. So I ended up using Modals to make the selections and save it.
Related
I'm writing a WinJS app that takes an HTML fragment the user has copied to the clipboard, replaces their
Later, when I go to display the .html, I create an iFrame element (using jQuery $(''), and attempt to source the .html into it, and get the following error
0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
I don't get the exception if I don't base64 encoded the images, i.e. leave them intact and can display iframes on the page with the page showing images.
If I take the html after subbing the urls for base64 and run it through toStaticHTML, it removes the src= attribute completely from the tags.
I know the .html with the encoded pngs is right b/c I can open it in Chrome and it displays fine.
My question is I'm trying to figure out why it strips the src= attributes from the tags and how to fix it, for instance, creating the iframe without using jquery and some MS voodoo, or a different technique to sanitize the HTML?
So, a solution I discovered (not 100% convinced it the best and am still looking for something a little less M$ specific) is the MS Webview
http://msdn.microsoft.com/en-us/library/windows/apps/bg182879.aspx#WebView
I use some code like below (where content is the html string with base64 encoded images)
var loadHtmlSuccess = function (content) {
var webview = document.createElement("x-ms-webview");
webview.navigateToString(content);
assetItem.append(webview);
}
I believe you want to use execUnsafeLocalFunction. For example:
var target = document.getElementById('targetDIV');
MSApp.execUnsafeLocalFunction(function () {
target.innerHTML = content}
);
I have implemented a reporting engine in mvc using html rendering. I had to create custom paging functionality based on the metadata returned via the render method. I am now looking at implementing interactive sorting in the same fashion which is looking like a more daunting task. It seems there is a setting in the HTML Device Information Settings header for html rendering called ActionScript.
ActionScript(*)-
Specifies the name of the JavaScript function to use when an action event occurs, such as a drillthrough or bookmark click. If this parameter is specified, an action event will trigger the named JavaScript function instead of a postback to the server.
My question is has anyone used this feature? Since I lose authentication after the report is rendered I will have to somehow make authenticated callbacks in the controller. It seems to me it may be easier just to add parameters for sorting in the report, however I would like to keep the interactive sorting in the report.
--Edit Solution1---
It turns out that the * next to script name above means the ActionScript parameter is being depreciated after ssrs 2012. Thus, I decided not to pursue it. If anyone else stumbles upon this then the best way I thought of to simulate interactive sorting without post backs is detailed below:
On the Report
1. Add a parameter to the report SortField1
2. Add a Sort condition to the Tablix or group you wish to sort. Tablix-Sort Expressions
3. Set the expression of the sort to Fields(Paremeters!SortField1.Value).Value
4. Set the default value of parameter SortField1 to the default sort field
5. Set Allow Nulls of the parameter to true.
6. Add a image or label for each column you would like to sort by
7. Create a action for the element created in step 7 with code similar to
="javascript:void(reportSortRequest('ColumsFieldName'))"
NOTE: Your view or view descendant will have need to have an identical function defined to accept the action
In the View
Implement the function reportSortRequest(fieldName). This should set
Model.SortField1 and invoke the post back to the controller to
re-render the report.
In the Controller (This is for Ajax post backs that sends a model that will have a field SortField1)
Call the render with report information including SortField1.
Updated with client script that works to access the report markup wrapper.
The report element generated by the ssrs markup can be accessed in your view by its tags. I have that found the following will work using the predetermined ssrs wrapper element #oReportCell":
Loaded in iframe :
var frameContent = $("#myIFrame").contents();
var ssrsContentElement = frameContent.find("#oReportCell");
Loaded in div:
var ssrsContentElement = $("#myDiv").find("#oReportCell");
Function to load html blob into either a frame or a div. Depending how the report was configured, the content is either a url of a temp file or the html markup.
function setReportContent(content, isUrl, renderInIFrame) {
if (isUrl) {
if (renderInIFrame) {
$("#reportContent").html("<iframe id='reportFrame' sandbox='allow-same-origin allow-scripts' width='100%' height='300' scrolling='yes' onload='onReportFrameLoad();'\></iframe>");
$('#reportFrame').attr('src', content);
}
else
$("#reportContent").load(content);
}
else {
if (renderInIFrame) {
$("#reportContent").html("<iframe id='reportFrame' sandbox='allow-same-origin allow-scripts' width='100%' height='300' scrolling='yes' onload='onReportFrameLoad();'\></iframe>");
$('#reportFrame').contents().find('html').html(content);
}
else
$("#reportContent").html(content);
}
if(!renderInIFrame)
showReportWaitIndicator(false);
$("#reportContent").show();
}
Notice that if you want report images with auto-resize property set to be rendered correctly you have to turn on allow-scripts so that the ssrs resize js functions can fire, be careful.
I've just started using the tag cloud feature for a new site i'm developing.
but now I've run into some problems
I can set the links in my tag cloud to go to a page, but I have many pages with a tab container.
so for instance, I have a tab container. one of its panels is a sports panel. the tab container has three other panels, say food, travel and drinks.
how do I make a tag that goes directly to that panel in the tab container?
really stuck here.
tried creating a normal a id="something" name="something", and tried creating the tags a href to that name with a #, but that didn't work.
could somebody please help me
would, of course, be greatly appreciated
A # is your best bet. So for example if you set up your link to appear as:
Link text
Then you can bind to the "hash change" event using javascript. jQuery example below.
// on load
jQuery(document).ready(function(){
// bind window hashchange event
jQuery(window).bind("hashchange", function(){
// get hash selected
var hash = window.location.hash;
// *** now do something with that information *** //
// *** eg, show hide panels where a nested element, attribute or data matches hash *** //
});
});
If you're doing it this way you should make all the "tab clicks" simply bound hash changes too, forgetting any previous functionality. Then it will be solid, and consistent.
You could also do the same using query strings. And if you're not a fan of the "hashchange" then do it another way. The key is that you would have a javascript function that looks for something in the url, then does something about it!
EDIT
Add to the "do something section" assuming all your tabs are of the same class and the hash is the same name as the ID
jQuery(".tabs").hide();
jQuery("#" + hash).show();
I'm trying to load content from a different file into a div element within the current file using the jQuery load() function. Nothing fancy, just loading it and that's it. However the links that are contained in the loaded file become "disabled", you cannot click them, and pseudo-classes like :hover seem to be left out as well. Is there a solution to this?
$(document).ready(function() {
$("div.content").load("content.html");
});
let's say content.html contains just this line:
xxx
When it is loaded into the <div class="content"> the link is not clickable. It is colored according to the css, however the :hover effect doesn't work, and it behaves like normal text - not a link. This is a problem because the content I'm trying to load has a couple of links, and none of them work after being load()'ed.
I believe your issue is:
You use $('div.content').load('content.html') to send a request for content to (later) be inserted into the DOM.
You then run some code to specify handlers for nodes using $(document).click, $(document).bind etc - but this code runs before the new nodes have been added to the DOM.
New nodes are then added when the .load call completes.
The behaviour that you defined on all the origional nodes isn't being followed on the new nodes.
If that is the issue your're describing - then you need to add all the same bindings to the new nodes once they're created.
i.e. you need to provide a callback to add the bindings to the new elements:
function on_data_loaded() {
$('div.content ...').hover(.....);
// etc.
}
$('div.content').load('content.html', null, onloaded);
(note that's not a particularly clean way of doing it, but it should explain what needs to be done).
Is it possible to pass the url attribute a dynamical query string? E.g url( ./SOME_IMAGE_GENERATOR?image=1 ); where image varies?
I need this attribute to be set via JS:
$( "#elem" )[ 0 ].style.background = "url( ./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1 )";
The link in the url points to a file, that generates and returns an image.
The image is generated correctly, but not applied as backround.
Clarification
The image I want to put inside does not exist yet. It is generated and returned by the page circuits.php and depends on the arguments.
The background is well changed, if the image exists. I have noticed that unlike changin the src attribute of the img tag, while the argument creates a request by the browser, sends and recieves headers and info, the background does not.
I'd thought about sending a request to the circuit.php generator, make him save the image on the server and then, with setTimeout, change the background, but I cannot rely on a certain time for the generation.
That is the problem. Now, do you guys have any ideas how to overtake this?
Working Example
I've replicated your scenario with a Jsfiddle and a image generating script held on my own website.
As you can see it is indeed possible to change the background dynamically with a generated image:
http://jsfiddle.net/DigitalBiscuits/Eh8yY/6/
Debugging your code
So....what's wrong with yours?
Well firstly if you're using Firefox or Chrome, use the developer tools to check what's going on. Make sure no Javascript errors are showing up in the console.
Then I would suggest you check that your javascript is actually selecting the element, and that it is able to change the background (lets say to a static image). Isolate the code you that's giving you problems and test it out in a new empty page, kinda like the JSfiddle I've linked you to above.
On a side note, your javascript code looks a bit foreign to me.
Instead of:
$( "#elem" )[ 0 ].style.background = ...
try using:
document.getElementById('myImg').style.background = ...
Lastly, ensure that you're setting the correct headers in your php script that generates the images, and that no output is happening before the headers are set.
Are you using jQuery?
This should be very easy to do.
Store the generated image url in a variable, and then use jQuery to change the CSS background image value, like so:
var imageUrl = "./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1";
$('#myDiv').css('background-image', 'url(' + imageUrl + ')');
Here's a a jsfiddle demonstrating the concept. Click the div to see the background-image dynamically changed via JS.
http://jsfiddle.net/DigitalBiscuits/F3PUy/2/
Yes its possible to set on-the-fly images as background images, using CSS.
This is no different to how you can use on-the-fly images for img elements.