JQuery ajax request not working in IE9

I have some ajax get request on the web page and it works perfectly fine in Firefox and Chrome. But it is not working with IE at all. After some research, I found out I need to specify the dataType and allow cross domain.

Before I have,

            $.ajax({
                type: "GET",
                url: 'http://example.com/abc',
                error: function (xhr, statusText) {
						//log error                    
                },
                success: function (data) {                    
						//process data
                }
            });
        }

After I have specify the dataType, contentType and crossDomain, it works straight away.

            $.ajax({
                dataType: "jsonp",
                contentType: "text/json; charset=utf-8",
                crossDomain: true,
                type: "GET",
                url: 'http://example.com/abc',
                error: function (xhr, statusText) {
						//log error                    
                },
                success: function (data) {                    
						//process data
                }
            });
        }

This little tip saved my day!

Mr. Data Converter, converting csv to other formatted strings

This is a pretty cool JS plugin to convert csv formatted string to other formats.

It supports XML – Properties, XML – Nodes, JSON – Properties, JSON – Column arrays, JSON – Row arrays, Html tables, and others.

I found it very helpful for xml, JSON and html formats.

for example, a csv string as below,

ProviderName, ProviderID, OrganizationName
"Microsoft","jamcracker","Telstra"

The converted JSON – properties looks like,

[{"ProviderName":"Microsoft"," ProviderID":"jamcracker"," OrganizationName":"Telstra"}]

The converted JSON – Column array looks like,

{
  "ProviderName":["Microsoft"],
  " ProviderID":["jamcracker"],
  " OrganizationName":["Telstra"]
}

The converted JSON – Row array looks like,

[
  ["Microsoft","jamcracker","Telstra"]
]

The converted XML – Properties look like,

<?xml version="1.0" encoding="UTF-8"?>
<rows>
  <row ProviderName="Microsoft"  ProviderID="jamcracker"  OrganizationName="Telstra" ></row>
</rows>

The converted XML – Nodes look like,

<?xml version="1.0" encoding="UTF-8"?>
<rows>
  <row>
    <ProviderName>Microsoft</ProviderName>
    < ProviderID>jamcracker</ ProviderID>
    < OrganizationName>Telstra</ OrganizationName>
  </row>
</rows>

The converted Html tables look like,

<table>
  <thead>
    <tr>
      <th class="ProviderName-cell">ProviderName</th>
      <th class=" ProviderID-cell"> ProviderID</th>
      <th class=" OrganizationName-cell"> OrganizationName</th>
    </tr>
  </thead>
  <tbody>
    <tr class="lastRow">
      <td class="ProviderName-cell">Microsoft</td>
      <td class=" ProviderID-cell">jamcracker</td>
      <td class=" OrganizationName-cell">Telstra</td>
    </tr>
  </tbody>
</table>

So cool, isn’t it. Save tons of time for my development.

It is from the website, http://www.shancarter.com/data_converter/index.html

And to download from Github, https://github.com/shancarter/Mr-Data-Converter

Bootstrap from Twitter, timer saver for the UI designs

Bootstrap is just CSS, but it’s built with Less (Dynamic stylesheet) http://lesscss.org/ .

It is very easy to implement, just drop the code and go. Less can be accomploshed via javascript. Once it is compiled, bootstrap only contains CSS.

What it contains:

CSS,

  • reset.less A CSS reset for our use to remove unnecessary elements
  • preboot.less Color variables for things like gradients, transparencies, and transitions to simplify vendox-prefixed CSS blocks to one line of code each
  • scaffolding.less Basic and global styles for generating a grid system, structural layout, and page templates
  • type.less Headings, body text, lists, code, and more for a versatile and durable typography system
  • patterns.less Repeatable interface elements like navigation, modals, popovers, and tooltips to take you beyond the default scaffolding styles
  • forms.less Durable styles for various input types, form layouts, and control states.
  • tables.less Styles for tabular data in a number of varied displays

And Javascript (JQuery) Plugins,

  • Modals, A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.
  • Tooltips,A new take on the jQuery Tipsy plugin, Tooltips don’t rely on images—they use CSS3 for animations and data-attributes for local title storage.
  • Collapse,Get base styles and flexible support for collapsible components like accordions and navigation.
  • Dropdowns, Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.
  • Popovers, Add small overlays of content, like those on the iPad, to any element for housing secondary information.
  • Carousel, Create a merry-go-round of any content you wish to provide an interactive slideshow of content.
  • Scrollspy, Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.
  • Aelrt Messages, The alert plugin is a tiny class for adding close functionality to alerts.
  • Typeahead, A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.
  • Togglable tabs, Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.
  • Buttons, Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
  • Transitions, For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.

Bootstrap at Nuget: http://nuget.org/packages/Twitter.Bootstrap

Less CSS: http://lesscss.org/

Media Queries: http://www.w3.org/TR/css3-mediaqueries/  (a smart example how to implement media queries http://mediaqueri.es/)

 

Icon for package Twitter.Bootstrap