Archive

Archive for the ‘AngularJs’ Category

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

November 7, 2017 1 comment

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.

2016-06-21_1554

AngularJS Form Validation – Disable Submit / Confirm Password Custom Directive

January 21, 2016 Leave a comment

Bootstrap collapse: Change display of icons and text

December 17, 2015 Leave a comment

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

December 16, 2015 Leave a comment

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

December 11, 2015 Leave a comment

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 !

AngularJS: Bootstrap Datepicker not working inside bootstrap modal Issue

November 17, 2015 Leave a comment

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:

datepickerInModal

 

Hope it helps