jquery ajax

pecifying the Data Type for AJAX Requests
Ajax Event
jquery ajax api
<br />$.ajax({<br /> url: "data.xml",<br /> //判斷是不是IE<br /> dataType: ($.browser.msie) ? "text" : "xml",<br /> success: function(data){<br /> var xml;<br /> //typeof 判斷形別<br /> if (typeof data == "string") {<br /> xml = new ActiveXObject("Microsoft.XMLDOM");<br /> xml.async = false;<br /> xml.loadXML(data);<br /> } else {<br /> xml = data;<br /> }<br /> // Returned data available in object "xml"<br /> }<br /> }); <br /><br /><br />$.ajax({<br /> type: "POST",<br /> url: "some.php",<br /> //data: {name: 'john', location= 'Boston'}<br /> data: "name=John&location=Boston",<br /> success: function(msg){<br /> alert( "Data Saved: " + msg );<br /> }<br /> });<br /><br />//responseText 直接拿回傳的string<br /> var html = $.ajax({<br /> url: "some.php",<br /> async: false<br /> }).responseText;<br /><br />//processData 要注意<br /> var xmlDocument = [create xml document];<br /> $.ajax({<br /> url: "page.php",<br /> processData: false,<br /> data: xmlDocument,<br /> success: handleResponse<br /> });<br /><br />
注意一下的參數
cache
Added in jQuery 1.2, if set to false it will force the pages that you request to not be cached by the browser.

complete
A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string describing the type of success of the request.

<br /> $.ajax({<br /> beforeSend: function(){<br /> // Handle the beforeSend event<br /> },<br /> complete: function(){<br /> // Handle the complete event<br /> }<br /> // ...<br /> });<br />

contentType
When sending data to the server, use this content-type. Default is "application/x-www-form-urlencoded", which is fine for most cases.

data
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2'.

processData
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send DOMDocuments, or other non-processed data, set this option to false.

password
A password to be used in response to an HTTP access authentication request.

username
A username to be used in response to an HTTP access authentication request.

jquery parse xml

jquery makes parsing xml easy
<br /> $(request.responseXML).find("marker").each(function() {<br /> var marker = $(this);<br /> var point = {<br /> marker.attr("lat"),<br /> marker.attr("lng")<br /> };<br /> });<br />

jquery parse xml

jquery makes parsing xml easy
<br /> $(request.responseXML).find("marker").each(function() {<br /> var marker = $(this);<br /> var point = {<br /> marker.attr("lat"),<br /> marker.attr("lng")<br /> };<br /> });<br />

using jquery in rails,jquery, rails,form,reset,escape,fn,plugin

jquery railscast
The jSkinny on jQuery
Myth #3: Rails forces you to use Prototype
jquery post
<br />$.post(url, data, callback, type) <br /><br />This is an easy way to send a simple POST request to a server without having to use the <br />more complex $.ajax function. It allows a single callback function to be specified that will <br />be executed when the request is complete (and only if the response has a successful <br />response code). The returned data format can be specified by the fourth paramater. If you <br />need to have both error and success callbacks, you may want to use $.ajax. $.post is a <br />(simplified) wrapper function for $.ajax.<br />
<br />//那要怎樣告訴controller 我們的format 是js勒 有兩種方法, 方法一<br /> $(document).ready(function(){<br /> $("#new_forum_comment form").submit(function(){<br /> $.post($(this).attr("action")+'.js', $(this).serialize(), null, "script");<br /> return false;<br /> })<br /> })
ajaxSetup
<br />//第二種就是在發出ajax 前 把header 設一設<br />//ajaxSetup: Setup global settings for AJAX requests.<br />jQuery.ajaxSetup({ <br /> 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}<br />})<br /><br /> $(document).ready(function(){<br /> $("#new_forum_comment form").submit(function(){<br /> $.post($(this).attr("action"), $(this).serialize(), null, "script");<br /> return false;<br /> })<br /> }) <br />#comment controller<br /> def create<br /> @forum = params[:model].constantize.find(params[:id])<br /> params[:comments][:user_id] = @me.id<br /> if @forum.comments.create(params[:comments]) && @forum.is_a?(Forum)<br /> @forum.last_comment_time = @forum.comments.last.created_at<br /> @forum.save<br /> end<br /> <br /> @comment = @forum.comments.last<br /><br /> respond_to do |format|<br /> format.html {redirect_to :back}<br /> format.js<br /> end<br /> end
escape_javascript
form reset
<br />#create.js.erb<br />#rjs 是 prototype在用的, 這邊是jquery 所以不能用<br />#記得把 form reset 清空<br />$("#comments_list").append("<%= escape_javascript(render :partial => 'shared/comments', :locals => {:comment =>@comment })%>");<br />$("#new_forum_comment form")[0].reset();
jquery fn
<br />jQuery.fn.submitWithAjax = function() {<br /> this.submit(function() {<br /> $.post(this.action, $(this).serialize(), null, "script");<br /> return false;<br /> })<br />};<br /><br /> $(document).ready(function(){<br /> $("#new_forum_comment form").submitWithAjax();<br /> })

using jquery in rails,jquery, rails,form,reset,escape,fn,plugin

jquery railscast
The jSkinny on jQuery
Myth #3: Rails forces you to use Prototype
jquery post
<br />$.post(url, data, callback, type) <br /><br />This is an easy way to send a simple POST request to a server without having to use the <br />more complex $.ajax function. It allows a single callback function to be specified that will <br />be executed when the request is complete (and only if the response has a successful <br />response code). The returned data format can be specified by the fourth paramater. If you <br />need to have both error and success callbacks, you may want to use $.ajax. $.post is a <br />(simplified) wrapper function for $.ajax.<br />
<br />//那要怎樣告訴controller 我們的format 是js勒 有兩種方法, 方法一<br /> $(document).ready(function(){<br /> $("#new_forum_comment form").submit(function(){<br /> $.post($(this).attr("action")+'.js', $(this).serialize(), null, "script");<br /> return false;<br /> })<br /> })
ajaxSetup
<br />//第二種就是在發出ajax 前 把header 設一設<br />//ajaxSetup: Setup global settings for AJAX requests.<br />jQuery.ajaxSetup({ <br /> 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}<br />})<br /><br /> $(document).ready(function(){<br /> $("#new_forum_comment form").submit(function(){<br /> $.post($(this).attr("action"), $(this).serialize(), null, "script");<br /> return false;<br /> })<br /> }) <br />#comment controller<br /> def create<br /> @forum = params[:model].constantize.find(params[:id])<br /> params[:comments][:user_id] = @me.id<br /> if @forum.comments.create(params[:comments]) && @forum.is_a?(Forum)<br /> @forum.last_comment_time = @forum.comments.last.created_at<br /> @forum.save<br /> end<br /> <br /> @comment = @forum.comments.last<br /><br /> respond_to do |format|<br /> format.html {redirect_to :back}<br /> format.js<br /> end<br /> end
escape_javascript
form reset
<br />#create.js.erb<br />#rjs 是 prototype在用的, 這邊是jquery 所以不能用<br />#記得把 form reset 清空<br />$("#comments_list").append("<%= escape_javascript(render :partial => 'shared/comments', :locals => {:comment =>@comment })%>");<br />$("#new_forum_comment form")[0].reset();
jquery fn
<br />jQuery.fn.submitWithAjax = function() {<br /> this.submit(function() {<br /> $.post(this.action, $(this).serialize(), null, "script");<br /> return false;<br /> })<br />};<br /><br /> $(document).ready(function(){<br /> $("#new_forum_comment form").submitWithAjax();<br /> })

jquery,keypress,enter,keycode

        $('.serchStockInput').keypress(function (e) {
          if(e.keyCode == 13) {
            track();
            return false;
          }
        });

ie6 z-index jquery bgiframe

http://jsgears.com/thread-74-1-1.html
http://plugins.jquery.com/project/bgiframe

$.each

This function is not the same as $().each() - which is used to iterate, exclusively, over a jQuery object. This function can be used to iterate over anything.

The callback has two arguments:the key (objects) or index (arrays) as the first, and the value as the second.

If you wish to break the each() loop at a particular iteration you can do so by making your function return false. Other return values are ignored.

    var arr = [ "one", "two", "three", "four", "five" ];
    var obj = { one:1, two:2, three:3, four:4, five:5 };

    jQuery.each(arr, function() {
      $("#" + this).text("My id is " + this + ".");
      return (this != "four"); // will stop running to skip "five"
    });

    jQuery.each(obj, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
    });

My id is one. - 1
My id is two. - 2
My id is three. - 3
My id is four. - 4
- 5


#Iterates over items in an array, accessing both the current item and its index.

 $.each( [0,1,2], function(i, n){
   alert( "Item #" + i + ": " + n );
 });


#Iterates over the properties in an object, accessing both the current item and its key.

$.each( { name: "John", lang: "JS" }, function(i, n){
   alert( "Name: " + i + ", Value: " + n );
 });

jquery each find what is different

[html]
<div id="'test'">
 <span id="'each'">(click here to change)</span>
 <ul>
   <li class="cc">Eat</li>
   <li class="cc">Sleep</li>
   <li class="bb">Be merry</li>
 </ul>
</div>

[script 1]
    $("#test span").click(function () {
          if ($("#test").find('li')) {
          alert($(this).html());
        }
      });
$(this) is $(#test span)
[script 2]
    $("#test span").click(function () {
          if ($("#test li")) {
          alert($(this).html());
        }
      });

$(this) is $(#test span)


[script 3]
      $("#test span").click(function () {
        $("#test li").each(function(i, e){
          alert($(this).html());
        }
      });

$(this) is really every li tag
i is the iterator counter
e == $(this)


Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).

jquery tab

http://docs.jquery.com/UI/Tabs
http://stilbuero.de/jquery/tabs_3/

filter, find

http://manalang.com/jquery/docs/index.html#filter-expr
http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links

      $(document).ready(function() {
        $('#extlinks a').filter(function() {
          return this.hostname && this.hostname !== location.hostname;
        }).after(' <img src="/images/external.png" alt="external link">');
      });

filter 可以塞function來parse, return true 才會跑後面的after

cycle 跑馬燈

http://malsup.com/jquery/cycle/

Simple Effects Plugins

http://www.learningjquery.com/2008/02/simple-effects-plugins

Working with Events, part 2

http://www.learningjquery.com/2008/05/working-with-events-part-2
http://www.learningjquery.com/wp-content/themes/jquery/docs.php?fn=clone
http://www.learningjquery.com/2007/09/namespace-your-events
http://docs.jquery.com/Core/jQuery.fn.extend

$('#list3 li.special button').click(function() {
  var $parent = $(this).parent();
  $parent.clone().insertAfter($parent);
});

$('#list4 li.special button').click(function() {
  var $parent = $(this).parent();
 $parent.clone(true).append(' I\'m a clone!').insertAfter($parent);
});

clone(true)


Event Namespacing
     function addItemNS() {
       $('#list7 li.special button')
         .unbind('click.addit')
         .bind('click.addit', function() {
           var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
           $(this).parent().after($newLi);
           addItemNS();
       });
     }

     $(document).ready(function() {
       addItemNS();
       // non-rebinding click handler
       $('#list7 li.special button').click(function() {
         $(this).after(' pressed');
       });
     });


Unbind by Function Reference
     function addItemFinal() {
         var $newLi = $('&lt;li class="special"&gt;special and new &lt;button&gt;I am new&lt;/button&gt;&lt;/li&gt;');
         $(this).parent().after($newLi);
         $('#list8 li.special button')
           .unbind('click', addItemFinal)
           .bind('click', addItemFinal);
     }

     $(document).ready(function() {

     $('#list8 li.special button').bind('click', addItemFinal);
       // non-rebinding click handler
       $('#list8 li.special button').click(function() {
         $(this).after(' pressed');
       });
     });

Working with Events, part 1

http://www.learningjquery.com/2008/03/working-with-events-part-1
http://manalang.com/jquery/docs/index.html#insertAfter-expr
http://manalang.com/jquery/docs/index.html#parents
http://www.quirksmode.org/js/events_order.html

Event Delegation. With event delegation, we bind the event handler to a containing element that remains in the DOM and then check for the target of the event.

      $(document).ready(function() {
     $('#list1 li.special button').click(function() {
       var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
       $(this).parent().after($newLi);
     });
   });

   $(document).ready(function() {
     $('#list2').click(function(event) {
       var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
       var $tgt = $(event.target);
       if ($tgt.is('button'))
         $tgt.parent().after($newLi);
       }

       // next 2 lines show that you've clicked on the ul
       var bgc = $(this).css('backgroundColor');
       $(this).css({backgroundColor: bgc == '#ffcccc' || bgc == 'rgb(255, 204, 204)' ? '#ccccff' : '#ffcccc'});
     });
   });

parent(), after(), $(evnet.target), $(this), css()

可以用evnet.target 來取得被trigger的target, $(this)是整個$('#list2')  
 

Introduction to jQuery UI

http://www.learningjquery.com/2008/07/introduction-to-jquery-ui
http://docs.jquery.com/UI
http://ui.jquery.com/themeroller

jQuery tutorial, find and filter

http://www.learningjquery.com/2006/11/how-to-get-anything-you-want-part-1
http://www.learningjquery.com/2006/12/how-to-get-anything-you-want-part-2

filter will select a certain subset (zero or more) of the already 
selected elements.
find will select a set of (zero or more) elements that are descendants 
of the already selected elements.
Here is an example:
$('div').filter('.elephants'); // <-- selects the second div, because   it has class="elephants" 
$('div').find('.elephants'); // <-- selects the first paragraph,   because it has class="elephants" 
* Note that these two examples are very simple and would probably be 
better written as ...
$('div.elephants');
  ... and ...
$('div .elephants');



$('li + li > a[@href$=pdf]') gets all links ending in
“pdf” that are children of any list item that has another list item as
its previous sibling. It won’t get the first list item’s silly.pdf
because that list item has no other list items before it.

$('span:hidden') gets any span element that is hidden.

$('li:even') gets all odd-numbered list items (because, in javascript, numbering starts with 0, not 1).

$('li:lt(3)') gets the first 3 list items. “lt” stands for “less than,” and it starts counting at 0, not 1.

$('li:not(.goofy)') gets list items 1, 2, and 4, because they’re not “goofy.”
$('p a[@href*=#]') gets any links that are inside a paragraph and have an “href” attribute starting with “#” — containing “#” anywhere. in other words, same-page links. There are problems with trying to identify same-page links this way. I’ll write about this in an upcoming entry. Note the space between the “p” and the “a”; that means that the “a” is a descendant of the “p.”

JavaScript, prototype

http://blog.ericsk.org/archives/1089

var foo = {};
var bar = function() {};  // 也可以 function Bar() {};

if (foo instanceof Object) {
  alert('Yes, foo is an Object instance');
}

if (bar instanceof Function) {
  alert('Yes, bar is a Function instance');
} 
var foo = {
  x: 100,
  y: 200,
  f: function() {
    ....
  }
};
 如此一來你可以 foo.x, foo.y 或是 foo.f() 來操作

即使先用 new 生出 Function 的實體，之後再對該 Function 做 prototype 的新定義，被生出來的實體一樣會採用新的 prototype 定義。也就是對每一個實體而言，它綁住的是一個 prototype 而不是一個 class。 

jQuery attribute

[] 裡面可以直接塞attribute 去找element

$('input[name="msg[to_user_id]"]').val(id);
<input id="msg[to_user_id]" type="hidden" value="1" name="msg[to_user_id]"/>

form submit input

form submit時 哪些值才會被當作需要的參數傳到server勒？

只有用input tag 的才會被傳到server, 所以當有需要的參數就要放在input裡, 有些時候就需要自己建
$('div.hide-input').append("<input type=text value="+index+" name=item["+index+"][order] id=item["+index+"][order] />");

而且name id 兩個attribute缺一不可