We are using evoPDF to convert our AngularJS form to PDF. Since the content on the page loads after few service calls, we understood that we need to use the delayed/Manual triggering mode options from evoPDF.
Below is the javascript that needs to be executed after the required delay or the content is loaded completely:
if (typeof evoPdfConverter != "undefined") {
evoPdfConverter.startConversion();
}
However, when we have the above script on an external JS file and refer the JS file on the main html page, the conversion fails. But when we add this script in the main html page itself(internally), the conversion works.
Is this an issue with evoPDf or any additional scripts to be added? We cannot add any internal scripts on our html page as all the pages are generated dynamically.
Related
I am trying to use webview element in a universal app using javascript. My aim is to browse some websites adding some content of my own to its html document.
First, I set src attribute of webview to www.example.com and it browses the site. This was just to make sure the webview is capable of browsing the site.
Next, I tried getting the html and load it to webview using navigateToString method like this:
$.get(url, function (data) {
webView.navigateToString(data);
});
This causes the page to be loaded out of shape (aperarently some .js or .css files are not loaded or blocked from running), or it isn't even loaded.
I wonder what is the difference loading the page by its url and loading its html by manually like this. And is there a workaround I can overcome this problem.
Note: I'm new at both js and html.
A web page is usually not made of a single HTML file. In order to make it work, you will have to retrieve not only the HTML but also the javascript and the css files.
This can be a tedious work.
If you are trying to open something from the web, the easiest way is to perform a regular navigate() which will take the URI as parameter and perform a "full" browse (as the browser will do). The retrieval/loading of the CSS/JS will be done for you.
If you want to open a local page (local to your application), navigateToString() is a good path but you will have to host locally all the page dependencies (css/js fiels) or embed all the style and code in the HTML page itself.
So I am working on a website trying to use jquery/ajax to load content into the home page. Current test site is [http://newconstructionflorida.net] the home & about me page work without any issue, however the property search link does not load.
The content/property-search.php file I am trying to load contains a script:
<script src="//idx.diversesolutions.com/scripts/controls/Remote-Frame.aspx?MasterAccountID=115580&SearchSetupID=143&LinkID=0&Height=2000"></script>
What am I missing to be able to get this script to execute when loaded via AJAX? If I insert it into the home page directly it works without issue so it must be related to the jquery/ajax.
Loading .js scripts via ajax is not a good idea since .js scripts functionality is always bound to the loaded HTML DOM and my not work properly if loaded asynchronously via ajax after the DOM is fully loaded.
What you can do is loading the script once the ajax response is completely received using javascript functions like getScript() or .append().
See this answer here on how to use javascript to append an external script to your page:
I have a tabbed panel where onclick on a specific tab i need to load three js files and a html file into current DOM and execute a method related to those js and html file.
The html file contains templates and need to be loaded into a hidden iframe.
I am able to load the same by appending the respective tags to the body but i need to execute a function after all the files are loaded.
How to get the event after all the files being loaded.?
--------------- New problem ----------------------
Im geting the event successfully after loading the files.
I have below problem.
I have a html file im loading as above and giving the content to a dynamically created iframe as follows
content = document.createElement("iframe");
content.style.display = "none";
content.src = 'data:text/html;charset=utf-8,' + encodeURI(responseText);
My base protocol is https. When the protocol is http im getting no error. Now im getting the following error.
The frame requesting access has a protocol of '', the frame being accessed has a protocol of 'https'. Protocols must match.
Please help.
You hinted at the solution in your last sentence:
Trigger an event!
Register a handler that will wait for your 4 custom events, keep track of which were already received via a global array and execute your function when all required events were triggered.
Of course you will trigger() a custom event at the last line of every one of your asynchronously loaded files.
I am sharing a script tag with client to deploy my web application on client's website.
Basically by this way, he can embed my app wherever he want on his site.
The script which I give him just calls one action method in my MVC application and receives a javaScript as a response.
As a fist step, this returned JavaScript inserts all js and css references (required by my application) in the client's head tag
function createScriptElement(src) {
var tmp = document.createElement("script");
tmp.src = src;
var head = document.getElementsByTagName("head")[0];
head.appendChild(tmp);
};
and then in second step, it writes the html content inside one dynamic div.
document.write(format("<div id='mycontainer'>{0}</div>{1}", AppHtml,initcalls ));
The "initcalls" contains the initial function in my app's javascript which I expect to execute immediately. So I put it in Script tag as below.
contents of initcalls are:
<script type=\"text/javascript\"> function icInitApp() { ..... }; </script>
The problem is: there are some dependencies in my application on the js references. The HTML is getting loaded before the head tag in client's page recognizes and loads the js references.
Is there any way to hold my (thus dynamically rendered) application's init function until all js references are fully loaded by head tag?
I tried giving setTimeout() with 5 seconds but it will not be proper solution accepted by client.
A similar kind of situation is discussed in the link below
How to detect if javascript files are loaded?
You can also try to use the $(window).load() event since this will be fired when the page is fully loaded.
$(window).load(function(){
//your code here
});
PS: Be aware that you will need to load the jQuery in your page to make the above code work.
You can try with jQuery:
$(document).ready(function()){
// Your code goes here
};
Ive been playing with the load, get, ajax and get scripts function.
The most appropriate to the majority of function where I intend to load in content on a page would be the load function. It is a simple and effective way of getting the relevant content from an associate page.
But since it does not include scripts and the new content does not respond to the pages ready. functions I was wondering if there was a simple enhancement we could make that would allow the scripts of the page to be refreshed to include loaded content.
Something like
function loadall(url,container){
$(container).load(url);
scritps.reset();
}
What would be the way of doing this.