Nobody can to this

Reinvent the select box

Note this is also useful in Mobile where there is no select box

first the css

    ul {
        /*height: 15px;*/
        /*width: 150px;
        border: 1px #000 solid;*/
        list-style-type: none;
        text-align:left;
        z-index: 11111111;
        position: absolute;
        padding-left:3px;
        margin-top: -10px !important;
    }
 
        ul li {
            padding: 3px ;
            /*z-index: 2;*/
            width:175px;
        }
 
            ul li:not(.init) {
                float: left;
                width: 130px;
                display: none;
                background: #ddd;
            }
 
                ul li:not(.init):hover, ul li.selected:not(.init) {
                    background: #09f;
                }
 
    li.init {
        cursor: pointer;
    }

then the HTML

 <div style="float:left;position:relative;" >
            <ul class="ulFudge ">
                @{
                    var contentTypes = Model.Settings.Formats.Where(a => a.Name == Model.currentFormat.Name).FirstOrDefault().ContentTypes;
                    <li class="init">[SELECT]</li>
                    foreach (var contentType in contentTypes)
                    {
                        <li data-value="">@contentType.Name</li>
                    }
                }
 
            </ul>
        </div>

finally the JS to make it happen

function SetUl() {
    $("ul").on("click", ".init", function () {
        $(this).closest("ul").children('li:not(.init)').slideDown();
    });
 
    var allOptions = $("ul").children('li:not(.init)');
    $("ul").on("click", "li:not(.init)", function () {
        allOptions.removeClass('selected');
        $(this).addClass('selected');
        $("ul").children('.init').html($(this).html());
        allOptions.slideUp();
    });
}
 

to get the value

alert("The selected Value is "+ $("ul").find(".selected").data("value"));

To programmatically load JQuery and test for it

var canJquery = false;
 
 
 
            try {
              var x = document.createElement('script');
              x.src = './scripts/jquery-222.1.0.min.js';
              document.getElementsByTagName("head")[0].appendChild(x);
 
              if(jQuery){
                canJquery = true;
              }
              else{
                canJquery = false;
              }
 
 
            } catch (e) {
              canJquery = false;
            }

To output the contents of a json record

// obj1 is json record
 
for (property in obj1) {
            count++;
            console.log(property);
            console.log(obj1[property]);
        }

To translate HTML symbols in Javascript

HTML ✓ translates to "\u2713" in javascript

To cancel an event bubble

first technique
put this in the event call on the element.

event.cancelBubble=true;

second technique

<span style="height: 242px; width: 994px;">function QuickServiceRequest(event) {
 
if (event.currentTarget) {
 
 target = event.currentTarget;
 
 event.stopPropagation();
 
}
 
else {
 
target = event.srcElement;
 
event.cancelBubble = true;
 
}
 
 
 
alert(target.id);
 
}</span>

To display a date in proper format 'client side.

 var sttime = new Date('@Model.FirstOrDefault().finishTime');
 
$("#finishTime").val(fntime.toShortDateString());This assumes that the extended method for date

Date.prototype.toShortDateString = function () {
 
 return (this.getMonth() + 1) + '/' + this.getDate() + '/' + this.getFullYear();
 
};

To trim a string you can put this in a util file and it will be available throughout the app.

 String.prototype.trim = function () {
 
 return this.replace(/^\s+|\s+$/g, "");
 
 }

To return a classic short date string

 Date.prototype.toShortDateString = function () {
 
 return (this.getMonth() + 1) + '/' + this.getDate() + '/' + this.getFullYear()
 
 }

To return a week number

Date.prototype.getWeek = function () {
 
 var determinedate = new Date();
 
 determinedate.setFullYear(this.getFullYear(), this.getMonth(), this.getDate());
 
 var D = determinedate.getDay();
 
 if (D == 0) D = 7;
 
 determinedate.setDate(determinedate.getDate() + (4 - D));
 
 var YN = determinedate.getFullYear();
 
 var ZBDoCY = Math.floor((determinedate.getTime() - new Date(YN, 0, 1, -6)) / 86400000);
 
 var WN = 1 + Math.floor(ZBDoCY / 7);
 
 return WN;
 
};

To copy a date

Date.prototype.copy = function () {
 
 return new Date(this.getTime());
 
};

To compare dates in a reference array (index)

This assumes that we have generated a list on the server side.

List<Job> jobs = db.Jobs.Where(a=> a.pharmacy.id == SessionPersister.PharmacyId).ToList();
 
 List<JobCalendarDetail> jds = (from ret in jobs select new JobCalendarDetail { jobId = ret.id, jobTitle = ret.jobTitle, endDate = ret.endDate.ToShortDateString(), startDate = ret.startDate.ToShortDateString() }).ToList();
 
 return Json(jds, JsonRequestBehavior.AllowGet);

then we can build an index array that return the index of the main array based on the date

 // build an index array
 
 for (var i = 0; i < CalendarJobs.length; i++) {
 
 // gererate a jscript date
 
 tdate = new Date(CalendarJobs[i].startDate);
 
 CalendarJobsDates.push(tdate.valueOf());
 
 
 
 }
 
 myDate = new Date("6/21/2012");
 
 testDate = myDate.valueOf();
 
 isin = $.inArray(testDate, CalendarJobsDates )