從數據庫中提取併發送給電子郵件的Jquery元素

好的。我會努力盡可能清楚，並給我的源代碼來嘗試幫助我所要求的。從數據庫中提取併發送給電子郵件的Jquery元素

所以我有這些可拖動的元素，這些元素是通過從一個區域拖動到可拖放/可排序區域的數據庫來拖動的。他們的目的是收集在那裏，以便他們以後可以提交的價值（通過電子郵件發送給我和用戶）。我試圖弄清楚代碼應該如何寫入表單中，這樣我才能確定它在將可投放區域排序後發送給電子郵件。

這裏是我的參考（發送形式方面已經無論如何也不能只是一個佔位符中實現現在）代碼： 的jsfiddle：http://jsfiddle.net/Matuduke/Y86As/

<style> 

    .tooltip { position:fixed; top: 0;left: 0;z-index: 3; display: none;} 

    #send {float:left; position:relative; } 
    #column_en { float:inherit;} 
    #webwall { float:left; width:48%; padding: 3px; max-height:340px; min-height:340px; } 
    #collectborder { float:left; width:50%; min-height:340px; padding: 0px; } 


    #staticwall li {cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important; list-style-type: none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size:x-small; text-align: center; } 

    #collection { list-style-type:none; min-height:340px; float:left; min-width:500px; border:dashed;background:#fff; height:30%; padding: .5% ; } * html #collecton { height: 0em; } 
    #collection li { list-style-type:none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size: 1em; text-align: center;} 


    </style> 
<script> 
    $(function() { 
     var removeIntent = false; 
    $("#collection").sortable({ 
    over: function() { 
      removeIntent = false; 
     }, 
     out: function() { 
      removeIntent = true; 
     }, 
     beforeStop: function (event, ui) { 
      if(removeIntent == true){ 
       ui.item.remove(); 
        } 
       } 
     }); 
     $("#collection").disableSelection(); 
      }); 

     $(document).ready(function() { 
     var source; 
     var destination; 
     var fn = function(event, ui) { 
      toDrop = $(ui.draggable).clone(); 
      if ($("#collection").find("li[uIdentity=" + toDrop.attr("uIdentity") + "]").length >= 0) { 
       $("#collection").prepend(toDrop); 
      } 
      else 
       return false; 
     }; 
     $("#staticwall li, #collection li").draggable({ 
      helper: 'clone', 
      hoverClass: "ui-state-default" 
     }); 

     $("#collection").droppable({ 
      accept: "#staticwall li" , 
      drop: fn 
        }); 
       }); 
      $("#staticwall li").setPos('0,0'); 
      $('#staticwall').tinyscrollbar(); 
     $(function() { 

     $("#collection li").draggable({ 
      revert: true 
        }); 
        }); 
     </script> 
     </head> 
     <body>  
     <div id="column_en"> 
     <div id="webwall"> 
      Choose the pieces to add to your collection: 
    <ul style="overflow:auto;height:300px;animation-timing-function:ease-in-out;" id="staticwall" class="ui-state-default"> 

     <?php 
     mysql_connect('localhost','user,'pass'); 
     mysql_select_db("houstop9_Spiritiles"); 
     $result = mysql_query("SELECT thumb, title, quote, sku FROM spiritiles ORDER BY `spiritiles`.`sku` DESC LIMIT 0, 120"); 

     // print the list items 
      while ($row = mysql_fetch_array($result)) { 
      echo "<li uIdentity='1' class='ui-state-default'>{$row['thumb']}\n {$row['sku']}</li>"; 

       } 
       ?> 

     </ul> 
      </div> 


     <div>Create your Collection here: </div> 
     <div id="collectborder" > 
     <ul id="collection" class="ui-state-default"> 
      </ul> 
      <div id="send"><form> 
      <input type="text" accept=""> 
      <input type="image" accept=""> 

       <input type='submit' name='submit' value='Send Tiles'></form> 
      </div> 

      </div> 
      </div> 

      </body>

編輯： 確定我覺得我得到你在說什麼，但我不確定我是否理解JQuery中的get方法。我一直在試圖使它運行時，我提交表單，但我覺得我捏造了這一切：

 function getSku() 
     var myIds = new array(); 
     $("#collection li").each(function(index, element){ 
      getSelection(index + ': ' + $(this).text()); 
      myIds.push(element.id); 

      }); 
     } 
     $("form").submit(getSku);

來源

2012-03-28 MirlyMir

不真的明白你想要做什麼。我在你的文章中添加了jsfiddle。 – MatuDuke 2012-03-28 18:09:44

好吧，對不起，不好意思。和thx添加jsfiddle。在「創建你的收藏」的那個虛線框中，我希望用戶放入該框的所有內容都可以通過電子郵件提交給我。不是對象本身，而是放入其中的每個對象的名稱。問題是我不能完全弄清楚如何做到這一點。尤其是因爲每個對象名稱和圖像都是從數據庫中提取的。 – MirlyMir 2012-03-29 16:12:22

使用jQuery你可以用你的虛線框，像這樣的.each()的元素：

var myIds = new array(); 
$("#collection li").each(function(index, element){ 
    // get ids 
    myIds.push(element.id); 
});

然後，你必須用你的對象的ID做一個數組，然後提交它們。使用PHP，您可以通過電子郵件發送這些ID。

編輯在PHP中，當你創建你所要做的li元素：

echo "<li uIdentity='1' class='ui-state-default' id='{$row['sku']}'>"; 
echo " {$row['thumb']}\n {$row['sku']}"; 
echo "</li>";

我asume的sku是你的表的主鍵。如果不是，id屬性應該反映您的主鍵

來源

2012-03-29 17:11:08 MatuDuke

嗯......有可能這些「Ids」可以是數據庫中的值，比如「sku數字」，還是我必須在jquery中處理文檔內的東西？我的意思是我有大約100個不同的元素被從數據庫中取出來製作「#staticwall li」，並且數據庫中的實際值會定期更改。我真的需要確保Ids反映數據庫中的特定條目。 – MirlyMir 2012-03-30 12:46:54

對不起，如果我正在混淆或不正確理解，並從數據庫的「sku號碼」我的意思像$ row {['sku']}。我想我需要更多的注意這個.get（）方法... – MirlyMir 2012-03-30 13:41:18

再次檢查我的解決方案（編輯部分）。如果'sku'是你的主鍵，你應該把它放在每個'li'元素的'id'屬性上。所以，當你迭代'li'元素時，你可以檢索你的id。 – MatuDuke 2012-03-30 15:35:48

從數據庫中提取併發送給電子郵件的Jquery元素

回答

相關問題