So here is the usual html file uploading interface
Nice file upload interface using Jquery
We all know how to upload a file using html form. But I thought to improve that interface a bit using JQuery (Of course I used CSS but i'm writing about JQuery part).
So here is the usual html file uploading interface
I wanted to show a button to choose file and After choosing display a button to upload that file. Chosen file name also displayed in a nice way. As follows
So here is the usual html file uploading interface
AngularJs : Brief overview of Angular Services
What are Services in AngularJs
According to AngularJs Documentation Services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
It lists two important properties of AngularJs services
It lists two important properties of AngularJs services
- Lazily instantiated – Angular only instantiates a service when an application component depends on it.
- Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.
There are some useful built in services such as
$http and $animateoffered by angular but services can be implemented according to needs in application.Adding a partial view with JQuery get() method
When we want to add partial views there are a lot of ways to implement. One easy way is using get method provided by JQuery.
Here is a simple script written in JavaScript to change partial views according to user inputs.
Here is a simple script written in JavaScript to change partial views according to user inputs.
document.getElementById("GetViewsbyPageId").onchange = function () {
var pageId = $("#GetViewsbyPageId").val();
if (pageId != 0) {
$("#LoadViewsbyPageId").show();
//sending a get request
$.get('page'+pageId+".html",function (data) {
/* data is the pure html returned from get method, load it to your page */
$('#LoadViewsbyPageId').html(data);
});
} else {
$("#LoadViewsbyPageId").hide();
}
}
Pop up window with JQuery-UI Dialog() method
Some times it is better to offer popup windows rather than changing the whole page in our web applications. But It is quite difficult to implement it with pure JavaScript, HTML and CSS.
Pop up windows can be easily implemented using JQuery-UI library. Most interesting thing is,
it is..
Pop up windows can be easily implemented using JQuery-UI library. Most interesting thing is,
it is..
- Movable
- Re-sizable
AngularJs : Adding user Inputs to a HTML table
Some times it would be great if you can update your html view real time with user inputs without sending data to servers. It would increase efficiency of your web application (It could be insecure if used in inappropriate cases).
Here is a simple project for update a html table with user inputs
You need to have a basic understanding about Angular directives, controllers, modules, and scopes to understand this example.
Here is a simple project for update a html table with user inputs
You need to have a basic understanding about Angular directives, controllers, modules, and scopes to understand this example.
<!DOCTYPE html>
<html ng-app="app" >
<head>
<title>Ajax With Angular</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
th{
background: lightgray;
}
</style>
</head>Singleton Pattern in JavaScript
In software engineering, the singleton pattern is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system.
In JavaScript this pattern restricts instantiation of an object to a single reference thus reducing its memory footprint and allowing a "delayed" initialization on an as-needed basis. This isn't too common among JavaScript projects.
Here is how a singleton pattern can be implemented with JavaScript
In JavaScript this pattern restricts instantiation of an object to a single reference thus reducing its memory footprint and allowing a "delayed" initialization on an as-needed basis. This isn't too common among JavaScript projects.
Here is how a singleton pattern can be implemented with JavaScript
- Easiest way is using object literals
var singletonObject ={ method1:function(){ }, method2:function(){ } }
Tools you must need to know when working with Json
JSON (JavaScript Object Notation) is a lightweight format that is used for data interchanging.It is based on a subset of JavaScript language.(More details)
JSON is built on two structures:
JSON is built on two structures:
- A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
- An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
JSON format is often used for serializing and transmitting structured data over a network connection
It can be seen in,
- web services responses
- when using Ajax
Mongo-DB Basic Commands
MongoDB is a new type of DBMS.In here things are little different.(More details)
It is non-relational (data not stored in a tabular format)
It is non-relational (data not stored in a tabular format)
- It has collections not tables
- It has Documents not records
- A document is a Jason object
So in mongo db collection ( A table in sql database) is a set of json objects called documents. Database is a set of collections.
Here are some basic commands used to work with mongodb- Change the database or create and change
use [database name]
Don't have to worry about the database created or not. just have to use a name if it is not created.>>dbwill return the name of the current database.
Ex:use people
People is the name of the database here
Subscribe to:
Posts (Atom)