javascript - jQuery Serialize? -

original post:

i have following script serializes nicely.

jquery/ajax generated html

<ul class="my_list">     <li class="list_item_1"><a href="link1.html">link1</a></li>     <li class="list_item_2"><a href="link2.html">link2</a></li>     <li class="list_item_3"><a href="link3.html">link3</a></li>     <li class="list_item_4"><a href="link4.html">link4</a></li>     <li class="list_item_5"><a href="link5.html">link5</a></li> </ul>

jquery:

$(".my_list").sortable(     {update:function(){          alert($(this).sortable("serialize"));     } });

is possible similar thing anchor tags url , text?

i.e. along lines of:

$(".my_list").sortable(     {update:function(){          alert($(this).sortable("serialize"));          alert($("detect_anchor_tag_in_li").serialize_url)); // anchorurl_1=link1.html&anchorurl_2=link2.html , on          alert($("detect_anchor_tag_in_li").serialize_text)); // anchortext_1=link1&anchor_2=link2 , on     } });

updated post 1:

the following return "undefined" elt.text.

    <script>         $( document ).ready( function() {              $(".my_list").sortable(                 {axis:"y"},                 {update:function(){                      alert($(this).sortable("serialize",{key:'widget_id'}));                      $.map($(".my_list a"), function(elt, index) {                          alert("url=" + elt.href + " txt=" + elt.text);                      });                  }             });         });     </script>

updated post 2:

the following works, best way go doing this?

<!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>sortable basic</title>          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>          <script>             $( document ).ready( function() {                  var urls = "";                  var texts = "";                   $("#mylist").sortable(                     {axis: "y"},                     {update:function(){                          $.map($("#mylist a"), function(elt) {                              urls += "url=" + elt.href + "&";                             texts += "text=" + $(elt).html() + "&";                          });                           alert($(this).sortable("serialize",{key:'item'}));                         alert(urls.substr(0,urls.length - 1));                         alert(texts.substr(0,texts.length - 1));                     }                 });             });         </script>     </head>      <body>         <ul id="mylist">             <li id="item_4"><a href="http://www.google.com">google</a></li>             <li id="item_9"><a href="http://www.yahoo.com">yahoo</a></li>             <li id="item_2"><a href="http://www.bing.com">bing</a></li>             <li id="item_5"><a href="http://www.youtube.com">youtube</a></li>             <li id="item_8"><a href="http://www.ebay.com">ebay</a></li>         </ul>     </body> </html>

you can use map function change array of results another. join '&' , voila!

$.map(     $(".my_list a")     , function(elt, index) {         return "anchorurl_" + index + "=" + elt.href     }).join("&");   $.map(     $(".my_list a")     , function(elt, index) {         return "anchortext_" + index + "=" + elt.text     }).join("&");

it's working, may want keep $(".my_list a") array reuse in next calls (even though shouldn't expensive list)

edit add: can in fact lots of interesting things map function. return array of data objects built links data?

$.map(         $(".my_list a")         , function(elt, index) {             return {anchor: elt.href, text: elt.text };         });

or array of arrays

$.map(         $(".my_list a")         , function(elt, index) {             return [[elt.href, elt.text]];         });

so, basically, think map highly recommended in case :)

edit ie8 specific problem

i tried this, , works on firefox 3.6

<ul id="listing">     <li class="list_item_1"><a href="link1.html">link1</a></li>     <li class="list_item_2"><a href="link2.html">link2</a></li>     <li class="list_item_3"><a href="link3.html">link3</a></li>     <li class="list_item_4"><a href="link4.html">link4</a></li>     <li class="list_item_5"><a href="link5.html">link5</a></li> </ul>     <script type="text/javascript">        $(document).ready(function() {        $("#listing").sortable(             { update: function(event, ui) {                 $.map($("#listing a"), function(elt, index) {                                    alert("url=" + elt.href + " txt=" + elt.text);                                });             }});        });    </script>

you can try $(this).text() or $(elt).html() (the first 1 should better), had work on both browsers. i'm not fluent development tools ie8 i'd recommend find documentation read determining properties of object. w3schools doesnt give text attribute tag, should have checked first...

<script type="text/javascript">        $(document).ready(function() {        $("#listing").sortable(             { update: function(event, ui) {                 $.map($("#listing a"), function(elt, index) {                     alert("url=" + elt.href + " txt=" + $(elt).text());                 });             }});        });    </script>

the last edit, make things "perfect" reuse method, list, change map selection $.map($("#listing a")... $.map($("a", event.target).... way, doin't have worry id being repeated in function body.

Search This Blog

shell