We Keep Coding

Ajax History API default content

I currently use a small Javascript-based code, for my Ajax pages, etc. but I'm stuck at one important step; the default content. I've tried to just write content in the #content div.. It seemed to work, even with the Ajax page-push (That it would disappear after a content changed.) But once I reload the page, it is back again.
So, does anyone know how to display default content, without it appearing after a page refresh (If the content changed)?
CODE:
$(function () {
var load = function (url) {
$.get(url).done(function (data) {
$("#content").html(data);
})
};
$(document).on('click', 'a', function (e) {
e.preventDefault();
var $this = $(this),
url = $this.attr("href"),
title = $this.text();
history.pushState({
url: url,
title: title
}, title, url);
document.title = title;
load(url);
});
$(window).on('popstate', function (e) {
var state = e.originalEvent.state;
if (state !== null) {
document.title = state.title;
load(state.url);
} else {
document.title = 'World Regions';
$("#content").empty();
}
});
});

Dynamically adding scripts makes conflict and not works properly

I was dynamically adding the scripts and link tags to the page from another page through ajax call response value, some time its not adding to page, some times its not working, occurs conflict with each other while loading.
$(document).ready(function () {
siteResponse();
$(window).error(function (e) {
e.preventDefault();
});
});
function siteResponse() {
var protocol = "http://IP/";
var server = "Site/";
var accessPage = "Home.aspx";
var url = protocol + server + accessPage;
var res = "";
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
options.async = true;
});
$.ajax({
url: url,
success: function (result) {
res = result;
var str = res;
var scrpt = /<(?:SCRIPT|script \b[^>]*)>([\s\S]*?)<\/(?:SCRIPT|script)>/gm;
var lnk = /<link([\s\S]*?)\b[^>]*\/>/g;
while (res3 = lnk.exec(str)) {
$("#footerSection").append(res3[0]);
}
while (res2 = scrpt.exec(res)) {
$("#footerSection").append(res2[0]);
}
}
});
}
links added properly to the page but scripts not working properly, sometime its conflicting with each other, some times its not loading to the page

Controls won't work after a recursive call jquery

I am opening mvc view(s) inside a modal dialog.
I am trying to make a recursive call and the problem I am facing is : after the recursive call the view loads properly but none of the controls on the view work :
In Main.js :
$(function () {
$(document).on('click', '.ddlCart li', Mod.Carts);
}
Carts.js :
var Mod = Mod || {};
Mod.Carts = function (e) {
var ddlselectedVal = $(this).attr('id');
var selectedListinsCount = selected_Listings.length;
var SelectedMlsnums = selected_Listings.join();
var agentId = $("#AgentId").val();
var Action;
var EnvironmentURL = $("#EnvironmentURL").val();
var postData = { AgentId: agentId, Mlsnums: SelectedMlsnums, ActionTypeValue: “PreAddToCart” };
var close = function (event, ui) {
$('#dvModalDialog').dialog("close");
}
var open = function (event, ui) {
var url = EnvironmentURL + "MLSReports/Stats/SearchContacts";
$("#btncart_cancel").on("click", function () {
$('#dvModalDialog').dialog("close");
});
$("#btncart_submit").on("click", function () {
var url = EnvironmentURL + "MLSReports/Stats/Cart";
//Send the data using post and put the results in a div
$.post(url, {
AgentId: agentId, Mlsnums: SelectedMlsnums, ActionTypeValue: "AddToCart"
},
function (data) {
// Replace current data with data from the ajax call to the div.
$("#dvModalDialog").empty().append(data);
});
});
$("#lnkCreateNewcart").on("click", function () {
var url = EnvironmentURL + "MLSReports/Stats/Cart";
//Send the data using post and put the results in a div
$.post(url, {
ActionTypeValue: "preAddorEditContact"
},
function (data) {
//debugger;
// Replace current data with data from the ajax call to the div.
$("#dvModalDialog").empty().append(data);
$("#btnCancelContact").on("click", function () {
////********** replace the view (Contact) with the view (Cart).
// In the cancel event I am loading the previous page.I am having problem here. after a recursive call none of the controls work.**
// rd.open();
this.Mod.Carts();
});
});
});
};
if (ddlselectedVal == "AddtoCart") {
var rd = Mod.ReportsDialog({ title: 'Add To Cart', close: close, open: open });
rd.url = EnvironmentURL + "/MLSReports/Stats/Cart";
rd.targetElement = '#dvModalDialog'// '#dvSendEmail'
rd.formName = '#frmCart'
rd.postData = postData
rd.open();
}
};

The value of this inside of the referenced function is going to be different when this.Mod.Carts(); is used. You should use call in this scenario to bind the value of this to the proper value when calling the Carts function.
$("#btnCancelContact").on("click", function () {
Mod.Carts.call(this);
});

how to put an ajax loader before .ready

I need to archive this task.i have seen this type of tasks in various sites.
$(document).ready(function () {
$.ajax // rest of codes goes here
$("").load // rest of codes goes here
});
I need to show a gif before ready the document(DOM).After the ready the DOM it should disappear automatically.The gif should on the middle of the page.Any idea?
JAVASCRIPT
$(document).ready(function () {
//calculater start
$("#step2_6").click(function () {
$("#calculater").load("cal/cal.html");
});
//calculater end
//menu start
$(".container").load("../../view/html/menu.html", function () {
$(".main_menu.nav a").css("opacity", 0.3);
$("#step1").css("opacity", 1);
//new company start
$("#step1_1").on("click", function () {
//new company start setup opening....
$(".load_window").load("../../view/html/Finalsetup.html", function () {
//company file download
$("#downloadLink").click(function () {
var companyname = $("#company_name").val();
$(this).attr("href", +"../../company_info/" + companyname + "/" + companyname + ".json");
$(this).attr("target", "_new");
});
//create the company through ajax...
$("#CreateCompanyButton").click(function (event) {
event.preventDefault();
//adding step1 and step2 forms
var data = $("#companyData").serialize();
var dataTwo = $("#companyDataStepTwo").serialize();
$.ajax({
type: "POST",
url: "../../controller/business_contact_info.php",
data: data + "&" + dataTwo,
beforeSend: function () {
//loading a gif
$(".loader").html("<img src='../../img/loader.gif' />");
},
success: function (response) {
$(".main_menu.nav a").css("opacity", 1);
//remove gif after loaded
$(".loader").html(" ");
//add your infor window operning...
$(".load_window").load("../../view/html/addYourInfo.html", function () {
$("#addThePeople").click(function () {
//hidden add people window is opening...
$("#addPeopleWindow").show();
//select the excel sheet...
$("#excel").change(function () {
//opening table window...
$("#addPeopleWindow").load("../../view/html/tabledata.html", function () {});
});
});
});
}
});
});
//adding scipt to selectors...
$('.selectpicker').selectpicker();
$(".drag").draggable();
$("#previewButton").on("click", function () {
$("#previewSettingsView").show();
});
$("#previewClose").on("click", function () {
$("#previewSettingsView").hide();
});
$("#step_two").hide();
$("#step_three").hide();
$("#step_four").hide();
$("#step_one_button").click(function () {
$("#step_one").hide();
$(".tell_us").css("opacity", "0.4");
$(".contact_info").css("opacity", "*0.2");
$("#step_two").show();
});
$("#step_two_back").click(function () {
$("#step_two").hide();
$("#step_one").show();
});
});
});
});
});

Just put the code into your script, without enclosing $(document).ready(). It will be executed as soon as the <script> tag is parsed by the browser.

Javascript function only works once

I have an inline script on my page as such:
<script type="text/javascript">
var rootPath = '<%= Url.Content("~/") %>';
$(document).ready(function () {
$('#logonStatus').click(function () { loadLoginForm(); });
alert('Document Ready');
});
function loadLoginForm() {
if(!serenity.tools.isStyleSheetLoaded('redmond.css')) {
$('head').append('<%= Url.StyleTag("Redmond/redmond.css", MediaTypes.Screen) %>');
}
if(!serenity.tools.elementExists($('#logonContainer'))) {
$.ajax({
async: false,
cache: false,
datatype: 'html',
success: function (data) { $('body').append(data); },
type: 'GET',
url: '/Membership/LogOn'
});
}
$('#logonContainer').dialog({
modal: true,
hide: 'slide'
});
}
</script>
I also am loading a custom javascript file and the contents of it are as such:
var serenity = new function () {
$(document).ready(function () {
jQuery.ajaxSetup({
beforeSend: function (xhr) {
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}
});
});
this.tools = new function () {
this.isStyleSheetLoaded = function (fileName) {
$(document.styleSheets).each(function () {
if (this.href.toLowerCase().indexOf(fileName) != -1) {
this.isStyleSheetLoaded = true;
return;
}
});
this.isStyleSheetLoaded = false;
}
this.elementExists = function (element) {
this.elementExists = element.length != 0;
}
}
}
The file that is being loaded by the ajax call is simply a div with an table containing input elements. The file does not contain any javascript in it whatsoever.
My problem is that the first time I call isStyleSheetLoaded it works just fine but after the file is loaded and the dialog is shown and closed I click on the link that fires the loadLoginForm function but this time it says isStyleSheetLoaded is not a function. This is showing up in all browsers, so I am 99% sure it is my problem, but I have no idea what it is. Could someone please point me in the right direction?
Thanks in advance.

I think your problem is the following:
you define a function "this.isStyleSheetLoaded = function (fileName)" but in his body you overwride this property "this.isStyleSheetLoaded = true;".
So after your first call of isStyleSheetLoaded the function is overwride with a boolen.
the right way could be:
this.isStyleSheetLoaded = function (fileName) {
$(document.styleSheets).each(function () {
if (this.href.toLowerCase().indexOf(fileName) != -1) {
return true;
}
});
return false;
}