Jquery Ajax error handling to ignore aborted

Error comes from when the web page refresh too much fast than it can load.

For example, a web page load a huge data, even with ajax pagination, and users refresh multiple times of this page

 

Solution which resolved this problem :

var unloaded = false;
$(window).bind('beforeunload', function(){
    unloaded = true;
});

$(document).ajaxError(function(event, request, settings) {
    if (unloaded || request.statusText == "abort") {
        return;
    }
    ...
}

Ref.
http://stackoverflow.com/questions/4807572/jquery-ajax-error-handling-to-ignore-aborted

Advertisements

[jQuery] Comparison of getJSON and ajax

Comparison of jQuery getJSON and ajax.

I tried to debug this code in jQuery(the following), the object is to get the data from a json file and re-format the output data into an array, this array will be used in others functions later.

$(document).ready(function() {
  var arr = [];
  // Get data from a json file
  $.getJSON("jsonfile.json", {}, function(data) {
    $.each(data, function(key, value) {
      arr.push(value); // Add data value to an array
    });
  });
  console.log(arr); // Print the array to console
});

Continue reading

Drop down menu (jquery+css)

Recently, I worked on with a project which need a drop down menu. I share my code here:

You can find the simple demo here.

HTML (with just simple ul and li) :

​<ul class="your_menu">
	<li>
		<a href="" title="">MON MENU</a>
		<ul>
			<li><a href="#" title="">Sous menu 1</a></li>
			<li><a href="#" title="">Sous menu 2</a></li>
		</ul>
	</li>
</ul>

Jquery (I used version 1.8.3, but it will compatible with older version, just not so old):

$(document).ready(function() {
	// Lorsqu’on entre dans le menu
	$(‘ul.your_menu li’).mouseenter(function() {
		$(this).find(‘ul:first’).slideDown();
	});

	// Lorsqu’on sort du menu
	$(‘ul.your_menu li’).mouseleave(function() {
		$(this).find(‘ul:first’).slideUp();
	});
});​

CSS (the list will display with table-cell, the background will be transparent, and the bottom border will be round):

.your_menu{
	list-style-type:none;
	display: table;
}

.your_menu li{
	display:table-cell;
}

.your_menu li ul{
	list-style-type: none;
	display:none;
	position:absolute;
	opacity:0.8;
}

.your_menu li ul li{
	display:block;
}

.your_menu li ul li:last-child{
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}