Showing all posts tagged: 'jQuery'

A 13-post collection

Accessing local data files using Html and Chrome

During the development and testing stages of a new website, there are time when you may need to access Json or xml data stored in a local file. The test site can be running under Visual Studio, IIS Express or even IIS. I recently had to quickly test some javascript code that interacted with Json data. I was trying to debug using Chrome's Developers tools but I was getting an error at every execution. The method was doing nothing more than this: $.getJSON('file:///C:/Temp/testdata.json' By default, Chrome does not allow javascript  to interact with local file …[read more]

Tidy up your forms with horizontal sliding divs using JQuery UI

Many websites still make use of lengthy scrollable forms or numerous page post backs when requesting input from their users, e.g shopping cart check outs etc. jQuery and jQueryUI give developers the opportunity to significantly improve the overall UI experience. In this tutorial, we will look into creating sliding panels/divs that respond to user input and allow the users to navigate through the data entry process in a nice, fluid way. First we need to ensure that we reference the appropriate libraries: jQuery 1.9.0 jQueryUI 1.9.2 Then we need to create our html elements: …[read more]

Uncaught Type Error: Object [object Object] has no method '' – jQuery Error

Many developers have been caught up by this error message judging by the number of posts on StackOveflow! I had to spend a few hours with this exception until finding the solution. Now I know that writing code while tired is never a good thing! The problem started when I tried to integrate the FileDrop jQuery plugin to my MVC 4 project. After adding all the files and JavaScript code, I was greeted by this perplexing error message: Object [object Object] has no method.. This error, in most cases, means that jQuery is not working and no such function can …[read more]

HTML5 Drag and Drop file upload with preview using jQuery and MVC 4

With the advent of HTML5 and its wide adoption by all major browsers, web developers now have a new arsenal in their hands for implementing powerful file upload functionality on their website. In this tutorial we will see how to implement this using the FileDrop jQuery plugin and an MVC controller to receive and store the uploaded files in a repository on the server. First create a new MVC 4 website in Visual Studio. An existing website can also be used.  Create a new blank view and name it “UploadFiles”. You should be able to navigate to the page using …[read more]

jQuery UI Autocomplete with jSON in MVC 4

jQueryUi has an autocomplete plugin that allows developers to turn any standard text box to turn any standard textbox to an autocomplete search box. In this case we will try to implement this in the simplest way possible using a web service as the data source. First of all, create a standard MVC 4 project. This will be used to test our functionality, however any existing website can be used for the same purpose. If you are not already referencing the jQuery and jQuery UI libraries in your _layout.cshtml, add them. You can either add them directly in your …[read more]