react-social-login
The easiest way to integrate Social Login in your React Apps ...Checkout NPM
Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts
Sunday, April 21, 2013
Monday, April 1, 2013
JQuery unrecognized expression in parsing MVC Partial
This is a quick tip sharing. Recently, I was stuck in a problem where I was making an AJAX call to get MVC partial as HTML in response.
Within this response, I made an attempt to find an element using $.find as following:
Within this response, I made an attempt to find an element using $.find as following:
$.ajax({
url: theURL,
type: "POST",
success: function (data) {
var controls = $(data).find('#someTextBox'); }
});
.find threw an exception:Uncaught Error: Syntax error, unrecognized expression: <HTML response>
Issue was with enter keys and spaces in the response. Trimming data before calling find, resolved the issue.
var controls = $(data.trim()).find('#someTextBox');
Friday, October 26, 2012
How to write JavaScript in MVC style
Intent
Pre-Requisite: Assuming you are aware of different styles of writing JS functions. ==============================================================================
This tutorial explains a way to implement MVC (Model View Controller) pattern in client script using pure JavaScript. Idea is to highlight basic fundamentals of implementing MVC in client code. If you grab these basics, you can easily create advance implementations with lesser code using various libraries like JQuery and Knockout etc.
Quick brush up on MVC
Instead of getting theoretical, I'll put it this way:
View: These are the HTML elements in your UI - TextBoxes, HiddenBoxes, Images, Tables etc.
For example, in Google home page, view elements includes Search TextBox, Search Button, Search result div container, Suggestions display div container etc.
Model: Model represents data which drives functionality of screen. It may or may not have 1:1 mapping with your view elements. For example, in Google search page, model may contain an array of autoSuggest words or an array of search results in JSON or the searched keyword.
Controllers: Controller is a functional unit containing a bunch of Action Methods where each Action Method handles a functional requirement. DO NOT correlate action methods with control events like OnClick, OnChange, OnKeyPress. Rather consider them as what features are being provided by page to end user. Continuing with Google example, expected actions include search, get suggestions etc. How the result of this actions will impact UI is something for view to decide. For example a controller may call server and get results but it won't directly update UI elements. Yes, it can call a view function to do so.
To give it a more practical touch, Just for Analogy consider Google search page and think if it was implemented using MVC. With aforesaid definitions, very likely Model, View and Controller would've been like following:
Rules of the Game
Pre-Requisite: Assuming you are aware of different styles of writing JS functions. ==============================================================================
This tutorial explains a way to implement MVC (Model View Controller) pattern in client script using pure JavaScript. Idea is to highlight basic fundamentals of implementing MVC in client code. If you grab these basics, you can easily create advance implementations with lesser code using various libraries like JQuery and Knockout etc.
Quick brush up on MVC
Instead of getting theoretical, I'll put it this way:
View: These are the HTML elements in your UI - TextBoxes, HiddenBoxes, Images, Tables etc.
For example, in Google home page, view elements includes Search TextBox, Search Button, Search result div container, Suggestions display div container etc.
Model: Model represents data which drives functionality of screen. It may or may not have 1:1 mapping with your view elements. For example, in Google search page, model may contain an array of autoSuggest words or an array of search results in JSON or the searched keyword.
Controllers: Controller is a functional unit containing a bunch of Action Methods where each Action Method handles a functional requirement. DO NOT correlate action methods with control events like OnClick, OnChange, OnKeyPress. Rather consider them as what features are being provided by page to end user. Continuing with Google example, expected actions include search, get suggestions etc. How the result of this actions will impact UI is something for view to decide. For example a controller may call server and get results but it won't directly update UI elements. Yes, it can call a view function to do so.
To give it a more practical touch, Just for Analogy consider Google search page and think if it was implemented using MVC. With aforesaid definitions, very likely Model, View and Controller would've been like following:
Rules of the Game
Wednesday, October 24, 2012
How to write JavaScript functions in different styles
INTENT
=================================================================
This article is to explore different ways to write JavaScript functions. All example below are in context of plain JavaScript and do not depend on any library like JQuery (which might come as a surprise to few :)
Level: Beginners
Original Basic implementation.. Declare a method and call at some point later
function SayHello(msg) {
alert(msg);
}
//call explicitly
SayHello('my name is'); //alerts "my name is"
Different style where function is assigned to a variable and then called later
var SayHello = function(name) {
alert(name);
};
SayHello('Deepak');
NOTE: Check the ; at end of function (i.e. after }). This was not required in previous example because we declared a method. However, now we are assigning a function to a variable just like we say var i = 10;
If you miss this ';', function would still execute properly but many IDE's may complain that code is not properly structured.
Simple function. Self executed automatically...
var SayHello = function(name) {
alert(name);
}('Aggarwal');
Method is called once automatically and the result is set to SayHello.
IMPORTANT: SayHello is no longer a function. Any attempt to call it later as SayHello() would result in an exception: Uncaught TypeError: Property 'SayHello' of object [object Window] is not a function
This is a good approach when you wish to execute any method once. If you do not want any result, you can even do so without a name (ANONYMOUS FUNCTIONS) as shown below:
Subscribe to:
Posts
(
Atom
)