Develop Reference

Asp.net webform infinity scroll

I have a page shows product catalog populated by a webmethod.
When user click on image he is redirect to details page.
When user come back to catalog id like page scroll bottom at the product visited
How can i accomplish this
my html
<div class="articoli">
</div>
my javascript
<script>
$(document).ready(function () {
var Skip = 9;
var Take = 9;
function Load(Skip, Take) {
$('#divPostsLoader').html('<img src="Images/loading.gif" height="100" />');
$.ajax({
type: "POST",
url: "page.aspx/LoadProduct",
data: "{ Skip:" + Skip + ", Take:" + Take + " }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data != "") {
//accodo dati a div
$('.articoli').append(data.d);
}
$('#divPostsLoader').empty();
},
error: function () {
alert('error');
}
})
};
$(window).scroll(function () {
if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
Load(Skip, Take);
Skip = Skip + 9;
}
});
});
my c# webmethod
[System.Web.Services.WebMethod]
public static string LoadProduct(int Skip, int Take)
{
StringBuilder GetProduct = new StringBuilder();
MyDataBaseEntities db = new MyDataBaseEntities();
var prod = (from a in db.TAB
select a).Skip(Skip).Take(Take);
foreach (var a in prod)
{
var Codart = a.Codart;
var Prezz = a.Prezz;
var pathimg = a.pathimg;
GetProduct.Append("<div class=\"col-md-4\">");
GetProduct.Append("<div class=\"col-md-6 text-left\">");
GetProduct.AppendFormat(string.Format("<a href='Details.aspx?Articolo={0}' class=\"codart\" >", Codart));
GetProduct.AppendFormat("<span class=\"codart\">{0}</span>", Codart);
GetProduct.Append("</a>");
GetProduct.Append("</div> ");
GetProduct.Append("<div class=\"col-md-6 text-right\" style=\"color:gray;font-size:large;\">");
GetProduct.AppendFormat(string.Format("{0:c}", Prezz));
GetProduct.Append("</div> ");
GetProduct.AppendFormat(string.Format("<a href='Details.aspx?Articolo={0}' class=\"codart\" >", Codart));
GetProduct.AppendFormat(string.Format("<img src='{0}' class='img-responsive MyImage' alt='{1}'/>", pathimg, Codart));
GetProduct.Append("</a>");
GetProduct.Append("</div> ");
}
return GetProduct.ToString();
}
how can i scroll bottom at page load?

Try adding an Id to the item(s) you want to scroll to. You can then, depending on how you want to tackle it, either href or assign said Id through a script to initiate a scroll. Here you can see more details on how to scroll to a specific part of your page by using the component's Id.
I would add a unique Id to each item in your list.
Then I would write a script to read/set a variable to which item to scroll to.
Mind you, I'm writing this on a whim so you might need to correct or alter it to fit your needs.
You can use this to save and read cookies with jquery.
The script could be something like this:
var scrollToId;
$(document).ready(function () {
var cookie = $.cookie('last_clicked_id');
if (cookie != '') {
scrollToId = cookie;
} else {
scrollToId = '#';
}
$("html, body").animate({ scrollTop: $(scrollToId).offset().top }, 1000);
});
$('.productItemClass')
.on('click',
function() {
$.cookie('last_clicked_id', $(this).attr('id'));
});

use this and set the variable sc
var sc;
var scroll;
var loop = setInterval(function() {
sc = window.scrollTop;
if (scroll === null) {
localstorage.setItem("bgc", sc);
}
}, 10);
window.onload = function() {
scroll = localstorage.getItem("bgc");
if (scroll !== null) {
window.scollTop = scroll + "px";
}
}

How to plus value with 1 When scroll to bottom and update into input form?

How to plus value with 1 When scroll to bottom page ?
First, Load page index.php
it's will show 1 (from echo $_POST[page]) and then scroll to bottom page it's will show 1 (from echo $_POST[page]) and 1 (from echo $_POST[page]) and 1 (from echo $_POST[page]) ...
i want to apply this code for work like this
First, Load page index.php
it's will show 1 (from echo $_POST[page]) and then scroll to bottom page it's will plus $_POST[page] with 1 and update into input id='page_number' it's will show 2 and 3 and 4 ...
How can i do that ?
index.php
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$("#fid").submit(f1());
</script>
<form method="post" id="fid" action="Javascript:void(0);" >
<input type='hidden' id='page_number' name='page' value='1'/>
</form>
<div id="demoajax">
<script>
function f1(){
$('#demoajax').hide();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#fid').serialize(),
success: function(data){
$('#demoajax').show();
$('#demoajax').html(data);
}
});
return false;
}
// on load page call function code //
$(document).ready(f1());
</script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var height = $('#demoajax').height();
var scroll_top = $(this).scrollTop();
if(($(window).scrollTop() + $(window).height() == $(document).height())){
//$('#demoajax').hide();
//$('#protect_form_between_ajax_process').show();
//$('#loading').show();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#fid').serialize(),
success: function(data){
$('#demoajax').append(data);
}
});
return false;
}
return false;
});
});
</script>
test.php
<?PHP
echo "PAGE ".$_POST[page];
?>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

You have to increment the page number before each AJAX call:
before
if(($(window).scrollTop() + $(window).height() == $(document).height())) {
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#fid').serialize(),
success: function(data) {
$('#demoajax').append(data);
}
});
return false;
}
after
if(($(window).scrollTop() + $(window).height() == $(document).height())) {
var currentPage = parseInt($('#page_number').val(), 10);
currentPage = currentPage + 1;
$('#page_number').val(currentPage);
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#fid').serialize(),
success: function(data) {
$('#demoajax').append(data);
}
});
return false;
}
Beyond that, your code has some problems and could be written as follow:
<!-- Edit 1: HTML comes first, script come later -->
<!-- Edit 2: use real values in HTML attributes instead of JS code -->
<form method="post" id="fid" action="test.php" >
<input type="hidden" id="page_number" name="page" value="1"/>
</form>
<!-- Edit 3: you had unclosed div tag -->
<div id="demoajax"></div>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
// Edit 4: here, you can use only one script tag for all of your JS code
// Edit 5: declare functions first, use them later
// (you had the code $("#fid").submit(f1()); too early in the page)
function f1() {
$('#demoajax').hide();
var $form = $('#fid');
$.ajax({
// Edit 6: retrieve url and type parameter from the HTML form
// this avoid hard-coded values
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize(),
success: function(data) {
// Edit 7: use method chaining where you can
$('#demoajax').show().html(data);
}
});
// Edit 8: don't return false within event handler
}
// Edit 9: avoid premature call invocation problem
$("#fid").submit(f1);
// on load page call function code //
// Edit 10: avoid premature call invocation problem
$(document).ready(f1);
$(document).ready(function() {
$(window).scroll(function() {
// Edit 11: store and reuse jQuery variables
var $window = $(window);
var $demoajax = $('#demoajax');
// Edit 12: remove unused variables scroll_top and height
// Edit 13: use triple equal sign "===" instead of double equal "=="
if(($window.scrollTop()+$window.height() === $(document).height())) {
//$('#demoajax').hide();
//$('#protect_form_between_ajax_process').show();
//$('#loading').show();
// ==============================
// Edit 14: increment the counter
var currentPage = parseInt($('#page_number').val(), 10);
currentPage = currentPage + 1;
$('#page_number').val(currentPage);
// ==============================
var $form = $('#fid');
$.ajax({
// Edit 15: same as above, avoid hard-coded values
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize(),
success: function(data) {
$demoajax.append(data);
}
});
// Edit 16: remove unnecessary return statement here
}
// Edit 17: don't return false within event handler
});
});
</script>
However, personally I would have write it using the module pattern, something like this:
var infiniteScrollLoader = function($container, $form, initialPageNumber) {
var $window = $(window);
var $document = $(document);
var pageNumber = initialPageNumber;
// this function crawls the content of the next page
function requestNextPageContent() {
var request = $.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: pageNumber
});
// when a request is made, increment page number automatically
// avoid spaghetti code, use promise/deferred pattern
request.then(incrementPageNumber);
return request;
}
// use simple dedicated functions
function incrementPageNumber() {
pageNumber = pageNumber + 1;
}
function showContainer() {
$container.show();
}
function appendNextPageContent(data) {
$container.append(data);
}
function showNextPage() {
requestNextPageContent().then(appendNextPageContent);
}
function setPageNumber(pageNumber) {
pageNumber = pageNumber;
}
function onScroll() {
if(($window.scrollTop() + $window.height() === $document.height())) {
showNextPage();
}
}
function init() {
$window.scroll(onScroll);
$container.hide();
// do initial request
// this line should be self-explained and can be read as "text":
// request the content of the next page, then show the container
// then append the page content into the current page
requestNextPageContent()
.then(showContainer)
.then(appendNextPageContent);
}
return {
init: init,
showNextPage: showNextPage,
setPageNumber: setPageNumber
};
};
// init and don't do anything else
infiniteScrollLoader.init( $('#demoajax'), $('#fid'), 1 );
// or use it programatically
infiniteScrollLoader.showNextPage(); // show page 2
infiniteScrollLoader.showNextPage(); // show page 3
infiniteScrollLoader.setPageNumber(6);
infiniteScrollLoader.showNextPage(); // show page 6

Multiple POSTs with jQuery and AJAX

I'm having an issue with posting data via AJAX through a drag and drop interface. The data indeed is hitting my POST URL as defined, however, each and every time, the POST hits twice thereby causing the processing URL to handle the data again.
The premise of my application (at least this piece of it) was starting by basically using the code found at http://jsfiddle.net/UjQVw/2/ and to modify it for my needs.
I needed to have a container of items (in this case names) that were draggable to a user-defined number of divs on the opposite side of the screen -- whereby making 'room assignments' with a list of people.
Everything, except for the double POST is working well. If anyone can assist, I'd be most appreciative!
SAMPLE HTML CODE:
<div class="parent_list">
<h1>Registrants</h1>
<ul id="unplaced" class="group">
<?
foreach ($obj->function as $key => $value)
{
?>
<li data-group-id="0" data-post-id="<?=$value["rmid"]?>">
<?=$value["lname"]?>, <?=$value["fname"]?>
</li>
<?
}
?>
</ul>
</div>
<div class="lists">
<h1>Rooms</h1>
<ul style="display:none" id="new_list" class="group"></ul>
</div>
<input type="button" id='add' value="+ Add Room"/>
SAMPLE JS
<script>
var count = 0;
$("#add").click(function() {
count++;
var $clone = $("#new_list").clone();
$clone.attr({
id: count,
style: "" // remove "display:none"
});
$clone.find(".group").each(function(){
$(this).attr({
id: $(this).attr("id") + count
});
});
$(".lists").append($clone);
$('.group').sortable({
connectWith: '.group',
update: function(event, ui) {
var lodging = new Array();
$('.group li').each(function(i) {
var id = $(this).attr('data-post-id');
var group = $(this).parent().attr('id');
lodging.push(group+'_'+id);
});
console.log(event);
$.ajax({
type : "POST",
cache : false,
url : 'lodging_process.php',
data: {
'lodging[]': lodging
},
});
}
});
});
</script>

You could always buffer it with a boolean.
<script>
var sending = false; //Buffering variable
var count = 0;
$("#add").click(function() {
count++;
var $clone = $("#new_list").clone();
$clone.attr({
id: count,
style: "" // remove "display:none"
});
$clone.find(".group").each(function(){
$(this).attr({
id: $(this).attr("id") + count
});
});
$(".lists").append($clone);
$('.group').sortable({
connectWith: '.group',
update: function(event, ui) {
var lodging = new Array();
$('.group li').each(function(i) {
var id = $(this).attr('data-post-id');
var group = $(this).parent().attr('id');
lodging.push(group+'_'+id);
});
console.log(event);
if(!sending) { //Make sure we are not already sending a request
sending = true;
$.ajax({
type : "POST",
cache : false,
url : 'lodging_process.php',
data: {
'lodging[]': lodging
},
success: {
sending = false; //Upon finishing, allow another ajax command of this type
},
error: {
sending = false;
}
});
}
}
});
});
</script>
See if that works.

After the response by #John, I did some more testing and looking around and found this gem that's apparently stumped several others by me. As stated in the original question, the POST was indeed working...it was simply posting TWICE after each event. The reason for this is that there were changes in BOTH lists, thereby initiating the callback for EACH list that's affected.
Adding this simple if check as outlined here: https://forum.jquery.com/topic/sortables-update-callback-and-connectwith
update:function(e,ui) {
if (this === ui.item.parent()[0]) {
//your code here
}
}
has done the trick for me. Hope this information helps others with multiple callbacks using jQuery sortable and connectWith functions.
So...the new JS looks like this:
<script>
var count = 0;
$("#add").click(function() {
count++;
var $clone = $("#new_list").clone();
$clone.attr({
id: count,
style: "" // remove "display:none"
});
$clone.find(".group").each(function(){
$(this).attr({
id: $(this).attr("id") + count
});
});
$(".lists").append($clone);
$('.group').sortable({
connectWith: '.group',
update: function(event, ui) {
if (this == ui.item.parent()[0]) {
var lodging = new Array();
$('.group li').each(function(i) {
var id = $(this).attr('data-post-id');
var group = $(this).parent().attr('id');
lodging.push(group+'_'+id);
});
$.ajax({
type : "POST",
cache : false,
url : 'lodging_process.php',
data: {
'lodging[]': lodging
},
});
}
}
});
});
</script>

preventDefault is not working

I am trying to send an ajax request to complete a task when a link is clicked. For some reason the e.preventDefault is not working and I still get sent to the page. Is there something I am missing?
It is simply supposed to go to the page set the check-box to checked (or unchecked) then redirect. But again it just goes to the page. Any help would be great!
here is the main.js
$(function() {
$('.ajax-task-complete').on({
click: function(e) {
e.stopPropagation();
e.preventDefault();
var href = $(this).attr('href');
$('<div></div>').load(href+' form', function() {
// Set Form
var form = $(this).children('form');
// Set Checkbox
var cb = form.find('input[type="checkbox"]');
// Taggle Checkbox
cb.prop('checked', !cb.prop('checked'));
// Form Action URL
var url = form.attr('action');
// Set Data
var data = form.serialize();
$.ajax({
url: url,
data: data,
method: 'post',
dataType: 'json',
cache: false,
success: function(obj) {
var tic = $('#task-complete-' + obj.id + ' .ajax-task-complete');
},
complete: function() {
console.log('complete');
},
error: function(err) {
console.log(err);
}
});
});
}
});
});
here is the requested button
<td id="task-complete-{{ entity.id }}">
{% if entity.completed %}
<a class="check ajax-task-complete" href="{{ path('task_edit_complete', { 'id': entity.id }) }}">✔</a>
{% else %}
<a class="uncheck ajax-task-complete" href="{{ path('task_edit_complete', { 'id': entity.id }) }}">✔</a>
{% endif %}
</td>

This is your problem:
Uncaught ReferenceError: $ is not defined?
Read HERE from SO how you load your jQuery-plugin the right way.

you might need to stop bubbling depending on where the click event is occurring. Try adding this and see what happens.
e.stopPropagation();

**"$"**
is missing before (function() {
javascript pageload event should be like
$(function(){
//code here
});
or
function will be called by themself
(function(){
//code here
)}();
or
(function($){
//code here
})(jQuery)
You can check the fiddle here

Your scope is wrong, you are missing the () after (function)(). The function is never called :
(function() {
$('.ajax-task-complete').on({
click: function(e) {
e.stopPropagation();
e.preventDefault();
var href = $(this).attr('href');
$('<div></div>').load(href+' form', function() {
// Set Form
var form = $(this).children('form');
// Set Checkbox
var cb = form.find('input[type="checkbox"]');
// Taggle Checkbox
cb.prop('checked', !cb.prop('checked'));
// Form Action URL
var url = form.attr('action');
// Set Data
var data = form.serialize();
$.ajax({
url: url,
data: data,
method: 'post',
dataType: 'json',
cache: false,
success: function(obj) {
var tic = $('#task-complete-' + obj.id + ' .ajax-task-complete');
},
complete: function() {
console.log('complete');
},
error: function(err) {
console.log(err);
}
});
});
}
});
})(); //Add () here
But is the scope really needed here?
Maybe you meant a ready handler, then it should be like this :
$(function); //Missing '$'

Try placing the preventDefault event at the end of the function as below
$('.ajax-task-complete').on({
click: function(e) {
//
//your code here then,
e.preventDefault();
e.stopPropragation();
});
I can't test if it works or not, as I'm on mobile.

Seeing span tag when I want to be rendering the text within the span tag

I have some words on a page that display "present" or "absent" that a user can click to toggle between being present or absent.
When the word is set to "absent" I want that text to be red.
The word represents a bool and is updated on screen using the following code:
<script type="text/javascript">
absentText = $.trim('#MyApp.Resources.MyAppResource.Absent_Text').toLowerCase();
presentText = $.trim('#MyApp.Resources.MyAppResource.Present_Text').toLowerCase();
updateAttendanceUrl = '#Url.Action("UpdateAttendance", "Attendance")';
</script>
Where MyAppResource.Absent_Text = absent the page displays fine with the word, "absent" on the page.
When I change MyAppResource.Absent_Text to read "absent" my page literally displays <span style="color:red">absent</span>
Here is a sample of my view source:
<td><span style="color:red">absent</span></td>
So somehow my < and > symbols are getting taken away.
How can I change my code so that when the word on my screen is written as "absent" it is colored red?
Is there a simpler way to just color any text on the screen that matches "absent" red?
For reference, here is the rest of the javascript from my page:
var userId;
var attendanceDay;
var isPresent;
var updateAttendanceUrl;
var absentText;
var presentText;
var courseId;
$(document).ready(function (event) {
$('.attendance').live('click', function () {
userId = $(this).parents('tr').attr('id');
if (userId != '') {
attendanceDay = $(this).attr('id');
isPresent = $.trim($(this).find('span').text().toLowerCase());
courseId = $(this).parents('tbody').attr('id');
$(this).find('span').addClass('currentClass');
if (isPresent == absentText) {
UpdateAttendance(1);
} else {
UpdateAttendance(0);
}
} else {
event.preventDefault();
}
});
});
function UpdateAttendance(present) {
url = updateAttendanceUrl;
$.ajax({
type: "POST",
url: url,
data: "userId=" + userId + "&attendanceDay=" + attendanceDay + "&courseId=" + courseId + "&present=" + present,
success: function (data) {
if (isPresent == absentText) {
$('#' + userId).find('.currentClass').text(presentText).removeAttr('class');
} else {
$('#' + userId).find('.currentClass').text(absentText).removeAttr('class');
}
return true;
}
});
}

What your looking for is called unescape or htmldecode. There are various topics available on SO already. Here is one.