Develop Reference

Error: 'History.Adapter' is null or not an object

js and all works fine in all browsers except IE8.
I've next error
Error: 'History.Adapter' is null or not an object
My code:
#Scripts.Render("~/bundles/history")
<script type="text/javascript">
var History = window.History;
$(document).ready(function () {
change(1, '#catalog');
History.Adapter.bind(window, 'statechange', function () {
try {
var State = History.getState();
$('#Products').load(State.url);
} catch (e) {
}
});
function change(id, ItemMenu) {
var url = $('#' + id).val();
try
{
History.pushState({}, null, url);
}
catch(e)
{
}
}
</script>
and scripts:
bundles.Add(new ScriptBundle("~/bundles/history").Include(
"~/Scripts/History/history.adapter.jquery.js",
"~/Scripts/History/history.html4.js",
"~/Scripts/History/history.js",
"~/Scripts/History/json2.js"
));

For correct work in IE 8 you need to place initialization history.js and History.Adapter.bind inside $(document).ready(...)
This will work in all browsers...and IE 8 to
#Scripts.Render("~/bundles/history")
<script type="text/javascript">
$(document).ready(function () {
var History = window.History;
History.Adapter.bind(window, 'statechange', function () {
try {
var State = History.getState();
$('#Products').load(State.url);
} catch (e) {
}
});
});
function change(id, ItemMenu) {
var url = $('#' + id).val();
try
{
History.pushState({}, null, url);
}
catch(e)
{
}
}
</script>

Append more content when scroll to end of page

Hi I only started working on JQuery Mobile a month ago and my starting project was to build an app to load my blog posts. After spending days and night researching and support from SO, I did manage to get my blog posts loaded and also added a Load More link to append new contents.
My intention no is rather than use a link, I want the new contents appended when I scroll to end of page. I do not plan to use a plugin for now but was hoping I could write a simple code to do that for me. This is my current code (First function to load initial contenst while the 2nd function is to append more contents. Not sure if this is the best approach but like I said, I am still in learning process)
$(document).on('pagebeforeshow', '#blogposts', function () {
$.ajax({
url: "http://howtodeployit.com/?json=recentstories",
dataType: "json",
beforeSend: function () {
$('#loader').show();
},
complete: function () {
$('#loader').hide();
},
success: function (data) {
$('#postlist').empty();
$.each(data.posts, function (key, val) {
//Output data collected into page content
var rtitle = $('<p/>', {
'class': 'vtitle',
html: val.title
}),
var rappend = $('<li/>').append(rtitle);
$('#postlist').append(rappend);
return (key !== 5);
});
$("#postlist").listview().listview('refresh');
},
error: function (data) {
alert("Service currently not available, please try again later...");
}
});
});
$(document).on("click", ".load-more", function () {
$.getJSON("http://howtodeployit.com/?json=recentstories", function (data) {
var currentPost = $('#postlist');
console.log(currentPost);
loadMore = currentPost.parent().find('.load-more');
var currentPostcount = $('#postlist li').length;
console.log(currentPostcount);
var desiredPosts = 3;
newposts = data.posts.slice(currentPostcount, currentPostcount + desiredPosts);
$.each(newposts, function (key, val) {
var rtitle = $('<p/>', {
'class': 'vtitle',
html: val.title
}),
var rappend = $('<li/>').append(rtitle);
$('#postlist').append(rappend);
$("#postlist").listview('refresh');
});
});
});
Sorry if this type of question had been answered else where. Please post link

This is a typical approach with jquery,
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
/*end reached*/
$('.content').html($('.content').html()+"more</br></br></br></br>");
}
});
example with jqm,
http://jsfiddle.net/F5McF/

Try this example it works.
function loaddata()
{
var el = $("outer");
if( (el.scrollTop + el.clientHeight) >= el.scrollHeight )
{
el.setStyles( { "background-color": "green"} );
}
else
{
el.setStyles( { "background-color": "red"} );
}
}
window.addEvent( "domready", function()
{
$("outer").addEvent( "scroll", loaddata );
} );
Fiddle is
http://jsfiddle.net/wWmqr/1/

javascript function not responding after ajax request ( xmlhttprequest)

I have the following functions:
$(function() { //add new language
var lg_select = $('#add_language');
var table = lg_select.parent();
var table_head = $('form[name=languageData] tr').has('th')
$('.cv_addLang').click(function(e) {
e.preventDefault();
if(table_head.is(':hidden')) {
$('.nolangauge').hide();
table_head.show();
}
var new_lang = lg_select.clone();
new_lang.find('select[disabled=disabled]').removeAttr('disabled');
new_lang.find('select[name=new_language]').attr('name', 'language[]');
new_lang.find('select[name=new_level]').attr('name', 'language_level[]');
new_lang.appendTo(table).show();
})
})
function getXMLHttpRequestObject() { //ajax
var ajax = false;
if(window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else if(window.ActiveXObject) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
}
}
}
return ajax;
}
$(function() { //ajax
var ajax = getXMLHttpRequestObject();
if(ajax) {
$('div').delegate(".but_cv_w", "click", function(e){
e.preventDefault();
var div_content = $(this).parent().parent();
if(div_content) {
var x=$(div_content).attr('id');
//alert(x);
//alert(div_content);
var path = $(this).attr('href');
//alert(path);
ajax.open('get', path + '&ajax=true');
ajax.onreadystatechange=function() {
if(ajax.readyState == 4) {
if((ajax.status == 200) || (ajax.status == 304)) {
$(div_content).html(ajax.responseText);
} else {
$(this).click;
}
}
}
ajax.send(null);
return false;
}
})
}
})
The problem is that both new language and ajax are working fine but separated. If I delete the ajax function then new language function is working but if I keep the ajax function and make an ajax request then the other function (new language) isn't working anymore. It seams that after an ajax request the new language function dosen't work the seam as befor the ajax request.
The new language function is supposed to add new inputs for languages, the "cv_addLang" is the calss of an button which appears on the page after an normal server request or after a ajax request?
Hope someone could help me with this ??
Thanks for any help!

The Problem lies on the add new language function. Instead of an click event it is necesary to use delegate event and so the function should look like this in order for it to work.
$(function () { //add new language
$("body").delegate('.cv_addLang','click',function(e) {
e.preventDefault();
var lg_select = $('#add_language');
var table = lg_select.parent();
var table_head = $('form[name=languageData] tr').has('th');
if(table_head.is(':hidden')) {
$('.nolangauge').hide();
table_head.show();
}
var new_lang = lg_select.clone();
new_lang.find('select[disabled=disabled]').removeAttr('disabled');
new_lang.find('select[name=new_language]').attr('name', 'language[]');
new_lang.find('select[name=new_level]').attr('name', 'language_level[]');
new_lang.appendTo(table).show();
});
})

Variable Scope help: this.reset() is not a function

when save() executes this.reset() or that.reset() it can't find the reset() method and says it's not a function. I used a workaround on init() to get it to work, but that method didn't work in save()
var vehicle = function () {
return {
init: function () {
var that = this;
jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
e.preventDefault();
that.remove(jQuery(e.currentTarget).parents('.vehicle-year-profile'));
});
jQuery('.vehicle-year-profile .options .edit').bind('click', function (e) {
e.preventDefault();
that.edit(jQuery(e.currentTarget).parents('.vehicle-year-profile').attr('id'));
});
jQuery('#association-detail .save').bind('click', function (e) {
e.preventDefault();
that.save();
});
},
save: function () {
var data = new Array();
data['onSet'] = '';
var onSet = jQuery('#association-detail input:checked');
for (var i = 0; i < (onSet.length-1); i++) {
data['onSet'] = data['onSet']+','+onSet.attr('id');
}
var priceSet = jQuery('#association-detail input[type=text]');
for (var i = 0; i < (priceSet.length-1); i++) {
data['priceSet'] = data['priceSet']+','+priceSet.attr('id')+':'+priceSet.val();
}
jQuery.ajax({
type: 'post',
url: '/ajax/store/product/saveAssocDetail.php',
data: data,
success: function (r) {
if (r.length > 0) {
document.triggerNotification('check', 'Changes have been saved');
var that = this;
that.reset(); //ERROR IS TRIGGERED HERE
} else {
document.triggerNotification('x', 'Unable to save changes');
}
},
error: function () {
document.triggerNotification('x', 'Unable to process your request, ajax file not found');
return false;
}
});
},
reset: function () {
jQuery('#association-detail h3').html('');
jQuery('#assocationVehicleId').val('');
jQuery('#association-detail input:checked').attr('checked', false);
jQuery('#association-detail input[type=text]').val('0.00');
jQuery('#association-detail').hide();
}
}
}();
jQuery(function() {
vehicle.init();
});

Perhaps it's because you've made your reference to this inside your ajax call. Try putting this line:
var that = this;
before you make your ajax call, and then refer explicitly to that in your ajax call. So, something like:
var that = this;
jQuery.ajax({
type: 'post',
url: '/ajax/store/product/saveAssocDetail.php',
data: data,
success: function (r) {
if (r.length > 0) {
document.triggerNotification('check', 'Changes have been saved');
/**
* now you can refer to "that", which is in the proper scope
*/
that.reset(); //ERROR IS TRIGGERED HERE
} else {
document.triggerNotification('x', 'Unable to save changes');
}
},
error: function () {
document.triggerNotification('x', 'Unable to process your request, ajax file not found');
return false;
}
});

you should look at this: http://api.jquery.com/jQuery.proxy/ and also - check Function.bind prototype (ES5 spec) - https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind or alt ways like http://webreflection.blogspot.com/2010/02/functionprototypebind.html
using that = this is fair but probably does not read as clearly.
jQuery ajax also supports context: this to rebind the callbacks for you automatically.

What causes this code not to work?

I'm trying to understand why this does not work. (Basic example with no validation yet)
When I test it, firebug states Product.addPage is not found.
var Product = function ()
{
var Page = function ()
{
var IMAGE = '';
return {
image : function ()
{
return IMAGE;
},
setImage : function (imageSrc_)
{
IMAGE = '<img id="image" src="' + imageSrc_ + '" height="100%" width="100%">';
}
};
};
var PAGES = [];
return {
addPage : function ()
{
var len = PAGES.length + 1;
PAGES[len] = new Page();
return PAGES[len];
},
page : function (pageNumber_)
{
var result = PAGES[pageNumber_];
return result;
}
};
};
// Begin executing
$(document).ready(function ()
{
Product.addPage.setImage('http://site/images/small_logo.png');
alert(Product.page(1).image());
});

You're trying to reference the addPage property of the Product function (which in this case is a constructor), rather than on the returned object.
You probably want something like:
// Begin executing
$(document).ready(function ()
{
var product = new Product();
product.addPage().setImage('http://site/images/small_logo.png');
alert(product.page(1).image());
});
which also adds the brackets to the addPage call (though this is not the problem that FireBug will have been complaining about as it will not be able to find that method anyway).

How about Product.addPage().setImage('http://site/images/small_logo.png');?
Edit: Turns out I only caught half the problem. Look at dtsazza's answer for the whole thing.

This would work too:
Product().addPage().setImage('http://site/images/small_logo.png');

How about:
var Product = {
Page : function() {
return {
_image : '',
Image : function() {
return this._image;
},
setImage : function(imageSrc_) {
this._image = '<img id="image" src="' + imageSrc_ + '" height="100%" width="100%">';
}
};
},
Pages : [],
addPage : function() {
var Page = new Product.Page();
this.Pages.push(Page);
return Page;
},
GetPage : function(pageNumber_) {
return this.Pages[pageNumber_];
}
};
// Begin executing
$(document).ready(function ()
{
Product.addPage().setImage('http://site/images/small_logo.png');
alert(Product.GetPage(0).Image());
});