Posts

Showing posts with the label jQuery

Donate

Ajax Calls Not Working In Internet Explorer 8

-
After testing the external js files in IE 8, the calls to post data to a controller does not work. After googling, I found a fix that is to set true to jquery support cors. jQuery Code: 1 jQuery.support.cors = true ; CORS, INTERNET EXPLORER 8, AND XDOMAINREQUEST Cheers!
Post a Comment
Read more

Databinding ASP.NET 4.5 GridView With jQuery And Ajax

-
Image
Hi, Here's a simple asp.net program that performs adding of data to GridView control through jQuery and ajax. On page load, perform databinding on dropdown list and gridview using server side and code behind. And on client side, that is a selection change occurs in dropdown list, perform binding by adding table rows and columns to GridView. Page Load (Load All Products): Selection Change (Load Specific Products): The sample code is available for download here: Databinding ASP.NET 4.5 GridView with jQuery and Ajax Code Cheers!
Post a Comment
Read more

Update ASP.NET Web Forms Label Control Value Using Continuous Mouse Down Click

-
Starting today, I'm going to contribute source code in vbforums.com( Visual Basic Forum ). The community helped me way back since VB 6.0 and VBA. And in turn, it's time to give back as an experienced member. :) Here's a an ASP.NET application I posted in ASP.NET code bank on how to update label values continuously on mouse hold. Update Label Value using jQuery/Javascript in ASP.NET Reference: Easily do a continuous action on mouse hold using javascript Cheers! :)
Post a Comment
Read more

Unable to get value of the property 'nodeType': object is null or undefined (Knockout JS)

-
After completing a simple binding using Knockout Javascript framework, I decided to transfer the script tags to the header section of the page. Upon running my code, I stumbled upon an error as stated on the title. I believe, the DOM elements have not been initialized when the binding occurs. One solution I came up was to transfer the view model script inside the document ready function. <head runat= "server" > <title>Integrate jQuery with Knockout!</title> <script type= "text/javascript" src= "Scripts/knockout-3.1.0.js" ></script> <script type= "text/javascript" src= "Scripts/jquery-1.7.1.min.js" ></script> <script type= "text/javascript" > $(document).ready( function () { var myViewModel = { personName: 'PsychoGenes' , personAge: 33 }; ko.applyBindings(myViewModel); }); </scri
Post a Comment
Read more

Render ASP.NET MVC 4 Partial View Based From Html.DropdownList() Selected Value Using jQuery

-
Image
In my previous post on loading items to Select control, I decided to create a more advanced example by rendering an asp.net mvc partial view using jquery based on drop down selection. The mvc application will simply load all orders irregardless of the status made by a particular customer selected from the dropdown list. The application also calculates the total orders made by the customer using jquery numberformatter framework. Partial View: @model IList <ShowWebGridUsingJQuery.Models.SalesOrderHeader> @{ Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml"; } @{ var orderTotal = Model.Sum(o => (float)o.TotalDue); WebGrid grid = new WebGrid(Model); } <script type= "text/javascript" > $(document).ready(function () { var total = 0; $('#divGrid .totalDue').each(function () { total = total + parseFloat($(this)[0].innerHTML.toLocaleString().replace(",", &q
Post a Comment
Read more

Populate Select/ListBox items From Html.DropdownList() Selected Value Using jQuery In ASP.NET MVC 4

-
Image
After familiarizing some basic concepts on ASP.NET MVC 4, I decided to create a simple application which populates a listbox control from a DropDownList helper selected value using jQuery. This simple application included the Entity Framework which targets the AdventureWorks DB.Here's the Model Class: public class CountryRegionsContext : Models.AdventureWorks2008Entities { public DbSet<CountryRegion> Country_Regions { get ; set ; } public DbSet<StateProvince> State_Province { get ; set ; } } Here's the View page: @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Adventure Works Country and State Province Information</h2> <script> $(document).ready( function () { $( "#State" ).prop( "disabled" , true ); $( "#Country" ).change( function () { if ($( "#Country" ).val() != "Select&quo
Post a Comment
Read more

Add Placeholder (Watermark) To Html.TextBoxFor() Helper In ASP.NET MVC 4

-
Image
After working with simple form html elements, I decided to give it a try applying the placeholder jquery framework to ASP.NET MVC4 application. The steps are similar in this post: Placeholder attribute in HTML5 form Elements except that the target controls are HTML Helpers. Basically, TextBoxFor() helper when rendered to the browser is an input text element. So, let's give it a spin. On your _Layout.cshtml, reference the jquery and placeholder scripts. <script type= "text/javascript" src= "~/Scripts/jquery-1.7.1.min.js" ></script> <script type= "text/javascript" src= "~/Scripts/placeholders.jquery.min.js" ></script> and in your MVC Form, apply it to TextBoxFor() as shown below: @model TextBoxFor.Models.Movie @{ ViewBag.Title = "CreateMovie"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>Movi
4 comments
Read more

Placeholder Attribute In HTML5 Not Showing On IE 9 And Below (Watermark Feature)

-
Image
Given this html markup for input text element for accepting email value: <input type= "email" name= "inEmail" id= "inEmail" required= "required" placeholder= "yourname@domain.com" /> The place holder shows correctly on firefox and google chrome but not on IE 9. After searching the internet, I found placeholder framework that will fix place holders in IE 9 and below. The steps are as follows: 1. Download the placeholder script here: Placeholder js 2. Add reference to jquery and placeholder on your html file. <script src= "../Scripts/jquery-1.7.1.min.js" type= "text/javascript" ></script> <script src= "placeholders.jquery.min.js" type= "text/javascript" ></script> IE demo: That's it... :)
Post a Comment
Read more

ASP.NET jQuery $find() Not Working In Onclick() Event Of Radio Button

-
In an application where i want trigger the onclick event of radio button that has a $find() method, which will retrieve the radio button's value, the code below doesn't work. <input type= "radio" id= "rb1" name= "format" value= "format2" runat= "server" onclick= "$find('<%=dpe1.ClientID %>').populate(this.value);" /> d.m.y <input type= "radio" id= "rb2" name= "format" value= "format3" runat= "server" onclick= "$find('<%=dpe1.ClientID %>').populate(this.value);" /> y/m/d where dpe1 is a DynamicPopulateExtender Ajax Extender.The solution I made was to remove the populate logic and transfer it to a javascript function. Here's the revised code: //javascript code function rbFunction() { //$find('<%=dpe1.ClientID %>').populate($("input:radio:c
Post a Comment
Read more

ASP.NET MVC String.Format() Not Showing Correct Format In Views Using jQuery Calendar

-
Image
Greetings, Formatting display output of dates in asp.net mvc should work using String.Format() with custom date formatting criteria. However, applying String.Format() in asp.net ascx view does not display the desired format that I want. Example markup: @Html.TextBoxFor(model => model.HireDate, String.Format( "{0:g}" , Model.HireDate)) Given Date Input: 2/6/2013 12:00:00 AM Desired Output should be with time portion removed: 2/6/2013 Solution: The trick to display the desired format was to decorate a display format attribute in my model class HireDate property: private DateTime hDay; [DisplayName("Hire Date")] [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")] public DateTime HireDate { get { if (hDay == DateTime.MinValue) { return DateTime.Today; } else return hDay; } set { if ( value == DateTime.MinValue) { hDay = DateTime.
Post a Comment
Read more

Debugging jQuery Or Javascript Code Not Working In ASP.NET MVC 2 (VS 2010)

-
In an application where there is internal jquery code in your MVC project, placing a breakpoint won't work when you want to enable debugging mode. After searching, a workaround has been provided by Microsoft Team. The solution is to transfer the javascript/jQuery script to an external .js file instead of embedding it in your .aspx script.Refer to the workaround. Solution: http://connect.microsoft.com/VisualStudio/feedback/details/652428/mvc-3-mvc-2-debug-ignores-javascript-breakpoints Cheers! Greg
Post a Comment
Read more

Object doesn't support property or method call in consuming JSON object From ASP.NET MVC In Internet Explorer

-
Recently, I've followed a simple tutorial regarding consuming JSON object in ASP.NET MVC. The error stated from the title of this post appears in IE9. The original snippet is this: $(document).ready( $.getJSON( 'http://localhost:6222/home/customerjson' , function (item) { $( '#result' ) //show product name in .html( '<p>' + item.CurrentCustomer.CustomerName + '</p>' ); } ) ); The solution is to enclose $.getJSON() in a function() statement based from the modified code below. The popup script just went away. $(document).ready( function (){ $.getJSON( 'http://localhost:6222/home/customerjson' , function (item) { $( '#result' ) //show product name in .html( '<p>' + item.CurrentCustomer.CustomerName + '</p>' ); } )
Post a Comment
Read more

JQuery Calculator Example In ASP.NET Web Forms

-
Image
The image above is a jquery/javascript calculator developed in ASP.NET 4.0 web template. Here's the functions. I'wont be posting all codes since it will took up space in my post. I'll just post the sqrt() and a number scripts. The ASPX markup uses plain css for centering and aligning the buttons and html controls. No asp.net server controls are involved. For the jquery processing, im using the id selector. /* show zero to textbox on page load */ $( "#txtCalc" ).ready( function () { $( "#txtCalc" ).val( "0" ); }); //square root $( "#btnSqrt" ).click( function () { var text = $( "#txtCalc" ).val(); //if invalid input,do not execute codes below if (text.search( "Invalid" ) != -1) { return ; } if (text.length == 1) { if (text == "0" ) { return ; }
1 comment
Read more

Using JQuery Intellisense In An External JavaScript File Of ASP.NET Web Forms

-
Create an aspx page and an external javascript file. Call the javascript external file in your aspx page. 1: <script src= "js/jquery-1.4.1.js" type= "text/javascript" > 2: </script> 3: <script src= "js/Sample.js" type= "text/javascript" > 4: </script> In your external .js file, add the following code on top of the js file page. ///<reference path="jquery-1.4.1.js"/> function dothis() { //your code here }
Post a Comment
Read more

Access DOM Elements in ASP.NET WebForms Master And Content Pages Using ClientID And jQuery

-
The example below will display Bill Murstein in asp.net textbox Example: 1 2 3 4 5 6 var name = 'Bill Murstein' ; //javascript DOM document .getElementById( '<%=txtCustomerName.ClientID%>' ).value = name; //jQuery Counterpart $( '[id$=txtCustomerName]' ).val(name);
Post a Comment
Read more

jQuery In ASP.NET Web Forms Ajax Does Not Work After Partial Postback

-
I encountered a problem with jquery in asp.net ajax with master page content. During first pageload, the jquery script works fine, but after partial postback, the jquery script does not work. After a few googling activity, I came upon this site: http://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same/ This explains how to use document.ready, pageload, and Application.init. In my previous code, i've used document.ready since my aspx page was not ajax enabled. But since, Im switching my application to ajax ready, the solution I came upon was using function pageLoad() instead of document.ready(). Example: 1 2 3 4 5 6 7 function Pageload() { $( "#txtsomething" ).blur( function () { //your js code here var x = 25 + 25 ; alert(x); }); } Hope this insight will help other developers out there... Here is the summary from the direct link: $(document).ready() Ideal for onetime initialization. Optimization black magic; may
Post a Comment
Read more

Simple jQuery Manipulation In Asp.Net WebForms

-
I started learning jquery recently. This is a simple tutorial using asp.net website to show alert message and to change background color of label control. Add a label control, an asp.net button control, and input html button. Make sure to reference the jQuery library in your asp.net website. jQuery Script: 1 2 3 4 5 6 7 8 9 10 11 $( document ).ready( function () { $( '#btnAlert' ).click( function () { alert( 'my first jquery app!' ); }); $( '#btnChangeBackColorLabel' ).click( function () { $( 'span' ).css( "background-color" , "blue" ); }); $( "span" ).click( function () { $( this ).css( "background-color" , "yellow" ); }); }); HTML CODE: 1 2 3 4 5 6 7 <div> <asp:Button ID= "btnAlert" runat= "server" Text= "Show Alert" /> <br /> Click Change Me label itself to change backgrou
Post a Comment
Read more

jQuery Intellisense With Visual Studio 2008

-
I recently played with jquery to work with asp.net/asp.net ajax. 1. Perform these steps in this website: jQuery Intellisense in Visual Studio 2008 2. Download jquery-1.4.1-vsdoc.js and jquery-1.4.1.min.js from jquery website. 3. Include them in your asp.net website. 4. remove the min in jquery-1.4.1.min.js. So the new jquery library would be like this: jquery-1.4.1.js 5. Add reference to the jquery library in your javascript file. That's it...Cheers!!!
Post a Comment
Read more

Donate