Thursday, June 11, 2015

How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'

In this post we describe Step by step how to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'.  
This HTTP Error is sent back in the response by a web service following to an HTTP Ajax Request. This is a CORS (Cross Origin Resource Sharing) error, because it's originated by the different domains of the web Referer (the Requesting URL) and the Web Service (the Requested URL).
Frequently this error looks like this:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'



Step by step how to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'



The internet web tool that we're using in this tutorial is the Chrome's Developer Tool (F12).
Normally, in the case of an status 200 (OK) response, we would have the following HTTP Headers at the "Network" tab, meaning that the HTTP request has been accepted:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'    1


As you notice , both URLs ( requested- requesting URLs) belong to the same Domain ("http://localhost:XXXX/"):
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'   2


No problem here.

However, in our case, we probably got some Error like the following:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'     3



If you open the Headers tab, and take a look at the URLs of both Referer and web service, you'll notice the following:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'    4




You can note that they are different domains: we have a CORS (Cross Origin Resources Sharing) problem here. The browser has sent an HTTP OPTIONS request to the service, asking it whether it will accept an HTTP DELETE request, by using the Access-Control-Request-Method header.
Now here at the Response Headers, we see that the Access-Control-Request-Method header do not include the HTTP DELETE method, which is therefore not allowed:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'   5




Usually, CORS problems are issued because the Access-Control-Request-Origin do not accept Ajax requests from Domains other than its own domain.
Here the CORS problem is about the HTTP Method being used.
To fix it, you must be allowed access to the Web Service's  web.config file , where the "httpProtocols" are located:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'     6




Once there, first check that the allowed origins are all domains ( "*" ).
Next, add to the Access-Control-Request-Method the one you need: HTTP DELETE in our case:

Step by step how to fix the Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'     7

Save the web.config file, and send the Request again:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'    8



This time, the HTTP OPTIONS returns an status 200 (OK), informing to your browser  that the "DELETE" request is indeed allowed:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'      9




Now is up to the browser to send the HTTP DELETE request, and this time, the response get status 200 (OK) :
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'     11





We hope that this post has helped you ..

Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן

Wednesday, June 10, 2015

jQueryMobile Panels For Android and BlackBerry

Here we see Step by step How to create jQueryMobile Panels For Android and BlackBerry
In this post we create in 10 minutes a jQuery Mobile App using sliding Panels,  for use on all Mobiles  : Nexus , BlackBerry, Nokia, iPad, iPhone,  Acer ,  ...
The additional content displayed in the Panel will be shown in Reveal mode, which together with the Push and the Overlay modes, are the ways to the Panel to be displayed.
This App will look like this:

jQueryMobile Panels For Android and BlackBerry

jQueryMobile Panels For Android and BlackBerry   1



How to create jQueryMobile Panels For Android and BlackBerry



We'll need the  jQuery and jQueryMobile Frameworks . Therefore , go to  http://jquerymobile.com/ and to the  jQuery web site , and retrieve the latest versions of jQuery and jQueryMobile via Content Delivery Network (CDN)  . Because we  will also use a Mobile Emulator, please learn this 5 minutes tutorial about Ripple Emulator setup.

After you got the URLs of the frameworks, add them to the Head element of the HTML5 file, as follows :
jQueryMobile Panels For Android and BlackBerry  2



This is the most important part of this tutorial. Here you add your Panel to the App. The Panel must be add before or after the Header/Footer parts of the Page.
In the Panel, you define a data-role="panel", and a data-display="reveal" , which you can change to "Overlay" or to "Push" options.
Then you add a data-swipe-close="true", in order to allow closing the Panel by swiping the page. Elsewhere, the Panel will be closed by clicking the "Close" Button, by pressing the "Esc" keyboard key, or by clicking anywhere outside the Panel:
jQueryMobile Panels For Android and BlackBerry   3



Then, add a data-role=header including a NavBar , by using the data-role="page" and also the data-role="header" , together with a "fixed" attribute to stack it as the user scrolls the screen :
jQueryMobile Panels For Android and BlackBerry    4


Now add a "main" div including text and a button which will open the Panel, and will be coded this way:
jQueryMobile Panels For Android and BlackBerry   5



Finally, we code the markup for the Footer of the page , including a Navbar,  as follows:

jQueryMobile Panels For Android and BlackBerry   6





We customized this Mobile App by adding the following styles inside a CSS3 file in the Styles folder:

jQueryMobile Panels For Android and BlackBerry   7




And this is how the jQuery Mobile Panel looks like:


jQueryMobile Panels For Android

jQueryMobile Panels

Panels For Android and BlackBerry



Hoping this post was helpful for you...


      Carmel Schvartzman


כתב: כרמל שוורצמן


Tuesday, June 9, 2015

jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

Here we see Step by step How to create jQueryMobile Toggle and Reflow Tables For Android and BlackBerry
In this post we build in 20 minutes a jQuery Mobile App , with a toggle Table , where you can hide or display its columns,  for use on all kind of Mobile devices : iPad, iPhone, Nexus , BlackBerry, Nokia,  Acer ,
The data displayed on this table will be loaded in Json format via Ajax.
This Mobile App will look like this:
jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

jQueryMobile Toggle and Reflow Tables For Android and BlackBerry    1


How to create jQueryMobile Toggle and Reflow Tables For Android and BlackBerry



For this post of jQuery Mobile , we'll need the  jQuery and jQueryMobile Frameworks, so  enter http://jquerymobile.com/ and jQuery web site , and get the latest versions of the files via CDN  . We  will also use a Mobile Emulator, so please refer to this short tutorial on Ripple Emulator setup.
Also, this basic   "First jQueryMobile App" Tutorial explains the installation of both the frameworks and the emulator in detail.
After you got the references, add them to the Head of the HTML5 file:
jQueryMobile Toggle and Reflow Tables For Android and BlackBerry   2



First, we'll add a Header with a NavBar , using the data-role="page" and the data-role="header" with a "fixed" attribute to fix it as the user scrolls the screen :
jQueryMobile Toggle and Reflow Tables For Android and BlackBerry    3


Now we create a "main" div with our table: we use the data-role=table and the data-mode=columntoggle, which allows the user to display/hide the columns. If you don't use "columntoggle", the table will be displayed as "Reflow" mode, meaning that ALL columns are displayed, and in small screens, all data is grouped in chunks corresponding to each row.
Then you define a data-priority directive from 1 (most important field) to 6 (less important column).
If you do not define a data-priority for a column, it will be always displayed:

jQueryMobile Toggle and Reflow Tables For Android and BlackBerry    4



We also define a button for calling the function that loads the table data.

Finally, we write the markup for a Footer with a Navbar as follows:
jQueryMobile Toggle and Reflow Tables For Android and BlackBerry   5



The script which loads the data includes a call to the jQuery  $.ajax method, to the URL where a text file contains JSON data for the table.
The HTTP request uses a GET method and, this is really important, we tell the server that we are expecting data in JSON format, meaning that the request's "Accept" header will include "application / json".
We add two callback functions : error and success.
In case of success, we perform a $.each() loop over the JSON data, which is built on key/value pairs, where the Key is the "id" field, and the Value is the Customer object.
For each customer, we append to the Table a Row with a Cell (<td>) per column:
jQueryMobile Toggle and Reflow Tables For Android and BlackBerry   6



Very important too, we REFRESH the Table after adding the Row, so that the Toggle functionality will include the appended rows.


We customized this Mobile using the following style in a CSS3 file:
jQueryMobile Toggle and Reflow Tables For Android and BlackBerry   7





And this is how the jQuery Mobile Toggle Table looks like:

Toggle and Reflow Tables For Android and BlackBerry

Reflow Tables For Android and BlackBerry

Android and BlackBerry

jQueryMobile Toggle and Reflow Tables For Android

jQueryMobile Toggle and Reflow Tables

jQueryMobile Toggle and Reflow







Hoping this post was helpful for you...
Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן



Thursday, June 4, 2015

jQueryMobile using Ajax to load Json data to a Table

Here we review Step by step jQueryMobile using  Ajax  to load Json data to a Table For Android and BlackBerry
In this article we create in 20 minutes a jQuery Mobile App to load Json data to a toggle Table , where you can hide or display its columns,  via Ajax calls . This App is for use on all kind of Mobile devices : Nexus , iPad, iPhone, BlackBerry, Nokia,  Acer ,  ...
The data will be loaded in Json format via Ajax, in order to be displayed on this table .
This jQuery Mobile App looks like this:
jQueryMobile using  Ajax  to load Json data to a Table

jQueryMobile using  Ajax  to load Json data to a Table   1




jQueryMobile using  Ajax  to load Json data to a Table For Android and BlackBerry



For this article on jQuery Mobile , we'll be using the  jQuery and jQueryMobile Frameworks, so  browse to http://jquerymobile.com/ and jQuery , and obtain the latest versions of the frameworks via CDN  . If you want to use a Mobile Emulator, please refer to the following short tutorial on the Ripple Emulator.

After you got the files , add them to the Head of the HTML5 file:
jQueryMobile using  Ajax  to load Json data to a Table    2



First, add a Header with a NavBar , by making use of the data-role="page" and the data-role="header" , adding also a "fixed" attribute to fix the header in its place when the user scrolls the screen :
jQueryMobile using  Ajax  to load Json data to a Table    3


Create a "main" div element containing our table.  Use the data-role=table and the data-mode=columntoggle directives, which allow to display/hide the columns. However , if you don't write "columntoggle", the table will be shown in "Reflow" mode, then ALL columns will be displayed, and all the data will be grouped in chunks per row.
Inside the table,  define to each field a data-priority directive from 1 (most priority field) to 6 (less important column).
Notice that if you do not set a data-priority for a field, it will always be displayed:

jQueryMobile using  Ajax  to load Json data to a Table   4






We also write a button to call the function that brings the table data.

Finally, we code the markup for making a Footer with a Navbar :
jQueryMobile using  Ajax  to load Json data to a Table    5



The javascript which brings the data includes using the jQuery  $.ajax function, sending requests to the URL where is stored a file containing JSON data .
This HTTP GET request  tells the server that the data is expected in JSON format, so that the request's "Accept" header will include "application / json".

In case of successful performance, we do an $.each() loop on the received JSON data in the response, which includes key/value pairs, where the Key is the "id"  , and the Value is the Customer  JSON object.
Then, for each customer, we add to the tbody of the Table a Row with a Cell per column:

jQueryMobile using  Ajax  to load Json data to a Table    6


Is imperative that you REFRESH the Table after adding the Rows, therefore the table's Toggle functionality will work on the new rows.

We added also some style to this Mobile using the following  CSS3 file:
jQueryMobile using  Ajax  to load Json data to a Table  7


All the code can be downloaded from the following GitHub repository:


This is how the jQuery Mobile Toggle Table looks :
jQueryMobile using  Ajax  to load Json data

Json
load Json

to load Json

  Ajax  to load Json

using  Ajax  to load Json



We hope that this article was helpful for you...
Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן