Periodic refresh of a book's dynamic pages using turn.js - javascript

I have created an example of dynamically generated content to be viewed using turn.js using the sample provided here.
This is the part of the code that I have so far:
<body>
<div id="paper">
</div>
</body>
<script type="text/javascript">
$(window).ready(function() {
$('#paper').turn({pages: 12});
});
$('#paper').bind('turning', function(e, page) {
var range = $(this).turn('range', page);
for (page = range[0]; page<=range[1]; page++)
addPage(page, $(this));
});
function addPage(page, book) {
// Check if the page is not in the book
if (!book.turn('hasPage', page)) {
// Create an element for this page
var element = $('<div />').html('Loading…');
// Add the page
book.turn('addPage', element, page);
// Get the data for this page
$.ajax({url: "getPage?filename=abcd&page="+page})
.done(function(data) {
element.html(data);
});
}
}
</script>
getPage is a jsp that returns <div class="page"><img src="docs/local/abcd_1.png" alt="" /></div> or any other page number as per the ajax request.
The problem I have is that the png's requested may or may not be available on the web server at the time of the request. They will become available a few (or sometimes many) seconds later. So I would like to be able to display some default "Loading..." type content if a png is not available and refresh periodically (i.e. every x seconds) until the actual png becomes available. I don't have a problem changing the output of getPage if required.

I have managed to make this work myself by proceeding with the following changes:
getPage now returns <div class="loader"><img src="docs/local/ajax-loader.gif" alt="" /></div> if the png requested is not available.
In the calling page I have changed my code to check for the 'loader' string, and if found (which means the png is unavailable), then I call setTimeout, to retry getting the image after a given amount of time:
<body>
<div id="paper">
</div>
</body>
<script type="text/javascript">
$(window).ready(function() {
$('#paper').turn({pages: <s:property value='pages'/>});
});
$('#paper').bind('turning', function(e, page) {
var range = $(this).turn('range', page);
for (page = range[0]; page<=range[1]; page++)
addPage(page, $(this));
});
function addPage(page, book) {
// Check if the page is not in the book
if (!book.turn('hasPage', page)) {
// Create an element for this page
var element = $('<div />').html('Loading…');
// Add the page
book.turn('addPage', element, page);
// Get the data for this page
refreshPage(element,page);
}
}
function refreshPage( element, page )
{
$.ajax({url: "getPage?filename=<s:property value='filename'/>&page="+page})
.done(function(data) {
if( data.indexOf( "loader") > -1 )
{
setTimeout(function() {
refreshPage(element,page);
}, 5000);
}
element.html(data);
});
}
Maybe there is a better way to achieve this but at least it works.

Related

Laravel Ajax Pagination links refresh on second page click

I'm using Laravel 5.8 and I'm trying to make a pagination using AJAX and it's working 50% of the time. Actually, when I click on the links page at the bottoms, it renders the data perfectly, but my problem is that, the second time I press a pagination link at the bottom, it resfreshes the page. I don't want the page to reload half the time I click on pagination pages.
Here's my code for that:
ManagerController.php
public function index()
{
$users = User::paginate(30);
if (Request::ajax()) {
return Response::json(View::make('manager.usersTable', compact('users'))->render());
}
$user = User::find(Auth::user()->id);
$leagues = League::all();
$usersCount = DB::table('users')->count();
return view('manager.index', compact('user', 'leagues', 'users', 'usersCount'));
}
index.blade.php
$(window).on('hashchange', function() {
if (window.location.hash) {
var page = window.location.hash.replace('#', '');
if (page === Number.NaN || page <= 0) {
return false;
}else{
getData(page);
}
}
});
$(document).ready(function() {
$('.leagueModal').on('shown.bs.modal', function (event) {
var href = $(this).find('#href_link').val();
$(this).find('#leagueModalBtn').click(function() {
window.location.href = href;
});
});
$('.pagination a').on('click', function (e) {
e.preventDefault();
$('li').removeClass('active');
$(this).parent('li').addClass('active');
var page = $(this).attr('href').split('page=')[1];
getUsers(page);
});
});
function getUsers(page) {
$.ajax({
url : '?page=' + page,
type: 'GET',
dataType: 'json',
}).done(function (data) {
$('.usersTable').empty().html(data);
location.hash = page;
}).fail(function () {
console.log('Users could not be loaded.');
});
}
......... Down below is where I put my data .........
<div class="row">
<h3>Utilisateurs ({{ $usersCount }})</h3>
</div>
<div class="row">
<div class="usersTable" style="width: 100%">
#include('manager.usersTable')
</div>
</div>
usersTable.blade.php
Whatever there is in this file is not really important but I got this at the end of it:
{!! $users->render() !!}
Current situation: Causes a page reload on the second time I click on a pagination link.
What I want: To not reload the page when I click on pagination links.
What I've tried: I actually followed this source code: https://gist.github.com/tobysteward/6163902
Thanks :)
You are attaching click method to .pagination a once document is ready, however if you create a new element with same class will not have same functionality. To achieve this you have to force script to check document dynamically. Please see below example.
$(document).on('click', ".pagination a", function() {
e.preventDefault();
$('li').removeClass('active');
$(this).parent('li').addClass('active');
var page = $(this).attr('href').split('page=')[1];
getUsers(page);
});
In laravel if you are using yajra datatable add below function
function reload_table(){
table.ajax.reload(null,false);
}
and call reload_table() instead table.draw() it will not create whole table but only reload

How to show loading image before Action is completed ASP.Net MVC 5

This is an ASP.Net MVC 5 project.
I have a simple javascript/jQuery as follow:
<script>
$(document).ready(function () {
$("#textBox").focusout(function () {
var phrase= $("#textBox").val();
phrase= phrase.replace(new RegExp(/\s+/, 'g'), "%20");
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase);
});
});
</script>
As you can see, there is a jQuery .load method which calls SearchSingular action in the Search controller when the focus is out from HTML element with id = textBox. This works well, except that the SearchSingular action execution may sometimes take time to finish.
Thus, I want to show a loading image when the load is not finished. Is there any way to do this?
Turn it into a callback
// Somecode to display a image
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase, function() {
// Somecode to remove image
});
You can use a loading image while div contents load
("#loadingImage").show();
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase, function(){
$("#loadingImage").hide(); // hide the image after loading of div completes
});
Div for your loading image
<div id="loadingImage">
<img src="loader.gif">
</div>
There is a complete callback of jQuery .load function (read more http://api.jquery.com/load/)
You could revise your javascript as following:
<script>
$(document).ready(function () {
$("#textBox").focusout(function () {
var phrase= $("#textBox").val();
phrase= phrase.replace(new RegExp(/\s+/, 'g'), "%20");
ShowLoading();
$("#commentDiv").load(
"../Search/SearchSingular?phrase=" + phrase,
function () { HideLoading(); }
);
});
});
</script>

How to evaluate script tags when loading a script

I have a navigation bar and whenever a user clicks on a link, the container gets loaded with the respective file.
For example:
HTML
Home
JS
$(function() {
$(".navLink").on("click", function(e) {
e.preventDefault();
$(".container").load(this.href);
});
});
Sample HTML:
<p>Test</p>
<script>
var a = new Date(2015,7,1,0,0,0) - new Date();
var b = Math.round((a/1000) - 2592000);
var timer = new Countdown({time:b, style: "flip", rangeHi: "days", height: 60, width: 415});
</script>
<p>Test</p>
However one of my files has <script></script> tags. When I load this page, it doesn't work correctly. It doesn't display in the container but rather opens the file directly. Also, only the script tag runs and nothing else from the page. I need to keep this script tag since I am using it to initialize a timer which outputs html/css code back.
Is there some way to get around this?
EDIT - Works with async option set to true but now it doesn't analyze the script. Console log: Uncaught ReferenceError: Countdown is not defined
$(document).ready(function() {
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
options.async = true;
});
$(".navLink").click(function() {
$.get( 'home.php', function( data ) {
$(".container").append(data);
});
});
});

How to find a string in a dynamically created list

Upon loading a page I make a database call (via ajax / php) to get a dynamic list. The list displays fine and looks something like this:
<ul id="menu">
<li>bla</li>
<li>bla2</li>
<li>bla3</li>
</ul>
As soon as the list is done loading I want to dynamically load content based on the page I am on, so I grab the page URL which in this case lets say is bla3. I want to look through the list and grab the URL(href) of the li item containing bla3.
I figured something like this below would work but it does not.
$(document).ready(function() {
$('#menu').on('load', function(){
var pageID = $('#menu li a[href$="?bla3"]').attr('href');
alert(pageID);
});
});
The problem (I am assuming) is that #menu is not loaded quickly enough so the on load event fires before #menu loads, I have tried it with body and that didn't work either. Essentially I just need a away to look through a dynamically generated list after it and the page it is on is fully loaded.
Any ideas?
<body onload="findList()">
Then you need this function in your <head>
<head>
<script type="text/javascript" language="javascript">
function findList() {
var list = document.getElementById("menu").getElementsByTagName("li");
var contains = "bla3";
var patt = new RegExp(contains,"g");
for (var x=0;x<list.length;x++) {
if (list[x].match(patt).length>0) {
var hrefVal = list[x].childNodes[0].href;
alert(hrefVal);
}
}
}
</script>
</head>
To start, it seems like you're in need of a way to wait for your menu. You can try polling the DOM for the element.
Here's a rough fiddle that seems to simulate what you're describing: http://jsfiddle.net/rkLVx/1/
var menuHasArrived = function (fn) {
console.log('checking...');
if ($('#menu').length) {
fn();
} else {
setTimeout(function () {
menuHasArrived(fn);
}, 1000);
}
}
menuHasArrived(function () {
alert($('#menu li a:contains(bla2)').attr('href'));
});
setTimeout(function () {
$('body').append(
'<ul id="menu">' +
'<li>bla</li>' +
'<li>bla2</li>' +
'<li>bla3</li>' +
'</ul>');
}, 2000);
Good luck

Get specific page from URL and get the data with AJAX

window.onload= function(){
var page = window.location.hash;
if(window.location.hash != ""){
page = page.replace('#page:', '');
getdata('src/'.page);
}
}
After the window loads, i want the page to look in the URL, see if there is a # is set, and if so, i want to grab the page and display it inside a DIV. So for example, a link would be link. So when somenone clicks on the link, the page thinks and grabs the data from contact.php, and puts it inside the div. But now, this isn't working. No errors, no warnings, no nothing. Help please? Thanks!
Edit: Getdata:
function getdata(file){
openloading(); // loading message
$('#content').fadeOut('slow', function () { // Content is the div where all the content must be in
$.get(file, function(data) {
$('#content').html(data);
$('#content').fadeIn('slow');
})
})
updateusersonline();
}
And updateusersonline() directly too:
function updateusersonline(){
$.get('src/usersonline.php', function(data3) {
$('#usersonline').html(data3);
})
getdata('src/'.page); should be getdata('src/' + page);

Categories