Feature Ad (728)

Latest In

Sunday, May 24, 2015

Ajax jquery delete data without refresh with animation effect

With the help of jquery effects we can easily delete data without going to another page. In this jquery tutorial we are going to how to delete data without refresh i.e. delete the data from database as well as from webpage without page refresh. In this tutorial we are going to take advantage of Ajax to do this task. We also going to add some animation effect to it.
Like we have in facebook or twitter, where comments or tweets are deleted without refresh we are going to do the same. It's similar to like deleting comment without taking user to other page. Deleting the data in same page.
ajax jquery delete data without refresh with animation effect


First we are going to create a database. Add a table to the database as given below-

[highlight] CREATE TABLE IF NOT EXISTS `ajax_jquery_add_delete_record` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`content` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; [/highlight]
Next to delete data without refresh with animation effect we have to create a simple form and then add javascript to them. A ajax call file also be created to make the changes occur without any refresh.
First create the form in html as like this -
[highlight]
<div class="form_style">
<textarea name="content_txt" id="contentText" cols="45" rows="5" placeholder="Write what you are upto"></textarea>
<img src="images/loading.gif" id="LoadingImage" style="display:none" />
<button id="FormSubmit">Update Your Status</button>
</div>
[/highlight]

With this form we are going to get the text and update the status in the database. To make the ajax call we have to write jquery function. The jquery function to delete data without refresh is given as -


[highlight]

<script type="text/javascript">
$(document).ready(function() {

//##### send add record Ajax request to response.php #########
$("#FormSubmit").click(function (e) {
e.preventDefault();
if($("#contentText").val()==='')
{
alert("Please enter some text!");
return false;
}

$("#FormSubmit").hide(); //hide submit button
$("#LoadingImage").show(); //show loading image

var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
$("#contentText").val(''); //empty text field on successful
$("#FormSubmit").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image

},
error:function (xhr, ajaxOptions, thrownError){
$("#FormSubmit").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
alert(thrownError);
}
});
});

//##### Send delete Ajax request to response.php #########
$("body").on("click", "#responds .del_button", function(e) {
e.preventDefault();
var clickedID = this.id.split('-'); //Split ID string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'recordToDelete='+ DbNumberID; //build a post data structure

$('#item_'+DbNumberID).addClass( "sel" ); //change background of this element by adding class
$(this).hide(); //hide currently clicked delete button

jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
//on success, hide element user wants to delete.
$('#item_'+DbNumberID).fadeOut();
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
});

});
</script>

[/highlight]

Download Script View Live 

Sunday, May 17, 2015

The ready event in jQuery

As mentioned in examples of events in jquery ready event in jquery contains all other functions. The ready event occurs when the DOM (document object model) has been loaded, and the page has been fully loaded (including images). It's good practice to wait for the document to be fully loaded and ready, before working with it. Thus ready event in jQuery must enclose all other events, functions and triggers.
The inclusion of other events inside the ready event in jQuery,  allows  to have JavaScript code before the body document, in the head section, either directly or through a link to an external JavaScript file. This is done by just placing the code inside the document ready event. Let get understand use of ready event in jQuery as an example.

<div id="test1"></div>
<script type="text/javascript">
function DocumentReady()
{
        $("#test1").text("Hello, world!");   
}

$(document).ready(DocumentReady);
</script>
What we do here is that we create a function, called DocumentReady, which should be fired as soon as the document is ready for DOM manipulation. In the last line, we use the ready() method to assign our function to the ready event, to tell jQuery that as soon as the document is ready, we want it to call our function.

However, we can shorten this a bit by using an anonymous function of JavaScript instead. This basically just means that instead of declaring the function and giving it a name, we simply create it and then immediately passes the reference to the ready() function. If you're new to JavaScript, then this might seem overly complicated, but as you get used to it, you might appreciate the fewer keystrokes and the less space needed to accomplish the same:
<div id="test2"></div>
<script type="text/javascript">
$(document).ready(function()
{
        $("#test2").text("Hello, world!");   
});
</script>
But of course, this wasn't even short enough for the jQuery team, so they decided to create a version (overload) of the jQuery constructor which takes a ready function as a parameter, to make it even shorter:
<div id="test3"></div>
<script type="text/javascript">
$(function()
{
        $("#test3").text("Hello, world!");   
});
</script>
In the last example, our anonymous function is passed directly to the jQuery constructor, which assigns it to the ready event. As you will see when you test the code, the event is fired as soon as the page is loaded, most of the time so fast that you won't even realize it.

As already described, wrapping your code in the ready event function is best practice for working with jQuery in your document, and therefore you will see this tutorial using the approach in most of the examples, unless skipped to keep example sizes down.

Sunday, May 10, 2015

Know about jQuery effects

The jQuery library provides several techniques for adding animation to a web page. There are many jQuery effects which will provides to do various kind of amazing effects with web interface. The jQuery API have many jQuery methods allow us to quickly apply commonly used effects, the jQuery effects. This tutorial deals with important jQuery effects.

Basic jQuery effects

Showing and Hiding Elements with jQuery

There are two functions, hide() and show() for showing and hiding any DOM elements. 
Syntax :
.show( duration [, easing ] [, complete ] ) 
.hide( duration [, easing ] [, complete ] )

Where the meanings are  -
        • duration (default: 400)
          • Type: Number or String
          • A string or number determining how long the animation will run.
        • easing (default: swing)
          • Type: Number or String
          • A string or number determining how long the animation will run.
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Sunday, May 3, 2015

jQuery events with examples

We have learn about the syntax of jQuery. The syntax have two major part in it, one the selector and other the events. We already gone through the lists of selectors, now time to take few step toward the jQuery events.

What are Events?

The action of the user to which the browser response from the web page is the event.  The event is either mouse click, key press, radio button or checkbox selection etc.

Like javascript, jQuery act on the DOM events. Below is list of few events -
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

jQuery Events Examples

Example 1: click event
$("p").click(function(){
$(this).hide();
});
This will select the p element and on click by user hide it.

Example 2: mouse hover event
$("#mousehover").hover(function(){
alert("You mouser the element!");
});
This function will alert the message, when mouser is hover over the element with id mousehover.

Example 3: blur event
$("input").blur(function(){
  $(this).css("background-color","yellow");
});
This function will on blur over any input element, changes the background color of that element to yellow.
Example4: focus event
$("input").focus(function(){
  $(this).css("background-color","red");
});
This function will on focus over any input element, changes the background color of that element to red. When focus is out it will back to it original color (backed by blur).

Example 5: change event
$("input").change(function(){
 alert("Text successfully changed.");
 $(this).css("background-color","#ccc");
 });
This function will alert the message and changes background color  to mentioned color code of  input element. This happens when text is tried to changed in the input element.

Example 6: keypress event
$("input").keypress(function(){
 $("span").text(i+=1);
 });
This function will add up the text count by one, each time a key get pressed by user.

Example 7: select event
$("input").select(function(){
 alert("Text selected!");
 });
This function will alert the message when the text inside input element is selected.

Example 8: submit event
$("form").submit(function(){
 alert("Submitted");
 });
This event alert if form with name attribute of  'form' get submitted by user on submit button click.

Example 9: scroll event
$("div").scroll(function(){
 $("span").text(x+=1);
 });
This event will count and increase the number by one in text as user scroll either up or down.

Example 10: ready event

This is most important event. The ready event occurs when the DOM (document object model) has been loaded, and the page has been fully loaded (including images). Since this event loads as DOM load so it is a good practice to place all the other jQuery events and functions inside it.
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
$("input").keypress(function(){
$("span").text(i+=1);
});
});
As seen this event perform other two task as mentioned above.

Sunday, April 26, 2015

List of jQuery Selectors

The jQuery is the collections of scripts written in JavaScript to perform various task including the document traversal and manipulation, event handling, animation etc. The syntax of jQuery was listed, where we go through the selectors. Now giving you the  complete list of jQuery Selectors.

 jQuery Selectors

  • $('*'): This selector selects all the elements in the document.
  • $("p > *"): This selector selects all elements that are children of a paragraph element.
  • $("#specialID"): This selector function gets the element with id="specialID".
  • $(".specialClass"): This selector gets all the elements that have the class ofspecialClass.
  • $("li:not(.myclass)"): Selects all elements matched by <li> that do not have.
  • $("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
  • $("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements.
  • $("ul li:first"): This selector gets only the first <li> element of the <ul>.
  • $("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
  • $("li > ul"): Selects all elements matched by <ul> that are children of an element matched by <li>
  • $("strong + em"): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
  • $("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
  • $("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.
  • $("p strong, .myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class ofmyclass.
  • $(":empty"): Selects all elements that have no children.
  • $("p:empty"): Selects all elements matched by <p> that have no children.
  • $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
  • $("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.
  • $("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
  • $("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname.
  • $("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname.
  • $("a[@rel$=self]"): Selects all elements matched by <p> that have a class value ending with bar
  • $("a[@href*=domain.com]"): Selects all elements matched by <a> that have an href value containing domain.com.
  • $("li:even"): Selects all elements matched by <li> that have an even index value.
  • $("tr:odd"): Selects all elements matched by <tr> that have an odd index value.
  • $("li:first"): Selects the first <li> element.
  • $("li:last"): Selects the last <li> element.
  • $("li:visible"): Selects all elements matched by <li> that are visible.
  • $("li:hidden"): Selects all elements matched by <li> that are hidden.
  • $(":radio"): Selects all radio buttons in the form.
  • $(":checked"): Selects all checked boxex in the form.
  • $(":input"): Selects only form elements (input, select, textarea, button).
  • $(":text"): Selects only text elements (input[type=text]).
  • $("li:eq(2)"): Selects the third <li> element
  • $("li:eq(4)"): Selects the fifth <li> element
  • $("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
  • $("p:lt(3)"): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
  • $("li:gt(1)"): Selects all elements matched by <li> after the second one.
  • $("p:gt(2)"): Selects all elements matched by <p> after the third one.
  • $("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.
  • $("div//code"): Selects all elements matched by <code>that are descendants of an element matched by <div>.
  • $("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
  • $("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
  • $("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
  • $(":parent"): Selects all elements that are the parent of another element, including text.
  • $("li:contains(second)"): Selects all elements matched by <li> that contain the text second.
For more detailed documentation on jQuery Selectors visit the Jquery official documentation page about selectors.

Mobiles from Flipkart


Total Pageviews

Google+ Badge