Hi all i have table which has a bulk data and a Screen for showing this data..i want o show data to the users like this
if a user goes to this screen i have to display only the first twenty of the records of my Database and when he wants to see more and scrolls down the data should be loaded on scroll down and i should show him again the Other 20 records of my DB..so as he scroll s down the page should load with that data should be populated to the page
i have been searching about this a lot but didn't get what i wanted...or how can i do this....can any one tell me how can i do this...
Rob Conery wrote a great blog post about this
He uses JQuery to make an ajax call to his controller to load more data. Here's the method he uses to load more:
<script type="text/javascript">
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
loadMore();
}
});
var current=0;
function loadMore() {
if (current > -1) {
current++;
$('#loading').html("<img src='/content/images/bigloader.gif' />");
$.get("/archive/index/" + current,
function(data) {
if (data != '') {
$('#results').append(data);
$('#loading').empty();
} else {
current = -1;
$('#loading').html("<h3><i>-- No more results -- </i></h3>");
}
});
}
}
</script>
Related
I am working on a SharePoint page, utilizing the jslink for the list web part. I have the following code written out:
(function () {
var overrideCurrentContext = {};
overrideCurrentContext.Templates = {};
overrideCurrentContext.Templates.Header = "<div class='ListAccordion'>";
overrideCurrentContext.Templates.Footer = "</div>";
overrideCurrentContext.OnPostRender = OnPostRender;
overrideCurrentContext.Templates.Item = ItemTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();
function ItemTemplate(ctx) {
var Title = ctx.CurrentItem["Title"];
var Body = ctx.CurrentItem["Body"];
return "<h2>" + Title + "</h2><p>" + Body + "</p><br/>";
}
function OnPostRender() {
$('.ListAccordion h2').click(function () {
$(this).next().slideToggle();
}).next().hide();
$('.ListAccordion h2').css({
"background-color": "#0B0B61",
"cursor": "pointer",
"color": "white" ,
"border-radius" : "15px",
"padding-left" : "10px"
});
}
The problem I am having, is that my accordion view will not display until I utilize the manual refresh option, or I wait for the Asynchronous Automatic Refresh both under the AJAX option of the web part properties.
The accordion shows up perfect, until I save, or reload the page, but it works if I utilize the ajax options. Is there anything I can do to make sure the accordion shows right away when the page is first opened?
also I have the file saved in my siteassets and this is the link I am using ~site/SiteAssets/Accordions12.js
Add the following to the header of your script editor but replace the middle parts with what your file/location is
<script src="/_catalogs/masterpage/test1/jquery-1.11.2.min.js" type="text/javascript"></script>
I am developing a website and I want to load the data dynamically on scrolling the page,When the scroll bar reaches the bottom of the page I want to load more data from the database using AJAX.
In my web page there is a iframe in which i want to append the new data.Like flipkart.com website. Where on scrolling the page new products are loaded.
Could anyone help me in this regard?
Thanks in advance.
I have tried many times but no luck what i'm getting is only once the GetActivity() is being called,that too when i scroll down its not calling GetActivity(),but when i scroll up from that point it calls javascript function GetActivity()And on repeating this it is not working
here is the code which i used as given by Greg :please look into this and help.
<html>
<head>
<script type="text/javascript" src="jQuery-1.4.1-min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
var bottom = getBottom(window),
$reset = $("#activity_reset");
if (bottom == $(this).scrollTop() && $reset.val() == 0) {
$reset.val(1);
$("#activity_loading").show();
if ($("#activity_full").val() == 0) {
setTimeout("GetActivity();", 100);
}
}
});
function getBottom(e) {
height = $(document).height();
windowheight = $(e).height();
return height - windowheight;
}
function GetActivity()
{
alert("got it!");
$('div.tt').html('1');
$('div.ttt').html('1');
}
function setting()
{
$('div.tt').html('0');
$('div.ttt').html('0');
}
</script>
</head>
<body onload="return setting()" >
<pre>
<!--here i have used some junk texts so that a scroll bar appears in the browser-->
</pre>
<div style="display:none" id="activity_full" class="ttt"></div>
<div style="display:none" id="activity_reset" class="tt"></div>
</body>
</html>
This will monitor the page and load the function GetActivity() when you scroll down to the bottom of the page; you can put your ajax call in there and edit this accordingly to display the data you wish to have appear on the page.
$(window).scroll(function() {
var bottom = getBottom(window),
$reset = $("#activity_reset");
if (bottom == $(this).scrollTop() && $reset.val() == 0) {
$reset.val(1);
$("#activity_loading").show();
if ($("#activity_full").val() == 0) {
setTimeout("GetActivity();", 1000);
}
}
});
function getBottom(e) {
height = $(document).height();
windowheight = $(e).height();
return height - windowheight;
}
function GetActivity() {
/* ajax call in here */
}
When the window is scrolled the .scroll(function()) is triggered; the getBottom(window) function then calculates the document height and the screen height and subtracts them to see if the user's window has reached the bottom of the screen. $("#activity_reset") is then stored to an identifier for later use.
Once the action is fired your reset value is set to one so that the ajax isn't fired more than once at a time. The loading bar is displayed and a timeout is then set for the GetActivity() function.
$("#activity_reset") -> Should be a hidden div on the page that holds a value of either 1 or 0; it should be initialized as 0 and when the users browser hits the bottom of the page your ajax call is fired and once it is done being loaded you should then set the value back to 0 to allow loading again.
$("#activity_show") -> Should be a hidden div on the page that contains a loading image, or simply text saying that something is loading (not necessary but certainly helps for user experience).
$("#activity_full") -> Is another hidden div that is used to identify when your div is full and should not load anymore content. It should be initialized to 0 and when you have loaded as many items as can fit on the page you can set it to 1 (likely in your GetActivity() function) to prevent any further loading.
Further Explaining:
Inside of your GetActivity() function change the following:
$('div.tt').html('1');
//returns <div class="tt">1</div>
to
$('div.tt').val(1);
//returns <div class="tt" value="1"></div>
Your code is setting the html of the div to be 1, when what you actually want is for the value attribute to be equal to 1 since that is what the script is checking for in the comparison. I also noticed that you are also setting $('div.ttt') to be 1 as well, but this will stop the script from loading any further. This one should only be set to one once a condition has been met and you would no longer like any items to load.
$num = 6; //number of items per page
if($num == 6)
$('div.ttt').val(1);
Hope that clears things up; let me know.
Hi guys i have a page which is working perfectly it contains a highchart. I want to show this page on the existing page through an ajax call. My ajax is working perfectly but the highcharts are not displaying when i make ajax call.
link of my highchart is
http://www.rahatcottage.com/AI/J/examples/line-log-axis/index.php
And My ajax script goes here
var xmlhtt
function load(str,str1)
{
xmlhtt=GetXmlHttpObject();
if (xmlhtt==null)
{
alert ("Your browser does not support Ajax HTTP");
return;
}
var url="examples/line-log-axis/index.php";
url=url+"?q="+str;
url=url+"&q1="+str1;
xmlhtt.onreadystatechange=getOutpt;
xmlhtt.open("GET",url,true);
xmlhtt.send(null);
}
function getOutpt()
{
if (xmlhtt.readyState==3||xmlhtt.readyState==2||xmlhtt.readyState==1|
|xmlhtt.readyState==0)
{
document.getElementById("apDiv1").innerHTML="Loading ";
}
if (xmlhtt.readyState==4)
{
document.getElementById("apDiv1").innerHTML=xmlhtt.responseText;
document.getElementById("apDiv1").focus();
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
I guess because highgraphs are using Jquery thats y ajax is not running them
EDITED
So what you are doing is, that you have a working chart page, and through ajax you wish to load that page into a div of another page. I don't think that will be possible, you can just do that, especially if that page has javascripts, what you are doing is just getting the generated html of the working chart page, and pasting it inside the div, this won't run the necessary javascripts for the chart generation.
Try using an iframe instead.
HTML
<iframe id="frame" />
SCRIPT
function load(str,str1)
{
$('#frame').attr('src', "examples/line-log-axis/index.php?q="+str+"&q1="+str1);
}
**OLD**
series: [{
data: JSON.parse("[" + text + "]")
}]
`text = ','`, hence a json parse error. Revisit your json building # php to correctly spit `text`
I have made a jQuery thing; with will load content without refreshing the page. The code for that is:
$(document).ready(function(){
// initial
$('#content').load('content/index.php');
// handle menu clicks
$('#navBar ul li ').click(function(){
var page = $(this).children('a').attr('href');
$('#content').load('content/'+ page +'.php');
return false;
});
});
Now I want to have a sort of history thing in that, the code for that is:
(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
// Iterate over all nav links, setting the "selected" class as-appropriate.
$('#nav a').each(function(){
var that = $(this);
that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
});
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});
Found on: http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
My Question is: how can i make the second code working with the first?
Since you haven't gotten an answer yet I will write it. You need the plugin jQuery hashchange for the code to run.
https://github.com/cowboy/jquery-hashchange
To implement a cache you could do something like
$('#content').load('content/index.php');
//create a cache object
var cache = {};
// handle menu clicks
$('#navBar ul li ').click(function(){
var page = $(this).children('a').attr('href');
//check if the page was already requested
if(cache[page] === undefined){
//if not fetch the page from the server
$.get('content/'+ page +'.php', function(data){
$('#content').html(data);
//save data in cache
cache[page] = data;
}else{
//use data from cache
$('#content').html(cache[page]);
}
return false;
});
Use History JS. It works for HTML5 pushState and also falls back to HTML 4 hashtags. Also works for keeping the state model when the page is refreshed.
I have 3 different tabs where i am displaying data using jQGrids(each tab contain one grid).
But i just thought that my grids are completely the same, only the difference is that they using different url to get data.
So I have three similar girds on each tab only with different urls:
First: url: '/Home/GetData?id=1' Second: url: '/Home/GetData?id=2' and Third: url: '/Home/GetData?id=3'
So i was thinking that may be i may declare grid only once and than on each tab click a can pass the url to load data? So on each tab click jQGrid will be populating from the new url.
May be some one may have any ideas about that?
Or may be some one may have better ideas how to reduce "jQGrid copy-paste" in that case?
UPDATE 0:
Nearly get it work i mean it is working but there is one small problem,
When i am switching tabs the header of the grid getting lost...and some jqgrid formatting as well.
here is my code:
$("#tabs").tabs({
show: function (event, ui) {
if (ui.index == 0) {
//$("#Grid1").appendTo("#tab1");
//$("#Grid1Pager").appendTo("#tab1");
//When Appending only pager and grid div, header getting lost so i've append the whole grid html instead
$("#gbox_Grid1").appendTo("#tab1");
changeGrid("#Grid1", 1);
}
else if (ui.index == 1) {
//$("#Grid1").appendTo("#tab2");
//$("#Grid1Pager").appendTo("#tab2");
$("#gbox_Grid1").appendTo("#tab2");
changeGrid("#Grid1", 2);
}
else if (ui.index == 2) {
//$("#Grid1").appendTo("#tab3");
//$("#Grid1Pager").appendTo("#tab3");
$("#gbox_Grid1").appendTo("#tab3");
changeGrid("#Grid1", 3);
}
}
});
function changeGrid(grid, id) {
$(grid).jqGrid('setGridParam', {
url: '/Home/GetData?id=' + id
});
$(grid).trigger('reloadGrid');
}
UPDATE 1
All right, i've changed the code to append the whole grid instead of appending grid div and pager only. So it is working like that.
You can basically make the tabs as regular buttons that will call some function which sets new URL parameter to the grid and reloads it.
The function should be something like this:
function changeGrid(grid, id) {
$(grid).jqGrid('setGridParam', {
url: '/Home/GetData?id=' + id, page: 1
});
$(grid).trigger('reloadGrid');
}
Note that I set the page to 1. Keep in mind that you might need to set the default sorting column or something similar depending on your solution.
UPDATE
If you really want to go with the tabs, the 'show' event handler can be simplified.
Try this:
$("#tabs").tabs({
show: function (event, ui) {
var id = ui.index + 1;
$("#gbox_Grid1").appendTo("#tab" + id);
$("#Grid1").jqGrid('setGridParam', {
url: '/Home/GetData?id=' + id
});
$("#Grid1").trigger('reloadGrid');
}
});