Hi Guys, Just a quick tip here. This gets me every time so I thought I should better write about it so that I remember it next time I use it :) There are couple of ways to check if a checkbox is checked or not. A quick on is Read more about is() function here http://api.jquery.com/is/ Another method is to check the checked attribute Lets see how that is done Now the main difference between above two method is that is() either returns true or false whereas attr() in this case will return string e.g. "checked" when checkbox is checked Read more about attr() here http://api.jquery.com/attr/ I always use is() for these types of checks because it is more natural and is read very well e.g. psedo code "if checkbox is checked" But it all depends on you what fits better. Performance wise I don't think there will be much difference though. I hope this helps Cheers Advertisement … [Read more...]
jQuery string split explode method
Hi Guys, So my colleague asked me how do we split a string into multiple parts like the way we do with explode method in PHP. I doubt that there was something that exists with jQuery but I was sure that I used split() method available in Javascript. So with jQuery why reinvent the wheel when you can use something that is provided to you by native browser supported Javascript. Lets see how we can split the string below and store splitted chunks in array In Javascript we do something like this Advertisement Now if I try to look into my javascript debug console, I'll see my string perfectly splitted into an array as shown below I can access individual element as shown below To take it one step further lets iterate on the above return array with jQuery and traditional javascript :) I hope this post will help you in some way Cheers, Advertisement … [Read more...]
jquery htmlEntities Encode and decode HTML characters
Hi Guys, Just a quick tip here. So with my current project I have this requirement to Encode and decode HTML chars using javascript. Well luckily I am using jQuery which makes it kinda easy So if you have a string shown below Now if you do this in jQuery Advertisement You will get this as output And for an opposite effect you can do this You will get this as output I hope this tip helps you Cheers Advertisement … [Read more...]
Servicestack Markdown NoRender Master Layout Page, Render partial content
Hi Guys, I am dealing with the Client End for a project that I am working on and the Client is written purely in HTML5 and Javascript with some CSS3 magic. Now we are using ServiceStack and Markdown templating engine as our Web service and Content providers. So you know that when calling a specific service the output can be any of the following JSON HTML XML CSV JSV The above are really handy when you want to load your javascript Grid, or display content as HTML. Now if we think about the bigger picture we have couple of things when the output is returned as HTML. First consider this from Markdown Docs Once the appropriate view is executed it's output is stored in the **'Body'** variable and is merged with its static website template. The rules for finding the appropriate master website template is simple: It's the first **default.shtml** page it can find, looking first in its current working directory then recursively up the directory hierarchy until it finds one. The view is merged with the static website template by replacing all **<--@VarName-->** with variables generated by the page (i.e. in ScopeArgs). i.e. the executed output of the View is stored in the **Body** variable and is embedded in the static website template by replacing all **<--@Body-->** found. Advertisement That's good that the View is processed and merged to the Master website template what what about if we don't want that default action to happen? Ok so this is what you can you. Its called Bare HTML return So for instance if you are accessing a page like localhost/yourwebservice/param (which kicks the default merge with Master them) then you can change the URL to this localhost/yourwebservice/param?format=html.bare This will override the Fusion of MD template to the Master template. Now there are some scenarios where you will want to select a custom Master … [Read more...]
ExtJS 4 get Form Field Values
Hi Guys, This one is really trivial but I thought I should share it with you. SO say you have a ExtJS Form that is part of a window (just to make this post long enough :)) as shown below, Now you've got your form displayed with two buttons "Cancel" and "Save" There are times when you would like to check form field value before it is sent to the server for processing. So now if I want to get Value for Name field this is how I do it. Paste the code below just under "//CHECK NEXT CODE LISTING AND REPLACE THIS LINE WITH THAT" line in above code snippet You can also get values for all fields in a Javascript Object. So let me show you how we can display my name in another way If you don't care and are happy to receive returned values as strings then you can simple use this I hope this tip will help you Cheers, … [Read more...]
ExtJS 4 access JSON subobject and display them in Grid
Hi Guys, There are times when you wrap you response in a JSON object and feed it back to the requester. I had this situation where I was display a ExtJS Grid and the response I was getting was something like this Now with ExtJS grid you can feed the above JSON response directly to your Grid by creating a Model and then a Store and thus feeding that store to the Grid. Let me show you with very basic Model for the above JSON And then create a store (Please note that this store is just an illustration) Uptill now everything is as clear as mud. but how do we display Value property Under Suspended in grid column. Well this is how you do it. Create a renderer as shown below Advertisement Now in the Column section of my grid I will use the above renderer as below. (not a full grid code) This was your column will not show "[object Object]" but instead a value for your sub object property. I Hope I was as clear as mud. But you should get the Idea. Cheers … [Read more...]
jQueryUI Tabs remove flicker
Hi Guys, Ok so the new project started today and I will be posting heaps of things that I will learn or already know, that I think could be helpful to someone. I think everytime I do jQuery UI tabs this thing gets me. This thing is called "The Flicker" :) So how to get rid of this?? Really simple. Don't show you Tabs unless your tabs has been processed completely. Advertisement Ok with this what I meant is, Well let me try to explain this with an example. Consider the below markup (the style in first line to set display to none is important) that you usually use to create your tabs in jQuery And below is the jQuery that you use to create tabs We will change the above jQuery to the one below Easy done! Remember that you will need that style="display:none" set in the root element of your tabs markup. I hope this helps Cheers Advertisement … [Read more...]
ExtJS 4 Tabs in Window Example
Hi Guys, I am going to show you a really basic example of Ext JS 4 Window that contains tabs. I had no clue how to do it so Sencha's documentation comes in handy. Now I am an intermediate level user of ExtJS and of course the code I am going to show you can be improved (perhaps) ExtJS 4 is a great Javascript Framework. The more you use it, more you fall in love with it. Ok so enough chit chat. The final result of the code I am gonna show looks like this So as you see we have a link called Open Window and When you click on it you will get a window with tabs. Ok so here is the code to produce above. Don't forget to change paths to Ext Library because the ones that I used are relevant paths on my server. You will have proper control over each Tab. What I mean to say is that you can make one tab fetch data off server using Ajax, other closable, other disabled etc. etc. For those granular options its better you read this http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Tab I hope I provided you with the starting point. Its really that simple. If you have any question please let me know. I'll try to help or someone else will if they know the answer. Cheers, … [Read more...]
Recent Comments