• PHP
  • Ruby on Rails
  • MySQL
  • Linux
    • SELINUX
    • Fedora
    • debian
  • Apache
  • nginx
  • AJAX
Albertech.net

Category Archives: Ajax

AJAX tips and scripts

Rails – jQuery generating extra HTML headers after AJAX call

May 24, 2017 12:54 pm / Albertech.net

If you get the following extra HTML headers after using the jQuery AJAX method on a page and immediately clicking on another link:

0
HTTP/1.1 200 OK
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
Content-Type: text/html; charset=utf-8
X-UA-Compatible: IE=Edge
Transfer-Encoding: chunked

Tracing back to my webapp, it looks like the error was due to jQuery expecting a callback from my Rails AJAX method. It times out automatically after a few seconds, but if you click on another link immediately after it will generate additional HTML headers. To fix this, I added a new response to the script as a JSON.

In my Rails app, I added the following line to the corresponding method in the controller:
render json: nil, status: :ok

Ruby 3+

I didn’t have to make any additional changes on the jQuery script. The following worked for me without any issue:
$.ajax({
url : "/myapp/myajaxscript",
type: "POST",
data : formData,
success: function(data,status)
{
console.log(status);
}
});

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: AJAX, jQuery, Ruby on Rails

Review: Top 3 jQuery tree plugins

March 14, 2012 5:54 pm / Albertech.net

As a Content Management System developer, having a good tree plugin is key to organizing files in directories. With a small number of folders, any jQuery tree plugin will suffice. But, I’ve encountered some limitations with 1000+ folders and Internet Explorer compatibility.

Dynatree

Dynatree is my current favorite jQuery plugin. The code is maintained with very good browser compatibility (IE 8 works without any problems), excellent documentation, and lots of features. Supports checkboxes, drag and drop, persistence, and HTML/JSON/or Javascript data loads. If you have a large number of folders, it is best to use JSON as the data object since you can use AJAX to dynamically load the lists.  Even without the “lazy load” option, the script runs fast with a single load of the JSON data.

Download | Demo | Documentation

 jsTree

jsTree is one of the more popular plugins, but I have had issues with Internet Explorer 7/8 compatibility. The plugin works great in Internet Explorer 9, Firefox, Chrome, and Safari though. In Internet Explorer 8, JSTree will error out with a “stop running this script” javascript message if you have a large number of folders. If you don’t plan to run many folders in the tree, JSTree is a good choice with its features and community. Data load via AJAX, JSON compatibility, and drag and drop features name a few of the cool features.

Download | Demo | Documentation

 jQuery Tree Control

jQuery-Tree-Control is a great option for a lightweight jQuery tree script. Excellent cross-browser compatibility, small footprint, and easy to implement. The major limitation is persistence, so it doesn’t save the last folder open on refresh. I originally used this plugin for my project, but needed a few more features that the other two plugins have.

Download | Demo | Documentation

 

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: AJAX, jQuery / Tagged: jquery, menu, tree

Fix: html parsing error unable to modify the parent container element before the child in IE8

February 8, 2012 6:58 pm / Albertech.net

If you run Internet Explorer 8 and encounter the following error:

“html parsing error unable to modify the parent container element before the child”

or

“Internet Explorer cannot open the Internet site http://<Web site>.com. Operation aborted.”

The error basically means that an element on the page is trying to get modified without being completely loaded. (e.g. deleting or appending to the object). Possible causes are lightbox style or flash messenger transitions that run the following code:

$("body").append

It appears to be specific to Internet Explorer 8 with the way it parses the DOM object.  Here’s a good reference to the problem on MSDN – http://blogs.msdn.com/b/ie/archive/2008/04/23/what-happened-to-operation-aborted.aspx

Fix: The quickest fix is to use jQuery to prevent the script from running until the page is fully loaded. 

$(document).ready(function(){
// Your Javascript function goes here
});
</script>

 

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: AJAX, jQuery / Tagged: fix, ie8, jquery

Simple jQuery image rollover script

June 2, 2011 4:47 pm / Albertech.net

Here’s my simple jQuery image rollover script.
View albertech-net-jquery-rollover.js Source

I modified it to work with absolute URLs. This works well if you have different servers hosting your image files. Adding image rollovers to your page is easy – just add class=”rollover” to your images.

$(function() { 
$("#content .rollover").hover(function() {
// albertech.net rollover - get the extension of an absolute file path
var extensionLoc = ($(this).attr("src")).lastIndexOf(".");
var imgExtension = ($(this).attr("src")).substr(extensionLoc);
var hoverImage = ($(this).attr("src")).substr(0,extensionLoc) + "-hover" + imgExtension;
$(this).attr("src", hoverImage);
}, function() {
$(this).attr("src", $(this).attr("src").split("-hover.").join("."));
});
});

Usage:
1) Make a div with the id named “content”.
2) Add a class=”rollover” to the image.
3) Make two images — the second rollover one must have the same name as the first image with a -hover added to the end. For instance:

myimage.gif
myimage-hover.gif

The page should look something like: (simplified)
<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#content .rollover").hover(function() {
// albertech.net rollover - get the extension of an absolute file path
var extensionLoc = ($(this).attr("src")).lastIndexOf(".");
var imgExtension = ($(this).attr("src")).substr(extensionLoc);
var hoverImage = ($(this).attr("src")).substr(0,extensionLoc) + "-hover" + imgExtension;
$(this).attr("src", hoverImage);
}, function() {
$(this).attr("src", $(this).attr("src").split("-hover.").join("."));
});
});
</script>
</head>
<body>
<div id="content">
   <img class="rollover" src="myimage.gif" alt="" />
</div>
</body></html>

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: AJAX, jQuery / Tagged: image rollover, jquery

Javascript errors with DivX plugin

May 16, 2011 3:28 pm / Albertech.net

There is a known issue with the DivX plugin causing Javascript errors “tagName is empty or not an object”. This is due to the plugin interfering with existing Javascript on the page. Javascript elements that doesn’t use the tagName element will cause the browser to throw an error that stops any Javascript from running on the page. 

The only real fix is to uninstall the DivX plugin.

References:
http://labs.divx.com/node/16824

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: jQuery

Post Navigation

← Older Posts
 

Categories

  • AJAX
  • Android
  • Apache
  • Canon Cameras
  • Cloud
  • CMS
  • Computer Mods
  • Conferences
  • Deals
  • debian
  • Fedora
  • Flash
  • Frameworks
  • git
  • Hardware
  • HTML
  • IDE
  • iPhone
  • iPhone App Review
  • jQuery
  • Linux
  • Mac OS X
  • MySQL
  • nginx
  • PHP
  • portfolio
  • Puppet
  • Ruby on Rails
  • Script Reviews
  • SELINUX
  • Software
  • Software Review
  • SQL Server
  • statistics
  • Tech
  • Tomcat
  • Uncategorized
  • VMWARE
  • VPS
  • Windows
  • wordpress
  • Zend Framework

Blogroll

  • DragonAl Flickr
  • Dropbox – Free 2GB Account
  • James' Blog
  • Javascript Compressor
  • PHP Builder Community
  • PHP-Princess.net
  • Rubular – Regular Expression Validator
  • The Scale-Out Blog
  • Tiny MCE

Tags

activation AJAX android antec Apache AWS awstats canon coda codeigniter debian enclosure external free G1 install vmware tools Internet Explorer iphone 5 jquery Linux mx-1 MySQL office 2007 OSX photoshop PHP plugin plugins portfolio redesigned website review rewrite script security SELinux ssh tinymce tutorial upgrade VMWARE vmware server wordpress wordpress mu XSS zend framework
© Copyright 2013 Albertech.net
Infinity Theme by DesignCoral / WordPress
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.