Days in code: jQuery

Showing posts with label jQuery. Show all posts

Wednesday, 4 September 2013

Rendering from variable html using jquery template

I started to use template for rendering my code from json responses.
Everything work great if you do not have html in the variables.

Supposed documentation should be here: http://api.jquery.com/category/plugins/templates

I could not find it.

Modifying example from github:

I have found example how to achieve this here.

I have not been able to make this work.
Finally I have found out that the correct syntax is:

${Name} =>{{html Name}}
Note that there is no longer: $.

Source for this example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-2.0.3.js"></script>
    <script src="Scripts/jQuery.tmpl.js"></script>
    <style>
        table { border-collapse:collapse; margin:8px; background-color:#f8f8f8; }
        table td { border:1px solid blue; padding:3px; }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {

            var movies = [
                { Name: "The Red Violin<strong>test</strong>", ReleaseYear: "1998", Director: "François Girard" },
                { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
                { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
            ];

            var markup = "<tr><td colspan='2'>{{html Name}}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>";

            /* Compile markup string as a named template */
            $.template("movieTemplate", markup);

            /* Render the named template */
            $("#showBtn").click(function () {
                $("#movieList").empty();
                $.tmpl("movieTemplate", movies).appendTo("#movieList");
            });
        });


    </script>
</head>
    <body>

        <button id="showBtn">Show movies</button><br/>
        <table><tbody id="movieList"></tbody></table>

    </body>
</html>

Thursday, 20 December 2012

jQuery and Javascript

Here I am adding some memory nudges about javascript and jQuery.

Check for variable is defined

in JavaScript null is an object. There's another value for things that don't exist, undefined. The DOM returns null for almost all cases where it fails to find some structure in the document, but in JavaScript itself undefined is the value used.

Second, no, they are not directly equivalent. If you really want to check for null, do:

if (null == yourvar) // with casting
if (null === yourvar) // without casting

If you want to check if a variable exist

if (typeof yourvar != 'undefined') // Any scope
if (window['varname'] != undefined) // Global scope
if (window['varname'] != void 0) // Old browsers

If you know the variable exists but don't know if there's any value stored in it:

if (undefined != yourvar)
if (void 0 != yourvar) // for older browsers

If you want to know if a member exists independent of whether it has been assigned a value or not:

if ('membername' in object) // With inheritance
if (object.hasOwnProperty('membername')) // Without inheritance

If you want to to know whether a variable autocasts to true:

if(variablename)

I probably forgot some method as well...

Taken from: http://stackoverflow.com/questions/858181/how-to-check-a-not-defined-variable-in-javascript

Wednesday, 12 December 2012

Datepicker date format helper

I have been working on dates and multi language implementation.

I have wrote small class that helps with dates and jQuery.

using System.Globalization;
 
namespace HtmlHelpers
{
    public class DateTimeTimeHelper
    {
        /// <summary>
        /// Override jquery date time format with format from current thread.
        /// </summary>
        /// <returns>Javascript format to override jquery date picker settings.</returns>
        public static string OverrideFormat()
        {
            string str = "<script type=\"text/javascript\">";
            str += string.Format("$.datepicker.setDefaults({ dateFormat: '{0}' })", DateTimeTimeHelper.GetDateFormatPatternForCulture());
            str += "</script>";
            str += "</head>";
            return str;
        }
 
        /// <summary>
        /// Get date format pattern for UI culture.
        /// </summary>
        /// <returns>String pattern.</returns>
        public static string GetDateFormatPatternForCulture()
        {
            var dateFormat = GetJavascriptShortDatePattern(System.Threading.Thread.CurrentThread.CurrentUICulture.DateTimeFormat);
 
            return dateFormat;
        }
 
        /// <summary>
        /// Gets the javascript short date pattern.
        /// </summary>
        /// <param name="dateTimeFormat">The date time format.</param>
        /// <returns>Reformated short date string.</returns>
        public static string GetJavascriptShortDatePattern(DateTimeFormatInfo dateTimeFormat)
        {
            return dateTimeFormat.ShortDatePattern.Replace("M", "m").Replace("yy", "y");
        }
 
        /// <summary>
        /// Gets the javascript short date pattern.
        /// </summary>
        /// <param name="dateTimeFormat">The date time format.</param>
        /// <returns>Reformated short date string.</returns>
        public string GetJavascriptShortDatePattern(string dateTimeFormat)
        {
            return dateTimeFormat.Replace("M", "m").Replace("yy", "y");
        }
    }
}

Days in code