Loader visible while upto ng-include completed - javascript

using angularjs to load a jsp page content in div tag. within the jsp page some text and button there. It was successful completed. But it take some time to load the jsp page content within the div. Here i'm using some class to load a loader span. I want to disable the loader after jsp content load in that div.
index.html
<div ng-include="path"></div>
<div>
<span ng-show="loader" class="glyphicon glyphicon-refresh-animate"></span>
</div>
angular.js
$scope.path='https:/..../url.jsp?orderNo='+$scope.orderNo+'&amount='+$scope.amount;

I found the answer and forgot to post them
$rootScope.$on('$includeContentLoaded', function(event) {
$scope.loader = false;
});

Related

featherlight.js - Run script on modal load

Problem
HTML
<div id="form-lightbox">
<div class="form">
<div id="ajaxreplace">
<script type="text/javascript">
jQuery(function() {
jQuery.ajaxReplace({
//parameters
});
});
</script>
</div>
</div>
</div>
open lightbox
It is a custom script that replaces the script with a form from the backend.
The problem is, that featherlight.js copies the source and displays
the clone in the lightbox.
That duplication of code can't be handled by the library for the form.
I changed the script-tag-type to "text/x-template" so the script does
not run directly. But then the form isn't rendered in the lightbox.
Question: How can I use featherlight to run the script on loading the the lightbox?
To run code after the lightbox is opened, use callbacks (e.g. afterOpen).
If you don't want content to be duplicated, use the persist option.
HTH

I want to change the main content dynamically with javascript instead of individual pages

My website is currently using .tpl template files to load different pages dynamically. That will load an entire page again, so header, sidebar (chat), main content and the footer.
In my index.php file there is a switch case which loads the page 'home' when you click on 'home' in the menu. (example)
But I don't want that. Because their is also a chat in the sidebar, and that reloads/resets eveytime you load a different page. So all previous messages will be gone. So what I do want is changing only the main content part. So header, sidebar and footer will stay and won't reload.
I tried to do it with javascript but that didn't work...
Can someone help me or atleast put me on the right path?
(And yes, I have been searching for the last hour on stackoverflow and google but couldn't find anything...)
What you need is called AJAX(With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.)
To use ajax u need Javascript to send the request to a PHP file that loads the smarty template that contains your main content and insert the html code back into the page:
<?php
//some-php-file.php
include("Smarty.class.php");
$smarty = new Smarty;
$smarty->display("main_content_part.tpl");
?>
//link on 'home' site
Home
//javascript(jquery) ajax request
$('#ajaxHomeBtn').click(function(e){
e.preventDefault();
$.get("some-php-file.php", function(smarty_html_data) {
$(".main-content").html(smarty_html_data);
});
});
Please follow following instruction :
Create separate .tpl file for header,footer,sidebar and contents files.
In main file include header,footer,sidebar and left one section for content.
3.Replace your .tpl (using id or class) file content using ajax call.
bind your url with function.
Sample code as below:
// sidebar.php
<ul>
<li><a onclick="changePage(this)" data-page="home.tpl">Home</a></li>
<li><a onclick="changePage(this)" data-page="aboutus.tpl">About Us</a></li>
</ul>
// master.php
<?php
include("header.php");
include("sidebar.php");
?>
<section id="fileContent">
</section>
<?php include("footer.php");
?>
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function changePage(obj)
{
var Filename=$(obj).data('page')
$.get(Filename, function( data ) {
$( "#fileContent" ).html(data);
});
}
</script>

How to load div only on click and not when page loads?

Can any one help me to shout out my problem in scripting page. I'm developing website which displays property. I wanted to know how to block a div from loading when page loads and the content should display and load only on click of a button. Let me explain it below.
<button id="loader" onclick="loaddiv(#items)" value="View Content">
This loads data from external server using API. It has lots of data and images.
Please help.
The DIV itself should not have any content when the page loads, so simply a empty div with an ID tag..
Where you have "loaddiv(#items)" ... this is invalid, well the # part anyway... try "loaddiv('#items')" to make it a string in which jquery can then handle.
Once the page has loaded, then you would use jquery with something like get/post.
<div id='items'><!-- i'm empty for now --></div>
<button id="loader" onclick="loaddiv('#items')" value="View Content">
<script>
function loaddiv(sID) {
$.get( "ajax/test.html", function( data ) {
$(sID).html( data );
});
}
</script>

Can I store HTML fragments in different files but access via JavaScript

Not sure if I have phrased my question correctly but I shall try to explain clearer in the body of my question.
I am using ASP.NET C#.
I have a single WebForm page.
In this page, for example I have this:
<div id="page1" style="display:block">
page 1 contents
<a href='#' id="liPage1" onclick='Page2();'>Page2</a>
</div>
<div id="page2" style="display:block">
page 2 contents
<a href='#' id="liPage2" onclick='Page1();'>Page1</a>
</div>
<script>
//this is just sudo code
Page1 function will hide div page2 and show div page1
Page2 function will hide div page1 and show div page2
</script>
Now I do not need any help with the script.
What I am asking is whether I can have the HTML for page1 in 1 file and the HTML for page2 in another file and load these HTML 'fragments' via client-side.
I can easily do this in server code by encapsulating the HTML in a user-control.
I want to know if I can do the same using client calls. But I really do not want to 'write' the HTML within JavaScript code itself.
I am asking this because I intend to have quite a few pages and I want to render it all via client-coding rather than calling back to the server each time. It is all a question of readability and management.
I was thinking along the lines like resource files but not sure how.
I hope this is all clear?
Yes, you can simply do some ajax calls, and then set the response as the content of a container element.
So, let's say yo have file1.html, file2.html and file3.html, and you want to include all those "fragment files" in a #container.
The script will look something like this:
[
"file1.html",
"file2.html",
"file3.html"
].forEach(function(file) {
var xhr = new XMLHttpRequest();
xhr.open("GET", file, true);
xhr.addEventListener("load", function() {
document.querySelector("#content").html += xhr.response;
});
xhr.send();
});

Jquery load url underground

I have this code
<div class="wrap-box-video" id="31">
<div class="addfav">
</div>
<img src="/etc.jpg" />
</div>
and with this code
$(document).ready(function(){
$("div.addfav").click(function(e){
window.location = "?wpfpaction=add&postid=" + $(this).parents(".wrap-box-video").attr("id");
});
});
i want to load the ?wpfpaction=add&postid=31 (in this exemple) but not to show in the url tab i want this to be underground. if i'm on exemple.com page and i click the addfav div i want the exemple.com to be the same but the script to work.
If you're talking about changing what text appears in the browser tab, you can alter the title element of the HTML rendered at you ?wpfaction endpoint.
If you want to change what the actual URL that appears in the URL bar, see Modify the URL without reloading the page

Categories