AngularJS With Asp.net Web API: $http post returning XMLHttpRequest cannot load: Response for preflight has invalid HTTP status code 405

When trying to POST json to Asp.net web api server using $http its returning the following error

Response for preflight has invalid HTTP status code 405

OR

MVC web api: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Following is the solution for above problem

Cors

I installed Cors in my project using nu-get command line

Install-Package Microsoft.AspNet.WebApi.Cors

and added the following code in WebApiConfig.cs file from App_Start folder.

var enableCorsAttribute = new EnableCorsAttribute("*",
                          "Origin, Content-Type, Accept",
                          "GET, PUT, POST, DELETE, OPTIONS");
config.EnableCors(enableCorsAttribute);

and removed the following from the web config

<remove name="X-Powered-By" />
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Accept, Content-Type, Origin" />
<add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, OPTIONS" />

Create duplicate row in AngularJS

Hello Friends here I am explaining an example of how to add duplicate row in AngularJS

Please check below link for complete example

https://jsfiddle.net/rahulgbhatia/06nda8jo/

Hope it helps !

 

 

Disable click outside of bootstrap model area to close modal

Problem :You can close the modal by clicking on the background. Is there anyway to disable this feature? On specific modals only?

Solution :

There is option called backdrop. Passing this option with value 'static' will prevent closing the modal.
Also can pass {keyboard: false} to prevent closing the modal by pressing Esc.

[1] If you opening the modal by js use:
$('#myModal').modal({backdrop: 'static', keyboard: false})

[2] If you are using data attributes, use:
<button data-target="#myModal" data-toggle="modal" 
data-backdrop="static" 
data-keyboard="false">
    Launch demo modal

</button>

 

AngularJS: Get selected Text and Value of HTML Select DropDownList using ng-change

The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.

The HTML DIV consists of an HTML Select DropDownList which will be populated from JSON array using ng-options directive.

The HTML Select DropDownList has been assigned ng-change directive. When an option is selected in HTML Select DropDownList then the GetValue function of the Controller gets called.
Inside the function, first the selected Value is fetched from the ng-model attribute and the selected Text is fetched from the JSON array using jQuery grep function.
Finally the selected Text and Value is displayed using JavaScript alert message box.

CodeProject

AngularJS Form Validation – Disable Submit / Confirm Password Custom Directive

http://jsfiddle.net/rahuladmin/9ew85Lp3/

Hope this help !

Bootstrap collapse: Change display of icons and text

To Change display of icons and text for bootstrap Collapse use following

http://jsfiddle.net/rahuladmin/s52h0sbj/

Hope this help !

Vertically centering Bootstrap modal window

To open the bootstrap modal popup in the center of screen use following code

http://jsfiddle.net/rahuladmin/07y8y5fg/

 

Hope this help !

Disable click outside of bootstrap model area to close modal

Hello Friends following is the solution to disable outside click of bootstrap modal area

If you opening the modal by js use following:

$('#myModal').modal({backdrop: 'static', keyboard: false}) 

Or 

You can define your modal behavior, defining data-keyboard and data-backdrop.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

Hope this help !

How to launch Bootstrap modal on page load

To open bootstrap modal popup on page load use following

You can use the Bootstrap .modal('show') method for launching the modal window automatically when page load without clicking anything. A common example of this technique is loading the modal when user landed on the home page

Use the Bootstrap .modal('show') method

Example:

http://jsfiddle.net/rahuladmin/rL4jufcL/

 

Hope this help !

AngularJS: Bootstrap Datepicker not working inside bootstrap modal Issue

Issue :

The datepicker is working fine in all pages but when we add it inside a bootstrap modal (link below) it stop working.

Bootstrap Modal:

http://getbootstrap.com/2.3.2/javascript.html#modals

Same code is working in normal html files like below

http://jsfiddle.net/rahuladmin/6f4a6097/2/

 

Solution:

You need to call datepicker() in Modal itself like below:

 

Hope it helps