jQuery
Raiting:
3

jQuery and Bicycles


I would like to share some observations and my knowledge in this article with umumble readers.

Let’s do it!

1. Write as you say it aloud


Your task is to show other programmers that you do it with a little twist.

Before you write the next piece of code, think and say it out loud what you are going to do. For example, I need to clear little bit this item. Many people will write without any hesitation:
$(".info").html("")
Because they used a convenient one in the past .innerHTML = "". Here is more preferred option:
$(".info").empty()
These programmers often clear the item before placing in it a new information:
$(".info").html("").html("Ok")
But do not forget! You write in jQuery! .html() takes care of you, it will clear itself item before inserting a new value.

By the way, it will make it better than you do it through .innerHTML. The fact is that within the clearing item can be the items that handle events and data using .data(). jQuery will clear it without any memory leaks.
Sometimes, it is even better to remove the entire item at all:

$(".info").remove()
More ...

It is unlikely that when you write this

$("#history").css("display", "none")
$("#description").css("display", "none")
$("#category").css("display", "none")
$("#contact").css("display", "none")

you said aloud, remove history, remove description, remove categories, and remove contacts. Most likely, you said, remove history, description, category, and contacts. So you need to write this:

$("#history, #description, #category, #contact").hide()
Do not forget that jQuery likes you, and it has things like .hide () and .show ().

2. mouseenter / mouseleave VS mouseover / mouseout


Sometimes, you may notice blinking when you hang on the item a pair of events like mouseover / mouseout to display a popup tooltip. It happens because inside of the item is another item. When you point the mouse cursor over it a browser generates for your external item mouseout event, and for an internal mouseover event, and then again for external mouseover, which leads to blinking.

But jQuery likes us and offers us another couple of events, namely, mouseenter / mouseleave, which solve this problem as follows. A certain wrapper is made the handlers. At a time, when the cursor moves to the inner item, mouseout event is generated for the external item. The wrapper function checks the event.relatedTarget, and if it is located inside of the inner item, it does not call the mouseleave handler, and no blinking.

Also, you need to remember about the function .hover (handlerIn, handlerOut), which takes two handlers and hangs them as mouseenter and mouseleave:

$(selector).hover(function() {
tooltip.show()
}, function() {
tolltip.hide()
})

3. .parent() VS .closest()


Often I come across this function:

var person = $(".name").parent().parent().parent()
More advanced pro know that there is .parentsUntil(selector), which will return all parents to a specified one (excluding it). But still that is cumbersome:

var person = $(".name").parentsUntil(".person").last().parent()
But there's an obvious way:

var person = $(".name").closest(".person ")

This option is more suitable by its clarity and brevity.

4. $.ajax() - Less is better!


We all like AJAX, especially $.ajax(). How much do you like it?
Let me give you a couple of my examples ...

I hardly lie if I say that you often use AJAX to the same file, giving different commands. Let us slightly simplify our life as jQuery likes us:

$.ajaxSetup({
dataType: "json",
url: "ajax.php",
data: {
user_id: userId
}
});

Now we do not have to specify every time these parameters in queries, that would be enough:

$.ajax({
data: {
product_id: productId
},
success: function(json) {
console.log(json)
},
alert: "Product download ..." // Why? See below
})

Please, note that the parameters of data $.ajaxSetup and $.ajax stick together, and the server is sent their sum.

5. $.ajax() - Notify a user


So ... now can we notify the user about details and give the user messages at AJAX queries? I'm sure you thought about it, but you avoided that due to the fact that you must often write the same thing over.

For example, let’s do like this:

<div id="popup" class="at a center-bold red"></div>
Then we link it to our queries:

$("#popup").ajaxSend(function(event, xhr, options) {
$(this).text(options.alert ||
"Wait ...").show()
}).ajaxStop(function() {
$(this).fadeOut("fast")
})
.ajaxSend() calls the handler every time when there is AJAX query.

.ajaxStop() is called at the end, after all AJAX queries are handled.

If you want to give a new message each time separately in popup, you have to change quite a bit the code:

$("body").ajaxSend(function(event, xhr, options) {
$('<div class="popup" />')
.appendTo(this)
.css({/* location */})
.text(options.alert || "Wait...")
.delay(2000) // remove in 2 seconds
.fadeOut("fast", function() {
$(this).remove()
})
})

6. $.ajax() - Notify the code


Let's take a look at our popup from the other side. Suppose one person is the developer of a complex widget, which displays information about the current events in the page. And the other person develops the business logic and implements AJAX queries. Obviously, the need for the widget could arise after a lot of AJAX queries had been written. If we would like our code and our future colleagues, as well as jQuery likes us, then we could have predicted the need for other code, and we would do like this:

$.ajax({
data: {
action: "search-name",
name: $("#name").val()
},
beforeSend: function() {
$(searchForm).trigger("start.search")
},
complete: function() {
$(searchForm).trigger("finish.search")
}
})

We have to write (in the comments) that anyone can get events, such as start.search and finish.search:

$(searchForm)
.on("start.search", function() {
// Show the spinning preloader
})
.on("finish.search", function() {
// Remove the spinning preloader
})
After all, we can create our own event types, generate and subscribe to them. It's simple! :) jQuery likes us.
Papay 24 may 2014, 15:43
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute