Web and Mobile Apps Codeware: jquery

Showing posts with label jquery. Show all posts

Friday, December 5, 2014

Tutorial for Selecting nth last element using jquery || using nth-last-child in jquery

hi let see how to select a nth last element like the <div>, <p>, <h1> etc. using jquery.

Now in below example just to check if we have selected the correct element we will change its color

example for selecting a 2nd last <h1> element which is inside a <div>

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“button”).click(function () {

$(“h1:nth-last-child(2)”).css(“background-color”, “yellow”);

});
});
</script>

</head>
<body>
<div>
<h1>im 1st h1</h1>
<h1>im 2nd h1</h1>
<h1>im 3rd h1</h1>
<h1>im 4th h1</h1>
<h1>im 5th h1</h1>
</div>
<button>Change color of 4th element ( as it is 2nd last )</button>
</body>
</html>

output:

Monday, September 8, 2014

Creating Restful Services/API using the Slim Framework for PHP || Calling API using Jquery

I was trying to create Rest Api using PHP , then i came across this Slim framework for php, which lets us create powerful APIs.

This below link shows how to create RESTful API using Slim framework and also how to call that api using Jquery.

Click Here

Tuesday, October 15, 2013

sending data from jquery to webservice | calling web service from jquery on ajax/json post in asp.net

hi in this post i will show how to call a webservice from jquery using ajax/Json post in asp.net :

1. add in web.config

<authorization>
<allow users="*"/>
</authorization>


2. add a webservice file and in codebehind of it add method to be called on ajax-json post request:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]

public class WebService : System.Web.Services.WebService {

public WebService () {

}

[WebMethod]
public string HelloWorld(string message, string Type)
{
return "Hello World";
}

}

3. Jquery code to be used on the html page to call a webservice on ajax/json post request :

   var Tag = '{message: "' + name.val().toString() + '", Type: "' + 'A' + '"}';

$.ajax({ type: "POST", url: "WebService.asmx/HelloWorld", cache: false, contentType: "application/json; charset=utf-8", data: Tag, dataType: "json",
success: function (msg) {

alert('Successful');

},

error: function (response) {

alert(response);

}

});

Friday, September 27, 2013

textbox float value validation | Using Jquery in asp.net to validate and allow only float,integer,decimal values in the textbox

hi in this post i will show how to validate and allow only float,integer,decimal values in asp.net textbox.

Example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" >
$(document).ready(function () {
$("#<%= TextBox1.ClientID %>").keypress(function (event) {

if (event.which < 46 || event.which > 59) {
event.preventDefault();
} // prevent if not number/dot

if (event.which == 46 && $(this).val().indexOf('.') != -1) {
event.preventDefault();
} // prevent if already dot

});
});

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>

Tuesday, September 17, 2013

check whether checkbox is checked or not in Jquery Asp.net | validate checkbox using Jquery

hi in this post i will show how to validate a checkbox in Jquery.

Example :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
SELECT Laptops:
<br />
<asp:CheckBox ID="CheckBox1" Text="HP" runat="server" /><br />
<asp:CheckBox ID="CheckBox2" Text="DELL" runat="server" /><br />
<asp:CheckBox ID="CheckBox3" Text="ACER" runat="server" /><br /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>

1. to check atleast one checkbox should be checked from the list of checkboxes

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('input[id$=btnSubmit]').click(function (e) {
var checked = $(':checkbox:checked').length; //checks whether atleast one check box is checked from the list of checkboxs.
if (checked == 0) {
alert('Select atleast one checkbox');
e.preventDefault();
}
else {
alert('all validations true');
}
});
});
</script>

2. to validate a specific checkbox

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('input[id$=btnSubmit]').click(function (e) {
var checked = $('#CheckBox1').is(':checked'); // for a specific checkbox
if (checked == 0) {
alert('First Checkbox Should be checked');
e.preventDefault();
}
else {
alert('all validations true');
}
});
});
</script>

Monday, June 24, 2013

using jquery .hover method in asp.net | Jquery hover Example | Jquery hover method demo

hi in this post i will show how to use a jquery .hover method in asp.net.
Using Jquery hover method a event is triggered when a mouse points to an element. i.e. label, button etc.

Below is the example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<html>
<head>
<title></title>
</head>
<body>
<div>
<p>this is Jquery</p>
</div>

<script language="javascript" type="text/javascript">
$("p").hover(
function () {
$(this).append($("<span> and it is Awesome</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
</script>
</body>
</html>

Result :

2. on hover i.e when mouse points to the element

Saturday, June 15, 2013

Using jQuery autocomplete plugin in asp.net | jQuery text autocomplete example ,tutorial

hi in this post i will show how to use a jQuery text autocomplete plugin in asp.net.

Example :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
var availableTags = [
"ARMADA",
"ASTON MARTIN",
"MAZDA",
"FORD",
"FERRARI",
"LAMBORGINI",
"MERC",
"HYUNDAI",
"HUMMER",
"TATA",
"RR",
"TOYOTA",
"MITSUBISHI",
"VOLVO"
];
$("#TextBox1").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<form runat="server">
<asp:Label ID="Label1" runat="server" Text="Enter Text "></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>

Result :

Sunday, June 2, 2013

Using Jquery Clone method in asp.net | Jquery Clone Example

Using Jquery clone Method we can create a duplicate element from the elements already present in the Html code.

Example: In this below Example on the button click i will duplicate the <div> content and display that duplicate <div> below the button.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryClone.aspx.cs" Inherits="JqueryClone" %>

<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$("#div1").clone().insertAfter("#Button1");
});
});
</script>
</head>
<body>

<div id="div1">Jquery is Awesomee !!</div>
<input id="Button1" type="button" value="button" />

</body>
</html>

Output:

Thursday, May 23, 2013

call a asp.net wcf service using jquery | Ajax Json Call to WCF using Jquery

Hi in post i will show how to call a asp.net wcf service using jquery.

1. Take a new website empty template add aspx page and wcf service page.

2. Go to App_Code --> IService.cs to define the method signature.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;

[ServiceContract]
public interface IService
{
[OperationContract]
[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)]
string GetDate(string Date);
}

3. Go to App_Code --> Service.cs to write the implementation for the declared method signature.

using System;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.Text;

using System.Web.Script.Serialization;

using System.ServiceModel.Activation;

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class Service : IService

{

public string GetDate(string Date)

{

return "'Hello World' Todays Date is : " + Date.ToString();

}

4. Now in the Web.config file i will define the address, binding, contract and service behaviours for the WCF Service

Under the configuration tag add this:

<system.serviceModel>

</behavior>

</serviceBehaviors>

</behavior>

</endpointBehaviors>

</behaviors>

</identity>

</endpoint>

</service>

</services>

</system.serviceModel>

5. Now writing the jquery ajax code to call the wcf service.

var d = new Date();

function CallWCF() {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: '<%=ResolveUrl("~/Service.svc/GetDate") %>',

data: '{"Date": "' + d.toDateString() + '"}',

processData: true,

dataType: "json",

success: ServiceSucceeded,

error: ServiceFailed

});

}

function ServiceFailed(output) {

Log('Service call failed: ' + output.status + ' ' + output.statusText);

}

function ServiceSucceeded(output) {

var outputValue = output.d;

Log("Service call Success: <br/> " + outputValue);

}

function Log(displayValueFromService) {

$("#DisplayOutput").append('<br/>' + displayValueFromService);

}

</script>

</head>

<body>

</div>

</body>

</html>

6. Result:

Tuesday, May 21, 2013

Jquery Mouse Over and MouseOut Example | Jquery MouseOver and MouseOut Demo

Hello in this post i will demonstrate a demo for using Jquery MouseOver and MouseOut.

1. On MouseOver i will be showing Text as Hello World and on MouseOut i will display text as Good Bye World.

2. Below is the code for this.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Result").mouseover(function () {
$("#Result").empty();
$("#Result").append("Hello World");
});
$("#Result").mouseout(function () {
$("#Result").empty();
$("#Result").append("Good Bye World");
});
});
</script>
<title>Mouse over and Mouse Out</title>

</head>
<body>
<div id="Result">Mouse over and Mouse Out for Message.</div>
</body>
</html>

3. Result:

On MouseOver

On MouseOut

Sunday, May 12, 2013

Calling a popup window on button click event in Jquery

Let see how to Call a popup window on button click event in Jquery.

Below is the Html code for this

$(document).ready(function () {

$("#Button2").click(function () {

var url = "http://www.google.com";

window.open(url, "Google", "height=600, width=800");

});

</script>

</head>

<body>

<div>

</div>

</body>

</html>

Output:

Redirecting to a internal webpage in Jquery

Let see how to redirect from a webpage to an internal webpage on a button click event.

Below is the Html code for this

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
$("#Button1").click(function () {
location.href = "test.aspx"
});
});

</script>
</head>
<body>

<div>
<input id="Button1" type="button" value="Redirect to a Internal Web page" />
</div>

</body>
</html>

Saturday, May 11, 2013

Using Jquery fadeIn, fadeOut, fadeToggle and fadeTo in asp.net

Hello in this post i will show how to use Jquery fadein , fadeout, fadeToggle and fadeTo in asp.net

1. fadeIn : It will load or show the element as per the given speed( 3000,2000 milliseconds) or value ( slow,fast).

2. fadeOut : It does the opposite of what fadeIn does. It will hide the element as per the given speed( 3000,2000 milliseconds) or value ( slow,fast).

3. fadeToggle: This option does the job of both the above types. It toggles between fade in and out. its like On and Off.

4. fadeTo : This is completely different from all them mentioned above. It toggles between the opacity of the image as per the given strength. Higher the strength the transparency of the element will be high.

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {
$('#ImageDiv').fadeIn(4000);
});
$(document).ready(function () {
$('#ImageDiv1').fadeOut("slow");
});
$(document).ready(function () {
$('#ImageDiv2').fadeToggle(5000);
});

$(document).ready(function () {
$('#ImageDiv3').fadeTo("slow", 0.4);
});

$(document).ready(function () {
$("button").click(function () {
$("#ImageDiv2").fadeToggle(3000);
});
});

</script>

</head>
<body>

<div id="ImageDiv" style="display: none">
<img alt="Lion" src="download.jpg" />

</div><br />

<div id="ImageDiv1">
<img alt="Lion" src="download.jpg" />

</div><br />

<button>Fade Toggle</button>
<div id="ImageDiv2">
<img alt="Lion" src="download.jpg" />

</div><br />

<div id="ImageDiv3">
<img alt="Lion" src="download.jpg" />

</div><br />

</body>

</html>

Result: