Posts

Showing posts with the label jQuery

How to target specific sub element using Jquery

-
Today I have experienced difficulty to target specific sub-element in my HTML document. So I would like to share the solution that I have. Example HTML : <div class="content"> <span>element one</span> <span>element two</span> <span>element three</span> <span>element four</span> </div> The problem is how to append text on the third sub-element under div with class content.? Below is my solution : <script> $(document).ready(function () { $(".content span:eq(2)").append(" <b>content three append using jquery</b><br/>"); }); </script> From the above solution, basically telling that you can target specific sub-element using "eq(2)" --> 2 is the index with no 2. (Remember index start with 0). Full Code Example : <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
Read more

Open url with section targeting with jQuery and HTML 5

-
Recently I have some projects that require targeting section in HTML 5 project. after doing some testing and research on google how to do it, finally, I think this snippet is the best that can work in a most modern browser. Let's see the code. HTML sample  <section id="mainIntro" class="" target-url="<target url>"> : : : </section> JQuery Code Snippet <script> $(window).load( function () { setTimeout(function(){ var current = window.location.href; current = current.substr(current.lastIndexOf('/') + 1); $( "section" ).each(function() { var targetURL = $(this).attr("target-url"); if(targetURL == current){ var mainContentH = $(this).offset().top + 1; $('body,html').animate({ scrollTop: mainContentH }, 150/*this is where you can control of page move to target*/ ); return false; } }); }, 100 /*
Read more

Jquery Mobile, document ready not fire.

-
Today i have experience some weird situation which i already put the alert script on my mobile html page, but the alert didn't show. The alert script not put at the homepage, but at the url provided, when click the button then will redirect current page to the new page with contain alert script. For me,this is so weird. No error on script. At the first place i though it was cache.. so i click on refresh button.. So i just assume it is cache. But after a while, it always need to refresh only show the alert message. So i start googling the problem. Some folks says need to clear  cache, close open the browser, and put some funny funny script just to clear the cache.. But still the problem exist. After keep looking, i found the answer in here :  Demo JQuery The document say, if want to put html "a" tag, need to put some attribute based on what are the requirement you want. Example : if you want to redirect the current page to the new page : <a href="newpage.html"
Read more

Passing parameter to page using Javascript

-
This is an example method using javascript to redirect to the searching page with a parameter from the textbox when click the submits button. Requirement JQuery library HTML <div class="input-group search-btn"> <input id="textSearch" type="text" onkeypress="keypressSearch(e);" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" onclick="return Search();return false;" type="button">SEARCH</button> </span> </div> Javascript <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> function Search() { var txtField = jQuery("#textSearch").val(); document.location.href = "/Search.aspx?searchtext=" + txtField + "&searchmode=anyword&qu
Read more

Jquery - Basic function for beginner

-
This is a jQuery basic fucntion that developers need to know. Do something after page load successfully $(document).ready(function() {   //do something }); Select Element by id / class var element = $("#idOfElement"); var elementByClass = $(".className"); if have more than one element with same class name var elementByClass = $(".className")[0]; Get selected value (drop down) var selectedValue = $("#isDropdown").val(); //return selected value Or var selectedValue = $("#isDropdown option:selected").val(); //return selected value Get selected text(drop down) var selectedValue = $("#isDropdown").text(); //return selected text Or var selectedValue = $("#isDropdown option:selected").text(); //return selected text Get Textbox Value var valueTextBox = $("#idTextbox).val();   Show/hide element  $("#idElement).show(); or  $("#idElement).fadeIn(500);  $("#idElement).hide(); or  $("#idElement).fadeOut(5
Read more

[SOLVED] JQuery - AJAX 500 Internal Server Error - JSON - jQueryAjax

-
Image
The above error always occur if you work with jQuery + Ajax. The error above may have several reason why the error occur and one of the reason is you are using the different parameter name to post to the server. Let say the method getState in webservice require one parameter which will represent country name, you must use the exactly name parameter to request from webservice. The Other Reason Not using JSON.stringify to pass parameter value. If you not supply type in jQuery, it will use GET method which is not accept in your webservice configuration. Add  ( type : "POST ) in your jQuery code to use POST method. You are actually request data from different domain. Cross Domain Request (CORS)which is not allowed. Please read here Content type not supply or not correct. Use " application/json; charset=utf-8 " DataType not not supply or not correct. Use json or jsonp By Mohd Zulkamal NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Fa
Read more

How to add items list in dropdown list using jquery - Cascading drop down

-
If you want to create 2 dropdown lists in which the second dropdown value will depend on the selected value from the first dropdown, you need to Implement JSON + Webservice+ JQuery. In my solution, I will use Jquery Ajax to request data from web service and add value to the second dropdown. Scenario Let say the first dropdown will list all Country, and the second dropdown will list all state from the selected country. Solution Create JSON Webservice, you can refer to this link Create custom JQuery function to handle onChange event on dropdown list country. Use return value from web services to the second dropdown items list. Full Code Example Note: The web service will use from the post here <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <script type="text/javascript&quo
Read more

How to create JSON webservice in ASP.NET

-
This example will show how to create Webservice using asp.net and the result will return in format JSON ( JavaScript Object Notation ). Below is the step by step to create webservice: Open Visual studio. Create New Project Add New File in the solution and choose Web Service file( .asmx) Copy paste code below to create your own JSON webservice The Web Service Code /// <summary>     /// Summary description for KenticoJSONTest     /// </summary>     [WebService(Namespace = "http://tempuri.org/")]     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]     [System.ComponentModel.ToolboxItem(false)]     // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.     [System.Web.Script.Services.ScriptService]     public class AjaxWebService : System.Web.Services.WebService     {         [WebMethod]         public string HelloWorld()         {             return "Hello World";         }         [WebMethod]
Read more

JQuery Height not correct

-
JQuery have method to get the window height : - $(window).height()  , and document height : - $(document).height() ; Problem window height and document height give the same result which is wrong. If you resize the browser , the window height  should give smaller or bigger than document height. The Full HTML Code <html> <head>   <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script> <script type='text/javascript'>$(document).ready(function(){     $('#windowheight').text($(window).height());     $('#documentheight').text($(document).height()); }); </script> </head> <body>   <div id="result">     $(window).height() = <span id="windowheight"></span> <br/>     $(document).height() = <span id="documentheight"></span> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Sed vulpu
Read more

fancybox on google map marker example

-
Image
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.  This example will show how to use Google Map Marker With Fancybox. You can see my previous post about Creating Google Map API Zoom the marker This is the requirement for this example : Jquery Script - you can get it here fancybox script pack - you can get it here fancybox css - you can get it here html page and of course the Google Map Script Header on html page * The header should link with jquery and fancybox script. I will put Google Marker script at header also. <script type="text/javascript" src="jquery-latest.min.js"></script> <script type="text/javascript" src="jquery.fancybox.pack.js"></script> <link href="jquery.fancybox.css" type="text/css" rel="StyleSheet" /> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor
Read more

Simple Tooltip with jQuery (only text)

-
Image
A tooltip is an interface component that appears when a user hovers over a control. They’re already present in most browsers. When you provide a title attribute for a link or an alt attribute for an image, the browser will usually display it as a tooltip when the user hovers over that element. By storing the text using the data command, i can recover and replace the link " title " later. The markup is really simple and flexible and adapts to many possible scenarios you might encounter. Must have a class " masterTooltip " which will launch the tooltip, and the tag " title " that will contain the text inside. The ASP.NET Image Button Controller <asp:imagebutton alternatetext="Delete user permenantly"  class="masterTooltip" commandname="Delete" height="20px"  id="BRemove" imageurl="~/Images/cross.png" runat="server"  title="Delete user permenantly" tooltip="Delete user pe
Read more

SCRIPT5007: Unable to get value of the property '0': object is null or undefined - jquery.jqGrid.js

-
Image
If you try to create data grid using mvc jqGrid and somehow the error above occur while debugging script using IE Debugger. Please follow this step to fix it.. The error because of in your mvc jqGrid coding, you not specify the json reader. Just add this line of code in your View and also in your mvc jqGrid . The Solution @{                 MvcJqGrid.DataReaders.JsonReader jsonReader = new MvcJqGrid.DataReaders.JsonReader();                 jsonReader.RepeatItems = false;                 jsonReader.Id = "dataJson";             } @(Html.Grid("GridDataBasic")                 .SetCaption("List Of User")                 .AddColumn(new Column("AdminID"))                 .AddColumn(new Column("Email"))                 .AddColumn(new Column("Tel"))                 .AddColumn(new Column("Role"))                 .AddColumn(new Column("Active"))                 .SetUrl("/Home/GridDataBasic")             
Read more

Step by step how to create MVCJQGrid ASP.NET MVC4

-
Image
First step is to install MVCJQGrid in your project application(MVC). In This tutorial i will show you how to install MVCJQGrid using NuGet in Microsoft Visual Studio 2010. Install MVCJQGrid 1. In VS2010 open NuGet Manager. 2. Search MVCJQGrid and install the latest MVCJQGrid from NuGet Package Manager. Note : Recommended install latest version of JQGrid 3. Apply Installed NuGet Package into your project. Ok done the first step. Now your project already have MVCJQGrid package with it. Create your first Data Grid using MVCJQGrid First of all in order for you to start write MVCJQGrid coding, you need to add new namespace for the project. In This tutorial i will add the MvcJQGrid in web.config file : Web.Config File      <pages>           <namespaces>             <add namespace="System.Web.Helpers" />             <add namespace="System.Web.Mvc" />             <add namespace="System.Web.Mvc.Ajax" />             <add namespace
Read more