Exist some method to reloading a script layout wiht emberjs using ajax html called?
Example
Page load all the information
Press a button which looking with ajax a html (including a script handlerbar) and load it on a div element
Take that layout view and used it with a view.
NOW I Just can use the layout view that i created before to call the emberjs object. but i need created too many layout and i want to loading with each request from the user.
Thanks i u can help me
I had a very similar need (dynamic template loading).
Maybe a part of your solution is here: Is it possible to load a Handlebars template via Ajax?
Related
I am working on a Hugo Static Site Generator theme, the problem is that the Javascript features don't load unless I reload the page
e.g
Before reloading the page
After reloading the page
This is the code, I used in adding the new class
$(document).ready(function() {
$('h2').addClass('hello')
});
Now, the problem is that since it is a static site generator when opening a new page, it will not refresh/reload the site, but load the page like a cached page. therefore most of the javascript features only apply once unless the page is reloaded. The problem is also experienced when I am using VueJs on the theme, Which means, I need to find a way to force load a new URL, instead of it loading like an anchor link.
UPDATE: I have been able to resolve it, The problem was from another javascript file, making an ajax get request
Thanks
Did you debug or add console.log inside your ready function to see it can reach there? I am suspecting that your h2 is rendered by js and at the time your code to add class hello that h2 is not rendered yet.
If this is the case I think you need to render html at server first or you can include your script in the same place as your components
I opened this template and I found that when I navigate from page to another that a progress bar appear and start to load inside the page itself then disappear and the page appear without the page itself reload like normal using of href tag. The URL become like this
http://localhost/devoops/index.php#ajax/charts_xcharts.html
I want to know only how to load a page like this, what scripts I should use ?. If you gave me just an example or a link to an article that would be enough.
Here is the template please test it to know what I mean as I dont know how to describe that.
devoops template
The magic in this template are made by LoadAjaxContent function on line 1136 on js/devoops.js file.
This function was used to: start on line 3361, menu on line 3400, top menu on line 3466 and search field on the line 3475, all in the same file.
I hope you at least know some knowledge of JQuery which in fact was what was used here.
BTW the link does the rest and all templates are in the ajax folder.
I think what you referred to is so called the partial load or refresh partial views.
There's a lot of frameworks out there can achieve things like this.
Check out AngularJS and a module called ui-router
Basically, say you have a page like this:
http://levi-lu.net/#/about
If I'm using ui-router, http://levi-lu.net is the main view, and the part after hashtag (/about) is a route under this view, switch between routes will only affects part of the page (partial refresh).
I want to use the Facebook comments box on my WordPress page where I use "handlebars js", which dynamically loads my HTML content with a script on my page.
When I add the Facebook html code:
<div class="fb-comments" data-href="http://mysite/mypage/" data-numposts="5" data-colorscheme="light"></div>
anywhere on the page it works fine, but when I use it within the handlebars script, it does not (except for like 1 time out of 20!).
I have tried changing the Facebook JS SDK to load asynchronously, as I suspect the issue has to do with the order in which my scripts are loaded, but still no luck.
You need to parse the plugin with FB.XFBML.parse after appending the Handelbars content to the DOM. Btw, that´s another topic, but you should ALWAYS load the JS SDK asynchronously, and make sure it is loaded before using FB.XFBML.parse.
Make sure to call the parse function after appending the Template content to the DOM.
I have a HTML page that works as a container of different HTML sub-pages/Usercontrols.
I use Ajax get of jquery to load the HTML of the sub page in the container page.
I am using a angular js directive in one of the sub pages.
The angular js directive is not working in the sub page and the potential issue can be that my anguarl js is firing before the HTML of the subpage gets loaded into the container page. And thats why angular js dont see the directive in the subpage it needs to process.
Is there a way to delay the execution of the angular js until subpage gets loaded.
I agree with #m59's assessment, but if you are unable to follow that route you will need to use the manual bootstrapping see manual initialization
I have an android app where I want to show a page to users inside the webview but the problem I am facing is that I can't use the web page as it is because the page is not responsive to mobile devices and user needs to scroll horizontally and vertically a lot. The web page is:
http://www.ielts.org/test_centre_search/search_results.aspx
I just need the drop down search functionality from that page. I tried copying the html source code on my local to replicate the page but the since the html form's action has to be http://www.ielts.org/test_centre_search/search_results.aspx for fetching the results, when I select an option on my local version, it goes to the http://www.ielts.org/test_centre_search/search_results.aspx url and displays their version of page next time.
I came across this page:
http://www.ieltsessentials.com/test_centre_search.aspx
which is implementing the same functionality. How can I replicate the same and add it inside local .html document
i think the easiest way to implement this will be to inject your own css style into their html, and hide/restyle the elements that are not responsive. that way you don't have to analyze any of the logic that they have, as it will be safely on css level.
the only thing you have to figure out is how to re-inject your css into the web view after the page is reloaded. there's actually a way to do that by simply injecting a javascript call into their page like here https://stackoverflow.com/a/5010864/467198
to detect that page is reloaded i think you can use onPageFinished
you could use asp to proxy the page you want to canibalize and then in jQuery you could traverse that proxy'ed page and pull out the pieces you want to use and then create your new, responsive doc from items scraped from the original page.
i'm not an asp.net developer so i've used php in my example. here's a link to an example of how asp.net could be used to proxy a page
Simplest Possible ASP .NET AJAX Proxy Page
<?php echo file_get_contents( $_GET['u'] );
then in jQuery use $.ajax() to read the proxy'ed page as HTML and scrape the page as needed
<script>
$(function(){
$.ajax({
url:'proxy.php?u=http://www.ielts.org/test_centre_search/search_results.aspx',
dataType:'html',
success:function(data){
console.log($('#header',data));
}
})
});
</script>
in this example i'm just reading the contents of the #head but you could scrape whatever you need from the original page and then inserting them into your target dom or pass them to a template. to get what you're looking for you'd use '#Template_TestCentreSearch1_SearchTable' where i use '#head' to retrieve your drop down markup