Ajax / Handlebars将4个帖子发送到ddbb而不是一个

时间:2014-06-04 20:43:33

标签: javascript jquery ruby-on-rails ajax handlebars.js

这太神秘了。我是Handlebars的新手,我在制作AJAX点击提交按钮时只有1个帖子方法,而不是4个。

解释:我有一个带有ajax的照片标记。但是当点击提交时,会向ddbb发送2个帖子。当我更新视图时,另外2个帖子是对ddbb完成的。 4个POST方法总共而不是1.

在我的节目视图中:

<% if @photo.user = current_user %>
<script> $("#tp_tag_save").click(function() {
        $.post("/users/<%= current_user.id %>/photos/<%= @photo.id %>/tags", {
            "tag[name]" : $("#tag_name").val(),
            "tag[location]" : $("#tag_location").val(),
            "tag[price]" : $("#tag_price").val(),
            "tag[coordinate_x]" : $("#tag_coordinate_x").val(),
            "tag[coordinate_y]" : $("#tag_coordinate_y").val()

        }).done(function (data) {
            drawTag($("#tag_name").val(), $("#tag_price").val(), $("#tag_location").val(), $("#tag_coordinate_x").val(), $("#tag_coordinate_y").val()),
            reDrawList();
        });
        modal("#tag_modal", "hide", 200);
    });
</script>
<% end %>

我的Javascript

    window.drawTag = function (name,price,location,coordinate_x,coordinate_y,tag_id) {
        var source   = $("#tag-template").html();
        var template = Handlebars.compile(source);
        var context = {price: price, name: name, location: location};
        var tag_type = 'text'
        var img_height = 0;
        var img_width = 0;
        tag = tag + 1;
        err = 1;
        var point = '<div class="point" id="tp_p_' + tag + '" style="left:' + coordinate_x + '%;top:' + coordinate_y + '%;"><div class="tp_circle" id="tp_circle_' + tag + '"></div><div class="tp_tooltip" id="tp_tp_' + tag + '"></div></div>';

        /* Comprobamos que si name, description, location y price son distintos de vacio, se pinten las cosas */

            if (name !== "" && location !== "" && price !== "") {
                $("#tp_end_result").append(point);
                $("#tp_circle_" + tag).append('<i class="icon-pin"></i>');
                $("#tp_tp_" + tag).prepend(template(context));
                $("#tp_r_" + tag).click( function () {
                });
                err = 0; 
                } else {  
                    display_err("Fill out required fields");  
                $("#mensaje").html();  
            }

            if (err == 0) {
                var height = parseInt($("#tp_tp_" + tag).height(), 10) + 17;
                var width = parseInt($("#tp_tp_" + tag).width(), 10) / 2 + 3;
                if (img_height !== 0) {
                    height = img_height + 57;
                    width = img_width / 2 + 3;
                    img_height = 0;
                    img_width = 0;
                }
                $("#tp_tp_" + tag).css({"margin-left":"38px", "margin-top":"-10px"});
            }

            // /* Make Circle hover effect when tooltip is on hover */
            //     $("#tp_tp_" + tag).mouseenter(function() {
            //     $("#tp_tooltip_" + tag).mouseover();
            //     $("#tp_circle_" + tag).mouseover();
            //     });      
}

我的车把模板

    <!--Handlebars template -->
<script id="entry-template" type="text/x-handlebars-template">
<li class="listnone border_bottom_grey semi_padding thin">
<div class="circle"><i class="icon-pin"></i></div>
<span class="grey bold inline quarter_padding_left">
{{name}}</span>
<span class="small right white article_price">{{price}}</span></br>
<span class="quarter_padding_top inline lightgrey small">
<i class="icon-location-2 indent20 small"> </i> {{location}}</span>
</li>
</script>

<script id="tag-template" type="text/x-handlebars-template">
<ul class="listnone">
<li>
<h1 class="mbig tk-proxima-nova">{{name}}</h1></li>
<li class="block left"><i class="icon-location-2"></i> {{location}} </li>
<li><span class="small block bold right white article_price">{{price}}<span class="small">€</span></span></li>
</ul>
</script>

重绘列表功能

 function reDrawList (){
    var source   = $("#entry-template").html();
    var template = Handlebars.compile(source);
    var context = {price: $("#tag_price").val() + "€", name: $("#tag_name").val(), location: $("#tag_location").val()};
    $( ".scrollable" ).prepend(template(context));
    $(".tag_ad").hide();
};

0 个答案:

没有答案