Элементы Jquery, которые извлекаются из базы данных и отправляют форму по электронной почте - PullRequest
Новая
       21

Элементы Jquery, которые извлекаются из базы данных и отправляют форму по электронной почте

1 голос
/ 28 марта 2012

OK.Я постараюсь быть максимально ясным и дам свой исходный код, чтобы попытаться помочь с тем, что я спрашиваю.

Итак, у меня есть эти перетаскиваемые элементы, которые перетаскиваются через базу данных, которые перетаскиваются из одной области в область сброса/ сортируемая область.Они предназначены для сбора там, чтобы значения могли быть позже отправлены (отправлены мне и пользователю по электронной почте).Я пытаюсь выяснить, как именно код должен быть написан в формах, так что я уверен, что он будет поднят после того, как будет отсортирована область сброса для отправки по электронной почте.

здесьмой код для справки (аспект формы отправки не был реализован в любом случае, только заполнитель прямо сейчас): 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>

РЕДАКТИРОВАТЬ: хорошо, я думаю, я понимаю, что вы говорите, но я не уверен, что понимаю метод get в JQuery.Я пытался заставить его работать, когда я отправляю форму, но мне кажется, что я все обманываю: 

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

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

1 Ответ

0 голосов
/ 29 марта 2012

С помощью jQuery вы можете перебирать .each() элементы вашей пунктирной рамки, что-то вроде этого: 

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

Затем вы должны создать массив с идентификаторами ваших объектов и отправить их. С помощью PHP вы можете отправить эти идентификаторы по электронной почте.

EDIT В PHP, когда вы создаете элементы li, вы должны сделать: 

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

Я полагаю, sku является первичным ключом вашей таблицы. Если нет, свойство id должно отражать ваш первичный ключ

...