Monday, March 30, 2015

Re: Help with Dynamically Adding Forms to Formset!!

Sounds like a stupid question, but are you 100% sure that this is resolving correctly?

<script src="{{ STATIC_URL }}js/jquery.formset.js" type="text/javascript"></script>

You can check by monitoring the network tab when you go to inspect element in a chrome browser (or whatever the firefox equivalent is). When you refresh the page, it will tell you if that file is found or not.

If it's found, then I might be stumped, or it might be some kind of import issue with the base jquery file or a conflict.

If it's not found, you'll have to troubleshoot the issue related to pointing to the correct source location.

Bill



On Mon, Mar 30, 2015 at 9:54 PM, Stephanie Socias <stephsocias@gmail.com> wrote:
Sorry to ask here again but I still can't get the imports right for some reason. I get the error:

TypeError: $(...).formset is not a function
$('.authorFormset').formset({



I have this in the head of my base.html:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.formset.js" type="text/javascript"></script>



And then my homepage.html:

{% load crispy_forms_tags %}

<script type="text/javascript">
    $(function() {
        $('.authorFormset').formset({
            prefix: '{{ formset.prefix }}',
            addText: 'Add Author',
            deleteText: 'Remove Author',
        })
    })
</script>

<form action="{% url 'data:register' %}" method="post" enctype="multipart/form-data">


  <div class="container">
    <div class="row" style="margin-top: 30px">
      <div class="col-md-10 col-md-offset-1">
        {{ dataset_form.media }}
        {% crispy dataset_form %}
        {% crispy facility_form %}
        {% crispy contact_form %}
       
        <div class="authorFormset">
        {% for form in formset.forms %}
            <div class="formset">
                <div id="{{ form.prefix }}-row">
                    <div class="col-md-2">
                        <div class="row">
                            {{ form.first_name }}
                        </div>
                        <div class="row">
                            {{ form.last_name }}
                        </div>
                    </div>
                    <div class="col-md-4 col-md-offset-1">
                        <div class="row">
                            {{ form.email }}
                        </div>
                        <div class="row">
                            {{ form.role }}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
        {{ formset.management_form }}
        <br><br>
    </div>
  
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <a role="button" class="btn btn-lg btn-default" href="{% url 'data:data_home' %}">Cancel</a>
        <input type="submit" class="btn btn-lg btn-success pull-right" value="Proceed to Data Upload">
      </div>
    </div>
  </div>
</form>



On Mon, Mar 30, 2015 at 8:38 PM, Bill Blanchard <bill.blanchard@gmail.com> wrote:
You could have an import error somewhere/somehow with the jquery.formset.js file.  Also, you might need to import the jquery library in your application (I import mine in my base template, so that might be why I forgot about it).

On Mon, Mar 30, 2015 at 8:33 PM, Stephanie Socias <stephsocias@gmail.com> wrote:
Thank you, Bill! I'm getting a TypeError that $(...).formset is not a function
I'll see what's up!

On Mon, Mar 30, 2015 at 8:29 PM, Bill Blanchard <bill.blanchard@gmail.com> wrote:
Hi Stephanie,
You have two jQuery selectors in your formset function and I'm not sure if that will cause an issue or not.  Also, I don't think you need to use an id in the div tag (that was probably left over from when I was bashing my head against this).  Try naming the outer div class something not "formset" since you'll get two selections based on the classes you're using.  Try this:
...
$(function() {
        $('.authorFormset').formset({
....
<div class="authorFormset">
        {% for form in formset.forms %}
            <div class="formset">
                <div id="{{ form.prefix }}-row">
                    <div class="col-md-2">

...

Also, try looking at the javascript console in your browser to see if you get any error messages.  Hope this helps!

Bill

On Mon, Mar 30, 2015 at 8:19 PM, Stephanie Socias <stephsocias@gmail.com> wrote:
Thank you, Bill. That was silly of me. I'm just confused on where/how those actual links are displayed. I can't get them to show...


{% load crispy_forms_tags %}
<script src="{{ STATIC_URL }}js/addAuthor.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/jquery.formset.js"></script>
<script type="text/javascript">
    $(function() {
        $('#authorFormset .formset').formset({
            prefix: '{{ formset.prefix }}',
            addText: 'Add Author',
            deleteText: 'Remove Author',
        })
    })
</script>

<form action="{% url 'data:register' %}" method="post" enctype="multipart/form-data">


  <div class="container">
    <div class="row" style="margin-top: 30px">
      <div class="col-md-10 col-md-offset-1">
        {{ dataset_form.media }}
        {% crispy dataset_form %}
        {% crispy facility_form %}
        {% crispy contact_form %}
       
        <div id="authorFormset" class="formset">
        {% for form in formset.forms %}
            <div class="formset">
                <div id="{{ form.prefix }}-row">
                    <div class="col-md-2">
                        <div class="row">
                            {{ form.first_name }}
                        </div>
                        <div class="row">
                            {{ form.last_name }}
                        </div>
                    </div>
                    <div class="col-md-4 col-md-offset-1">
                        <div class="row">
                            {{ form.email }}
                        </div>
                        <div class="row">
                            {{ form.role }}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
        {{ formset.management_form }}
        <br><br>
    </div>
  
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <a role="button" class="btn btn-lg btn-default" href="{% url 'data:data_home' %}">Cancel</a>
        <input type="submit" class="btn btn-lg btn-success pull-right" value="Proceed to Data Upload">
      </div>
    </div>
  </div>
</form>

On Mon, Mar 30, 2015 at 6:31 PM, Bill Blanchard <bill.blanchard@gmail.com> wrote:

Hi Stephanie,
The addText and deleteText variables are the hyperlink text that is displayed on the page.

You can remove them or modify accordingly. I believe the default values are Add Form and Remove Form if you do not explicitly declare them in the javascript function.

On Mar 30, 2015 6:03 PM, "Stephanie Socias" <stephsocias@gmail.com> wrote:
Thank you all SO much for your advice. Even just hearing that this is a complicated problem and that it's not just me, really helps.

I will post my code shortly. I'm now trying to incorporate some of your feedback.

Bill,
How do I set/use the 'addText' and 'deleteText' variables from the script in the template? That is probably a really dumb question but I have just about zero experience with javascript/jquery.

Thank you!
Stephanie

On Mon, Mar 30, 2015 at 5:18 PM, Carl Meyer <carl@oddbird.net> wrote:
Hi Stephanie,

On 03/30/2015 02:37 PM, Stephanie Socias wrote:
> I'm having trouble creating a formset where I can dynamically add and
> delete items. I've tried many different approaches and can't get
> anything to work. I'm new to Django and have been at this for days. Can
> someone please help me!? I can send my code, post it, or do a screen
> share. Please let me know!! Any help would be greatly appreciated.

I'm afraid I don't have time in my day for a screen-share, but I'd be
happy to try to help, if you can link to a gist or paste showing your
current best effort, and explaining how it is not working.

FWIW, I've usually used this library for the JavaScript side of things:
https://github.com/jgerigmeyer/jquery-django-superformset

If you'd find real-time assistance more helpful, you could visit the
#django channel on FreeNode IRC; I and others are available to help out
there.

This is a challenging task you've tackled, even for experienced Django
developers, so it's not surprising that it's taking some time if you're
new to Django.

Carl

--
You received this message because you are subscribed to a topic in the Google Groups "Django users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-users/3UR_6HtcnY0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/5519BD9B.9080105%40oddbird.net.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAOw%3DD6XQnVp%3Dd1EdvgEPxL_N5w%3D2eKm_4nXF9KHN_zAaH1bTew%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Django users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-users/3UR_6HtcnY0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAP7uEDLKxMwiU%2BtMBuZBcjPiEjGXR-JGhn2UOKtik0ibK2NRmw%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAOw%3DD6V45R64%3D0o2W9miXJzy_xqBW5YLooTS7ef9DzNuPATxiQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Django users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-users/3UR_6HtcnY0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAP7uED%2BtE1_33r4rr1RNwgBVsBGzSO8fxeQ87RwBF%3D1schU_pA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAOw%3DD6Wm2hX5%2By-6OAZ9%2BhULP8G9Nmd2zO8rJvaaVor6ZnQZMA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Django users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-users/3UR_6HtcnY0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAP7uED%2BHrqnCb3s22%3DRM-1TP71KsFkj7jVaRsYEdvVi5OCUpCA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAOw%3DD6U%3DwdL_5ZcEgfD8zvPjGLDzE85%3DVXe2a0LRKbB%3D1Nb%2Big%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAP7uEDKhA%2B5n9Zd%3DuM5KaoKFEDRYxkVvdRSK50UrWgKjAMkiaA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment