I want to execute a piece of code once view is completely rendered.
Click on button, web service will be called
Once response is received, lot of data will get rendered on ng-repeat
After view is completely rendered, execute a piece of code
I know I can use callback once response is received but HTML rendering might take time. To avoid that I can also write my piece of code in $timeout function but that doesn't feel right approach to me. Any suggestions?
Thanks in advance!
Related
I'm writing an app in Swift 3.0 and I'm trying to scrape data from the search results of a webpage. I perform the search by including the search query as a parameter in the url, but the html that's getting returned to me has no results. I believe this is because the ajax on the webpage has not finished and populated the html with the search results by the time the html is returned to my app.
Question
How do I wait for the search results to load before getting the html?
EDIT:
URL: https://uscdirectory.usc.edu/web/directory/faculty-staff/#basic=a
This url performs a search on the USC directory for the character 'a'. The html in my browser on my MacBook includes these tags:
<tbody>(Search results are here)</tbody>
but in my app the html that is returned to me has nothing:
<tbody></tbody>
This is because the webpage initially has no search results, and then some time later the ajax finishes and the table body is populated. How do I use a URLSessionDataTask object in Swift to wait until the ajax finishes and ONLY THEN give me the html, such that I actually get the search results?
The workaround solution that I devised is unpleasant but functional. I created a WKWebView off screen and loaded the webpage I was interested in. I used a Timer to wait some arbitrary number of seconds for the javascript on the page to finish and then I retrieved the html from the webview
You can use property ajaxComplete() to fix this.
Ex:
$(document).ajaxComplete(function(){
//your code to render HTML
});
It will render your HTML only when ajax request is complete.
So I have a curious situation and I don't think it's going to work, but I figured I'd ask in case it is and someone knows how to. I am using a 3rd party website to create marketing funnels. You can add your own custom html and javascript, but it parses out the html in a rather unfavorable manor. Basically you specify an element on the page and it appends it as a data attribute and dynamically loads it into the DOM. Since this is happening this way, my app isn't being initialized because it's not in the DOM on page load. Is there a way to make this work? I'll explain a little deeper my configuration.
I add custom html such as:
<div data-ng-app="AppName"><div data-ng-controller="ControllerName"><div>perform controller logic here</div></div>
As you can see, this needs to be in the DOM for the app to initialize and, well work. Is there a way to initialize the app after the page has loaded dynamically? I can add my own JS files in the custom html field, but thats about as far as I can go for customization. Any help is appreciated!
Maybe you should execute angular's bootstrap function manually in your script after the required dom loaded.
var app = angular.module('appName', []);
app.controller([...]);
angular.bootstrap(document.getElementById('divId'), ['appName']);
For more information, you can see this doc https://docs.angularjs.org/api/ng/function/angular.bootstrap
I'm trying to create an add-on for Google Docs using a modal dialog with the HTML Service but the time between running my script and something happening in the dialog window is pretty slow.
Here's a really simple example. (It's a little hack-y because calling foo from Example.html overwrites the first log)
// Code.gs
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('Example')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
Logger.log("hi");
var temp = Logger.getLog();
DocumentApp.getUi()
.showModalDialog(html, temp);
}
function foo() {
Logger.log("bye");
}
and
// Example.html
<script>google.script.run.foo();</script>
If I run this there's a ~4 second difference between the first log and the second log. Is this just the way it is?
Short answer: Yes. Your approach is among the best ways to call a server-side function.
Long answer: Per documentation, try loading data asynchronously. It says -
Templated HTML can be used to quickly build simple interfaces, but its use should be limited to ensure your UI is responsive. The code in templates is executed once when the page is loaded, and no content is sent to the client until the processing is complete. Having long-running tasks in your scriptlet code can cause your UI to appear slow.
You could also try providing spinners / pre-loaders in the UI too and that should help with improving UX.
It also recommends us to Use the HTML5 document type declaration i.e.
If your page is served using the newer IFRAME sandbox mode, make sure to include the following snippet of code at the top of you HTML file.
<!DOCTYPE html>
Hope this helps.
First let me set the situation.
I am writing a simple client html page and a simple server side program.
In detail, the page has a submit button to POST some data to the server program.
The problem is that any time I test the page to push the submit button ,the browser displays the new page which displays only the return message my server program returned.
How can I modify the html or the server side program so that the browser keeps the page unchanged before after the submit button is pushed.
I know an easiest way ; letting the sever program returns the same string as the client html page.
Thank you in advance.
In a regular form submission, your page will be whatever the server sends back. The form's action might be the same page, and then your server-side code can read the value of any input fields, and set the values in the response back to what they were in the request. This should result in the page looking the same as it did before the submit button was pressed. However, the page has "changed" in the sense that it was reloaded.
Alternatively, your form can make an Ajax request, which means that you'd need to use Javascript to intercept and stop the form submission, and then use additional coding to send the Ajax request, and then receive and process the response.
What you want is probably a postback:
http://en.wikipedia.org/wiki/Postback
1.) AJAX
You could use JavaScript and AJAX to POST the data.
2.) IFrame (not recommended)
You could also create a hidden IFrame and set the target attribute of the form to it.
What you want to do doesn't seem to be very clear.
If you want to submit your POST data without loading a new web page, you can use Ajax. It may be simple to do it in jQuery, and even simpler if you serialize your form data.
$('form').submit(function() {
$.post('your-post-url',$(this).serialize(),function(data) {
alert('Data posted!');
});
return false;
});
The VB.Net desktop app uses the IE browser control to navigate the web. When a normal page loads the document_complete event fires and I can read the resulting page and go from there. The issue I am having is that the page I am driving is written with AJAX, so the document complete event never fires. Furthermore, when you view the source of the page after it loaded a new portion via AJAX, it hasn't change. How are people handling this? What are my options?
This solution might solve your problem.
prerequists:
AxwebBrowser control,
reference to mshtml.dll
Dim axmshtml As mshtml.HTMLDocument = YourAxWebBrowserControl.Document
Dim HTMLSource As String = axmshtml.body.innerHTML 'html source, including DOM changes
If you know what you are looking for you can put the above code in a timer/loop
and simply monitor the page source for changes.
If wb is your webbrowser control, then instead of getting the HTML by using:
wb.DocumentText
use:
wb.Document.Body.InnerHtml
This will give you the updated html, reflecting the AJAX update.
As to detecting when the AJAX completes, for me it seems to be triggering a DocumentCompleted event. Not sure why it's different for you.
You need to interact with the Javascript code in the website using the methods on HtmlDocument.
I have seen this kind of behavior with C# when some AJAX scripts created a race condition. Adding the defer attribute to the script tag helped in that case. YMMV.
Not sure if this will work.
When the Ajax call completes, add a random anchor hash to the URL like so: foo.html#23234
then add your code to the NavigateComplete2 event.
http://msdn.microsoft.com/en-us/library/aa768334%28VS.85%29.aspx
I'm guessing that the page your load in your windows app does an AJAX call, which appears to refresh the page. In that case, the document_complete event isn't fired, because the webpage itself isn't refreshed, but a portion of the page.
I found a similar question about this problem, with an accepted answer in VB.Net.
You can use the ProgressChanged event, it seems to fire during ajax calls