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
Related
I am building a very light Web-App using AngularJS, and i can't seem to find the correct approach as to how to organize it.
To explain it briefly, the App loads a list of objects after the user logs in, and when he choses an object it loads all the detail from that object.
The app (as I am currently building it) will only have to load short JSON text data, so I thought I could have a single page app in a single HTLM file, directed by a single controller who will handle all the data received from the server, and the different views would have been handled by using HTML snippets and AngularJS directives ng-show and ng-includ, like so :
<div ng-show="correctView" ng-include="login_snippet.html >
</div>
<div ng-show="correctView" ng-include="table-view_snippet.html >
</div>
<div ng-show="correctView" ng-include="detail_view_snippet.html >
</div>
The correctView string is changed by the controller to decide which view is to be showned.
Is this a reasonable approach ? I can't seem to find whick one would suit my App best; it doesn't seem to be the right thing to do because the previous button doesnt work with this method, which can't do.
So,
Is there a way to make it so the previous page button would work ?
If not, what would be the correct thing to do ?Is it possible to have several HTML files sharing the same controller ? Or can some controller send data to another ?
I only found examples of single page applications where only parts of the page is changed when the user interacts with it, and this can't do for mine.
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!
I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning.
My problems are clean URLs and page navigation. I want to do it "the right way".
What I would like to have:
I use CodeIgniter to get clean URLs like
"www.example.com/hello/world"
jQuery helps me using ajax, so I can
.load() additional content
Now I want to use HTML5 features like pushstate to
get rid of the # in the URL
It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.
It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)
For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them.
The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.
Just think about this page and tell me how you would do this.
I would really love to have this kind of navigation and so I tried several things.
So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow.
But I can't get it to work all together.
My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.
Some of the tutorials I looked at:
Dive into HTML5
HTML5 demos
Mozilla manipulating the browser history
Saner HTML5 history
Github: History.js
(max. number of links reached :/)
I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content.
Could somebody post the most basic method how to use HTML5 for my example page?
My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad.
When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.
Thanks in advance for any help.
If you have suggestions, ideas, or simple just want to mention something, please let me know.
regards
DiLer
I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html
The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.
What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:
/one.html
/two.html
/assets/application.js
Those are the only three files we're working with.
Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
Two
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
One
</div>
</body>
</html>
You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.
Now, for the history part:
assets/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
How it works
I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.
The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.
Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.
How to extend it
This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.
Addressing your specific "For example"
You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:
<body>
foo
bar
<div class="container">foo</div>
</body>
Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.
The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.
Code
https://github.com/cairo140/html5-history-example
Try this in your controller:
if (!$this->input->is_ajax_request())
$this->load->view('header');
$this->load->view('your_view', $data);
if (!$this->input->is_ajax_request())
$this->load->view('footer');
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
How do hosted services like UserVoice embed their content on other web sites?
I see that it is via including a JavaScript file from the service provider on your own page, however, what I'm interested in are the building blocks for creating a service like that.
For example, do they use a library like jQuery, mooTools, or prototypejs and how do they avoid namespace clashes?
Also wondered if there were any books, articles, blog posts that go over this specific use of JavaScript (not looking for general resources on JavaScript).
Regards and thanks in advance,
Eliot
Here is a great tutorial I found on How to build a web widget (using jQuery)
Generally, what you are describing is called a "Javascript Widget" (UserVoice's just happens to show up on the side of the page).
There is a good tutorial about creating Javascript Widgets that you can check out.
The basic structure of such an embeddable service would be:
If the service doesn't mandate that the script is to be included at the bottom of the page, hook the body onload event, without stepping on the toes of any existing handlers (by intercepting the existing handler function, which could in turn be chained to other functions).
Inject new HTML elements into the document. The HTML code would most likely be inlined into the script as string literals as setting innerHTML on a single injected element would be easier and faster than direct DOM manipulation using a flurry of function calls.
The entire script should live inside a closure to avoid name clashes.
A JS framework may or may not be used; caution is required when including a framework since it could clash with a pre-existing, different framework, or a different version of the same framework.
EDT: Generally you'll make your client/customer/friend include a script in their page, then via that script you can do following:
In pure JS you can load scripts from remote location (or not so remote) dynamically via
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'your/remote/scripts/path.js';
document.getElementsByTagName('body')[0].appendChild(script);
// $.getScript('your/remote/scripts/path.js'); in jquery but you'll be sure jQuery loaded on remote site
Then script you loaded can perform different actions like creating elements like this
var body = document.getElementsByTagName('body')[0];
var aDiv = document.createElement('script');
/* here you can modify your divs properties and look */
body.appendChild(aDiv);
// $('').appendTo('body'); for jQuery
For deeper look into JavaScript you can read for example Javascript: The Good Parts or Definitive Guide To Javascript.