0

I want to have a "sendemail" button for each element in the table, once the user clicks on this there should be a pop up with a form inside and a button. I tried using jquery for the popup but it is not working, can someone please tell me what I am doing wrong or suggest me any other way of creating this pop up. Currently I am using twitter bootstrap modal but want to replace that with a popup/popover

homepage.html

        <table id="search-results" class="table table-hover">
        </table>

    ajax.js

        $(function(){

            $('#searchtest').click(function() {

                $.ajax({
                    type: "POST",
                    url: "/searchtrips/",
                    data: {
                        'city' : $('#city').val(),
                        'location' : $('#location').val(),
                        'duration' : $('#duration').val(),
                        'search_text' : $('#searchtest').val(),
                        'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
                    },
                    success: searchSuccess,
                    dataType: 'html'
                });

            });

        });

        function searchSuccess(data, textStatus, jqXHR)
        {
            $('#search-results').html(data);
        }
search-results.html

{% for data in datas %}
<tr>
    <td>{{ data.score}}</td>
    <td>{{ data.distance}}</td>
    <td>{{ data.time}}</td>
    {%for element in data.place.elements%}
    <td>       
        {{element.placeName}}
    </td>
    {% endfor %}
    <td>
        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Share with your friends</h3>
            </div>
            <form action="{% url "send_mail"%}" class="form-horizontal" method="post">
            <div class="control-group">
                <label class="control-label" for="subject">Subject</label>
                <div class="controls">
                    <input type="text" name="subject" value="Your friend has shared a traverse trip" id="subject" placeholder="subject">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="email">Email</label>
                <div class="controls">
                    <input type="text" name="email" id="email" placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="message">Message</label>
                <div class="controls">
                    <input type="text" name="message" id ="message" placeholder="message" value ="Here we will have the link  ">
                </div>
            </div>
            <div class="modal-footer">
                {% csrf_token %}
                <input type="submit" value="email" class="btn btn-primary">
            </div>
            </form></div>
        <a href="#myModal" role="button" class="btn btn-mini" data-toggle="modal"><i class="icon-envelope"></i>SendEmail</a>
        <a href="{% url "add_trip" city=data.score score=data.score distance=data.distance|floatformat:"0" time=data.time %}"
        class ="btn btn-mini btn btn-warning">Add/delete</a>
    </td>
</tr>
{% endfor %}*
Mayank
  • 2,333
  • 3
  • 17
  • 23
  • your post request goes tout www.yourdomain.com/searchtrips/ ? shouldn't it be something Mike ...com/appname/searchtrips ? if that's notre the issue, could you please provide us your Django abd web browser logs ? – Ricola3D Aug 12 '13 at 07:10
  • what exactly isn't working? Is it a problem with django or the popup itself. Here you can see one solution to handle popup: http://stackoverflow.com/a/12128784/1566605 – mariodev Aug 12 '13 at 14:49
  • I have two pages, 1. Homepage and 2, searchresults page All my jquery and javascripts are imported in the homepage. The home page has a table which us populated with searchresults. Now, when I implement bootstrap popover in the home page it works fine, but if copy the same code to the search results page it does not work. I see the button but on hovering or clicking nothing happens. Am i missing some part where both the javascript and the element should be loaded at the same time ? I am referring to this simple popover tutorial http://www.w3resource.com/twitter-bootstrap/popover-tutorial.php – Mayank Aug 12 '13 at 22:33

0 Answers0