This is a quick post to summarize a couple areas of confusion I often see on the web surrounding Ajax and the XMLHttpRequest call. I think for myself, the best source of information that summarizes how this all works is the Javascript Developer Center over at Yahoo. In particular, this article: http://developer.yahoo.com/javascript/howto-ajax.html
So what is all this ajax hype? Let’s break it down based on the great summary from Yahoo:
In a traditional, non-AJAX web world, if your web application needs to get new data to update itself — even if that’s just a tiny bit of data — you write your page so that when new data is required a user action (a button click, for example) triggers the browser to make an HTTP connection (a form submission) back to the web server. The problem is that with each HTTP connection, a new page is reloaded. All the elements of the page are broken down and recreated each time while the user waits for the network and waits for the page to redraw. Its incredibly inefficient, slow, and not much fun for the user.
Great explanation.
Now, we use a lot of Ajax in our applications here at Black Ninja because of it’s efficiency, ease of use and simplicity. What I’d like to point out are the options and gotchas for parsing the XMLHttpRequest object (directly from the Yahoo article credited above, but summarized in bullet form. Anything in green are my comments):
- After the XMLHttpRequest call is complete, the response data is contained either in the responseText property, the responseXML property, or both. So if for example, you’re alerting on your response object, and the message box returns “[object XMLHttpRequest]“, the response data is either in response.responseText or response.responseXML.
- If the data you get back from the web service is in XML format, both responseXML and responseText are filled.
- If the data is in any other format, responseText is filled. However, whether responseXML gets filled is dependent on the browser and the Content-type the server returns (text/xml or application/xml). In practice, responseText seems to be more reliably filled across browsers and web services.
- If the responseXML property is filled by the XMLHttpRequest object, that property contains a Document object whose elements you can access in JavaScript using standard DOM methods (getElementsByTagName, etc).
- If your response format was XML but all you have is responseText, you will need to use an XML parser to get the information you need out of the XML text. Both Mozilla and Internet Explorer have XML parsers built in; see this tutorial from www.faqts.com for help in getting started.
- If your response was in JSON format parsing is perhaps easiest of all. JSON is short for JavaScript Object Notation — JSON is JavaScript. To interpret a JSON response just eval the response, and you’ll get a JavaScript object back:
var myObj = eval ( xmlhttp.responseText );
Once you have the data in hand you can update the page with standard JavaScript and DHTML methods. No need to reload or redraw the entire page — just modify the part of the page that needs the new data.
Super great summary, thank you Yahoo Developer Center!
Just a quick post for anyone else having this issue. I am working with the latest version of jqGrid, and I am dealing with cell data that is longer than the width of the cell making it difficult to see. I wanted to have this data wrap and the height of the cell adjust to fit the wrapped content.
I found a ton of useful info on the jqGrid forums but it didn’t quite get me there.
The forum article in the above link suggests that you add the follwing CSS to your page:
1
2
3
| .ui-jqgrid tr.jqgrow td {
white-space: normal !important;
} |
The above worked great for FF, but in IE, it would wrap the content, but the cell height would not auto adjust and therefore you really couldn’t see the full content. So I made a couple more changes as per the code snippet below and this seemed to work for me.
So the height:auto forces the cell height to auto adjust based on the size of the wrapped content. I haven’t noticed any side effects of changing this. If anyone has I’d love to hear about it. The vertical-align:top ensures that the text positions at the top so that the cells with less content don’t disappear in the centre due to the larger cell blocks. And finally, I added a bit of padding so that my cells don’t look oddly aligned due to the vertical-align bit, but that’s optional. It’ll work without it.
1
2
3
4
5
6
| .ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
} |
If anyone else has run into this issue or has had to make a similar change, add your contribution to the comments below.
Structure:
1
2
3
4
| <div id="thisismydiv1"></div>
<div id="thisismydiv2"></div>
<div id="thisismydiv3"></div>
<div id="thisismydiv4"></div> |
To return an array of all divs that start with ‘thisismydiv’, you would use the following:
1
| var divList = $("div[id^='thisismydiv']"); |
The above translates to, find me all divs whose id starts with ‘thisismydiv’. You could now do something cool like add a class to all those divs:
1
| $("div[id^='thisismydiv']").addClass('myClass'); |
Ok, so this is really a follow up to my previous post where I outlined how to build jQuery Tabs that Open and Close. I did end that post with a small TODO for myself: integrate the close capability into the tab itself so the user didn’t have to click a button to close that tab.
Now after doing a bit of digging, I learned that this is actually functionality that is in the works for future releases of jQuery UI. Ticket 3924 is currently open and in development, which is a good sign. Further investigation landed me on this page: http://jsbin.com/uqage which is a fantastic example of how the Closable Tabs concept could work.
My final solution involved me tweaking the above to work as follows:
Setting Up the HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div id="mytabs">
<ul>
<li><a href="#tabs-home">My Projects Home</a></li>
</ul>
<div id="tabs-home">
<h3>Welcome to My Projects Home</h3>
<p><a href="#" onclick="addTab('myActiveProjects', 'My Active Projects', 'RadGrid1')">My Active Projects</a></p>
<p><a href="#" onclick="addTab('mySalesActivities', 'My Sales Activities', 'RadGrid2')">My Sales Activities</a></p>
</div>
</div>
<div id="tabs-myActiveProjects" style="display:none;">
<h3>My Active Projects</h3>
</div>
<div id="tabs-mySalesActivities" style="display:none;">
<h3>My Sales Activities</h3>
</div> |
Wiring Up the Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| $(document).ready(init);
function init() {
// tabs init with a custom tab template and an "add" callback filling in the content
var $tabs = $("#mytabs").tabs({
tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-test"><img src="images/cross.png" /></span></li>'
});
// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$('#mytabs span.ui-test').live('click', function() {
var index = $('li',$tabs).index($(this).parent());
$('#mytabs span.ui-test').parent().remove();
$("#mytabs").tabs('select', 0);
});
}
function addTab(tabID, tabName, grid)
{
// double check to see if tab is already open
if($("a[href^=#tabs-"+ tabID +"]").length > 0)
{
$("a[href^=#tabs-"+ tabID +"]").parent().show();
} else {
currentTabID = tabID;
// this will add a tab via the standard method
$("#mytabs").tabs("add","#tabs-" + tabID,tabName);
$("#tabs-" + tabID).css("display","block");
}
$("#mytabs").tabs('select', tabID);
} |
Finalizing the Styles
1
2
3
4
5
6
7
| <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="styles/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<style type="text/css">
#mytabs { margin-top: 1em; }
#mytabs li .ui-test { float: left; margin: 0.5em 0.4em 0 0; cursor: pointer; }
</style> |
Please, please leave a comment if you have any difficulty with this and I’ll do my best to help!
Hi everyone, just wanted to post a quick note to let you all know that my blog is undergoing a few changes, one of those being a new hosting company, Rackspace. There are a few things that have not quite been cut over properly, so I’ll be dealing with those in the next couple of days. If anyone notices anything, please let me know!
The Vancouver IT community is hosting a DevTeach kick off party on Monday, June 8th. This is the official social event for DevTeach Vancouver so come socialize with us! The event is not just for the attendees of DevTeach Vancouver it’s a free event for everyone. It’s a unique chance for the attendees, speakers and locals to meet and talk over some free beer and pool. I’ll be there! The event will be held at the Soho location and you need to RSVP to attend.
To find out more visit this url: http://party.cuga.ca/Home.aspx
While I don’t spend the majority of my time coding with Ruby in Rails, I really do enjoy it and was excited at the opportunity to attend my very first RailsConf this year. I’ve heard nothing but great things about this conference and am hoping to up my ruby and rails skills a little bit.
Anyone else planning to go?
If anyone is interested, Black Ninja posted a relevant article on what we consider to be a good developer. The article in reference is actually written by Daniel over at inter-sections.net and is the best thing I’ve seen to date that describes how we feel about web development and the community we’re a part of.
I’ll caution everyone that’s it meant to be a guide, and not something we need to live by to the letter. Feedback is most welcome!
Greetings everyone! I am very excited to annouce that I have been selected to speak at the DevTeach conference that will be held here in Vancouver from June 8-12. I spend a great deal of time blogging about working with the Telerik web controls in my SharePoint development, so I figured this would be a good opportunity to share some of the things I’ve learned and to demonstrate how easy it is to integrate these into your projects.
This is a great conference that promises to be the biggest developer, DBA and ITPro conference in Canada. It’s jam-packed with advanced sessions (level 300 and 400) all on the latest versions of Microsoft products and technologies. I encourage you all to at least check it out and see if some of the other sessions or topics might appeal to you.
Hope to see you there!
This is a topic that comes up often when I’m doing web site design and I figured I’d throw it up here for my own reference. The challenge is to design a footer that will float to the bottom of the page regardless of the size of the content above it. Ryan’s excellent article on sticky footer’s is where I pulled 99% of this from. I made some minor tweaks to the CSS to suit my own needs but other than that, it’s not much different. Check out Ryan’s awesome article!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <p>* {
margin: 0;
}
</p>
html, body
{
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -2em;
padding-left:2px;
padding-right:2px;
}
.footer {
height: 2em;
}
.footer p
{
font-family:Verdana;
font-size:9pt;
color:#696969;
font-weight:bold;
padding-top:10px;
padding-left:2px;
text-align:center;
}
.push
{
height: 2em;
} |
