We Keep Coding

Disable AJAX Load of Content via Function

I have a custom plugin that was originally loading html content via ajax into the page by appending a hash marker and page ID to the URL.
I am very new to this level of complexity and would like to 'undo' this functionality, so the plugin can initialize without the Router function. I've been looking at this for a couple days and am pretty lost...
The entire plugin seems to be initialized by this function. Any tips or suggestions on how to turn 'off' this feature, so the code still initializes without appending the # to the URL would be greatly appreciated.
$(function() {
var connections = [],
IEversion = detectIE(),
killConnections = null,
node = null,
randomBehaviour,
rootIndex = 1,
silentRoute = null;
// Splash.
var splash = {
init: function() {
$('#splash').addClass('active');
$('.node.splash').draggable({
containment: 'parent',
drag: function() {
if(!splash.destroyed) {
$('.node.splash').addClass('dragging');
splash.destroy('drag');
splash.destroyed = true;
}
},
scroll: false,
disabled: false
});
setTimeout(function() {
if($('.arrow').is(':visible')) {
splash.destroy();
}
}, 4000);
},
destroy: function(event) {
if(event === 'drag') {
$('.arrow').hide();
} else {
$('.arrow').fadeOut(500);
}
$('#splash-wrapper p, .node.splash').fadeOut(500);
setTimeout(function() {
$('#splash').remove();
nody.init();
}, 500);
},
destroyed: false
};
// Router.
var routes = {
'/': function() {
if(!splash.destroyed) {
splash.init();
}else {
nody.unloadMenu();
}
}
};
var router = Router(routes);
router.configure({
strict: false,
before: function() {
if(silentRoute) {
silentRoute = false;
return false;
}
}
}).init('/');
});

An easy answer-
$.mobile.ajaxEnabled = false;
Using jQuery Mobile.
Detail is here.
If u want to use jQuery, then there is not a direct way of doing it.
So u should use a global variable for doing it like this way-
var is_ajax_enabled = true;
$(document).ready(function()
{
...................
...................
$("selector").click(function()
{
...................
//before AJAX call, just do a checking like it-
if(is_ajax_enabled())
{
//make your AJAX call here
$.ajax({url: "demo_test.txt", success: function(result)
{
$("#div1").html(result);
}});
}
...................
});
...................
...................
});
function disable_ajax()
{
is_ajax_enabled=false;
}
function enable_ajax()
{
is_ajax_enabled=true;
}
function is_ajax_enabled()
{
return is_ajax_enabled;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Update-
If u want to have only one request available at a time and make a queue for the request, u can try this jQuery-Ajax-Singleton like this way-
$.ajax(options || {})

focusin event using on not firing

I am attempting to perform some action on the foucsin of the textbox. However, for some reason the event never fires.
$(".ddlAddListinTo li").click(function () {
var urlstring = "../ActionTypes";
$.post(urlstring, function (data) {
$(window.open(urlstring, 'Contacts', 'width=750, height=400')).load(function (e) {
// Here "this" will be the pop up window.
$(this.document).find('#txtAutocompleteContact').on({
'focusin': function (event) {
alert('You are inside the Contact text box of the Contacts Popup');
}
});
});
});
});

When doing it that way, you generally have to find the body or use contents() to access the contents, as in
$(this.document).contents().find('#txtAutocompleteContact')
but in this case using a little plain javascript seems more appropriate :
$(".ddlAddListinTo li").on('click', function () {
var urlstring = "../ActionTypes";
$.post(urlstring, function (data) {
var wind = window.open(urlstring, 'Contacts', 'width=750, height=400');
wind.onload = function() {
var elem = this.document.getElementById('txtAutocompleteContact');
$(elem).on('focus', function() {
alert('You are inside the Contact text box of the Contacts Popup');
});
}
});
});

javascript not displaying login form again

when I click on the log in button the pop up open correctly. But when I close it and again click on the log in button without refreshing the page, it doesn't appear.
my code is:
<script type="text/javascript">
load_login_page = function() {
$.get(HOST_NAME + "e_commerce/ECommerces/ecommerce_login", {}, function(data) {
$("#temp_login_box").html(data);
$.blockUI({
message:$('#temp_login_box'),
css:{
top:($(window).height() - 300) / 2 + 'px',
left:($(window).width() - 800) / 2 + 'px',
width:'620px',
border:'none',
background:'none',
cursor:'default'
},
overlayCSS:{ backgroundColor:'#333' }
});
load_login_ajax_form();
});
};
load_login_ajax_form = function () {
var options = {
beforeSubmit:show_login_request, // pre-submit callback
success:show_login_response // post-submit callback
};
$('#product_info_form').ajaxForm(options);
};
show_login_request = function (formData, jqForm, options) {
return true;
};
show_login_response = function (responseText, statusText, xhr, $form) {
if (responseText == 'ok') {
// $("#temp_login_box").html(responseText);
window.location.href = HOST_NAME + "e_commerce/ECommerces/user_desboard";
//load_login_ajax_form();
} else {
$("#temp_login_box").html(responseText);
load_login_ajax_form();
}
};
hide_login_info = function() {
$.unblockUI();
};
hide_login_info is form closing function. temp_login_box is id to targeted div. please help me out with this code.

Please trace your function load_login_page to check whether $.get called every time.
because you are creating $.blockUI in success of $.get

To check more i need $.unblockUI Code.
But what i suggest is, in unblockUI function either you do empty the div or hide it.
If you hide it then to show on click you have to write $().show(); in $.blockUI function
if it is not the reason
provide $.unblockUI code then might be i can help you.
Note is jquery selector for the div you hide

How to execute .load() on http post?

In my application, I have a piece of code that "catches" all the clicks on an anchor, and loads it into my page:
$("a").live("click", function () {
var src = $(this).attr("href");
if ($(this).attr("target") === "_blank")
return true;
$("#myPage").load(src + " #myPage");
return false;
});
Now this works on all anchor tags. How can I make all my POST requests (sending forms data) behave like that?
Edit: As Kevin said, I tried using .post, but it doesn't work for me, what did I do wrong? Here's the code:
$("form").post("submit", function () {
var src = $(this).attr("action");
$("#myPage").load(src + " #myPage");
return false;
});

Use the form submit event to handle form POST case
$(document).on('submit', 'form', function(){
var $this = $(this);
$.ajax({
url: $this.attr('action'),
type: 'POST',
data: $this.serialize()
}).done(function(responseText){
$("#myPage").html(responseText)
});
return false;
})
Since you are using jquery 1.9, you may have to rewrite the a handler as
$(document).on("click", 'a', function () {
var src = $(this).attr("href");
if ($(this).attr("target") === "_blank")
return true;
$("#myPage").load(src + " #myPage");
return false;
});

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;
}