0

I have 3 options on my page: breakfast, lunch and dinner. When you hover over them there's a request button to select a meal. This brings up a modal form that lets people choose different meals in a form.

I would like to add the meal IN ADDITION to the meal type. The only way I can find out the meal type though is if I somehow pass this information to 1) the modal dialog and 2) the submit button there.

How would I do these two things?

Relevant Code:

Template

        <div class="row-fluid">
            <div class="span12 hero-unit">
                <div class="row-fluid">
                       <h3> What Type of Meal Is It- Breakfast Lunch or Dinner? </h3>
                    </p>
                    <br>
                </div>
                <div class="row-fluid align-center">
                    <div class="span4">
                        <div>
                            <div class="library-image-parent">
                                <img src="{{ STATIC_URL }}images/breakfast.png"
                                width="200" height="160" alt="1" />
                                <div class="options">
                                    <ul class="unstyled" style="font-size:16px;">
                                 <div class="span11" style="text-align:center;">
                                        <a href="#myModal" role="button" class="btn btn-success" data-toggle="modal">Request A Meal</a>
                                                                        </div>
                            </div>
                        </div>
</div>

                    </div>

Modal Form for Making a Meal Request

<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">Select Your Meal to Make a Request</h3>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" method="POST" action="" class="uniForm">
    <fieldset class="inlineLabels">
        {% csrf_token %}
        <h6> Meal </h6>
        <br>
        {{ formtoaddrequest.meal }}
        <br>
                    <div class="form_block" style="float:right;">
                        <input class="btn btn-primary" type="submit" value="{% trans 'Add Request' %}">
                    </div>
    </fieldset>
</form>
</div>
</div>

1 Answer 1

0

From what I understand you would like to dynamically add the meals to your form dialogue. This would require you to use javascript to add the meals to your page so that the user can select the meals. Once the user has selected Breakfast, Lunch or Dinner you will need to make an Ajax call to return the meals the meals that can be selected under the chosen menu. Menu in this case referring to Breakfast menu, Lunch menu or Dinner menu.

4
  • Any chance you could show some code on how to do this? Sorry noob here. Dec 17, 2012 at 17:00
  • Nevermind, I figured it out. I passed the variable using javascript, then I added a hidden input to pass the variable to my view which i picked up using request.POST.get Dec 17, 2012 at 19:28
  • I'm sorry I cannot show you however here are to places where you could start looking docs.djangoproject.com/en/dev/topics/serialization and dajaxproject.com. You will be required to do some javascript and it is up to you to implement in the way you feel is best. Dec 18, 2012 at 18:37
  • 1
    It's ok! I figured it out. I'll post my code up here when I get a chance. Dec 20, 2012 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.