Hi Timothy,
-- What you could do is create a function that gets the id of the form. It can then query the action of the form and the parameters of the form. It would look something like this:
function submitForm(form_id) {
var $form = $("#" + form_id);
$.ajax({
type: 'POST',
url: $form.attr('action'),
dataType: 'html', data: $form.serialize(), success: function(data){ $("#old_div_content").html(data); }, error: function(xhr, textStatus, errorThrown) { console.log('AJAX communication failed:', textStatus, errorThrown); } });
}
This way it is pretty generic as long as the "old_div_content" div id stays the same.
Regards,
Andréas
Med vänliga hälsningar,
Andréas Kühne
Software Development Manager
Suitopia Scandinavia AB
2014-02-28 15:48 GMT+01:00 Timothy W. Cook <tim@mlhim.org>:
On Thu, Feb 27, 2014 at 10:18 AM, Andreas Kuhne <andreas.kuhne@suitopia.com> wrote:
Hi again Timothy,Actually it's much easier than you think.Great news! :-)The error you showed is a validation error, is it not?Yes.In the example that you gave (below) it seems that I will need an AJAX function for each different form. Correct?IOW:There are 25 different forms/views/models that can be selected, one at a time, for create or update in this div. So, do I understand correctly that I need a function with the correct URL and data map for each one of those? If so, what is the approach to calling the one the user has selected? My urks are named, for example: dvtemporal_create and dvtemporal_update. Of course the _update has the record id as well.There is a lot of information in the Django request so I want to be able to reuse this with an 'abstract as possible' ajax function.Thoughts?--TimTo view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CALXYUbmK74Nk57X6gkMOWRxscsWbv6REo0g%3Dqu1k1mdZMuqMRg%40mail.gmail.com.What you do is that you submit the form via jquery ajax, something like this should work:$.ajax({ type: 'POST', url: the_form_url, dataType: 'html', data: { email : $('#id_email').val(), name : $('#id_name').val(), phone : $('#id_phone').val() }, success: function(data){ $("#old_div_content").html(data); }, error: function(xhr, textStatus, errorThrown) { console.log('AJAX communication failed:', textStatus, errorThrown); } });Now you will have to change the function so that the parameters sent to your view are correct (in the data map), the url is correct and the success method changes the correct div. You won't have to do any error handling in jquery at all, because the validation is on the server. When you replace the html in the div that you want to replace, the user will just get the validation errors that django creates for you.You really don't have to change anything in the view that you are using at the moment, because it already returns the information that you want in the div, all you have to do is get in into the div :-)Regards,Andréas2014-02-27 14:06 GMT+01:00 Timothy W. Cook <tim@mlhim.org>:Hi Andreas,Thanks for the reply.On Thu, Feb 27, 2014 at 9:42 AM, Andreas Kuhne <andreas.kuhne@suitopia.com> wrote:
Hi Timothy,What you probably have to do is submit the form in a ajax call via jquery for example. https://api.jquery.com/jQuery.ajax/You create a request via the ajax method in jquery and then add a success and error handler. They only have to update the div you want to replace: $("#div_id").html(response).
This certainly seems like a reasonable approach. The points I am unsure of is:1) how do I catch the template error in jQuery?2) I suppose that I have to (somehow) catch the error in the ModelForm?3) then send that request to jQuery, somehow?My forms and views are pretty simple at this point. Here are examples:class DvCodedStringCreateView(CreateView):template_name = 'dvcodedstring_create.html'success_url = '/dashboard'model = DvCodedStringform_class = DvCodedStringCreateFormfields = ['published','prj_name','data_name','lang','description','sem_attr','resource_uri','asserts','terminology','term_subset','codes','t_code','t_string','t_name','t_abbrev','t_version','min_length','max_length','exact_length','enums','enums_annotations','default_value',]class DvCodedStringCreateForm(forms.ModelForm):class Meta:model = DvCodedStringwidgets = {'data_name': TextInput(attrs={'size':90}),'description': Textarea(attrs={'cols':80, 'rows':5,'wrap':'off'}),'sem_attr': Textarea(attrs={'cols':15, 'rows':3,'wrap':'off'}),'resource_uri': Textarea(attrs={'cols':60, 'rows':3,'wrap':'off'}),'asserts': Textarea(attrs={'cols':80, 'rows':2,'wrap':'off'}),'enums': Textarea(attrs={'cols':30, 'rows':5,'wrap':'off'}),'enums_annotations': Textarea(attrs={'cols':50, 'rows':5,'wrap':'off'}),'t_code': Textarea(attrs={'cols':15, 'rows':5,'wrap':'off'}),'t_string': Textarea(attrs={'cols':30, 'rows':5,'wrap':'off'}),'t_abbrev': Textarea(attrs={'cols':10, 'rows':5,'wrap':'off'}),'t_version': Textarea(attrs={'cols':10, 'rows':5,'wrap':'off'}),'t_name': Textarea(attrs={'cols':40, 'rows':5,'wrap':'off'}),}Thanks in advance for any further guidance.--Tim--2014-02-27 12:38 GMT+01:00 Timothy W. Cook <tim@mlhim.org>:
--I have no idea where to start on this problem.
My application is work great using the admin UI but to enhance usability it is time for a new user interface.I am using dynatree.js to create a 'Project' tree with subelements (called PcTs) grouped into types; IOW: There are three levels before you get to an editable component. Hence the reason to use a tree instead of paging through the admin UI.So my UI (Selection_001.png) uses <div> tags to layout the spaces. Basically tree on the left and a larger editing space next to it. My forms a re properly placed inside the scrollable <div>. My problem is when I get an error in the form, how do I control it so that it is only displayed in the same <div> where the form was displayed? What I get now is a full page reload. See Selection_002.pngThe template does not use any extend or include directives. It is a completely self contained HTML file.There are forms and views for each of the PcTs.Any ideas on where to start working on this?--MLHIM VIP Signup: http://goo.gl/22B0U
============================================
Timothy Cook, MSc +55 21 994711995
MLHIM http://www.mlhim.org
Like Us on FB: https://www.facebook.com/mlhim2
Circle us on G+: http://goo.gl/44EV5
Google Scholar: http://goo.gl/MMZ1o
LinkedIn Profile:http://www.linkedin.com/in/timothywaynecook
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/CA%2B%3DOU3UZppis4c8rr_Ok9rQ_SO6uXK6iii8HG7cPHE9qq1CWLw%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.
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/CALXYUbno2-CvWgs%2BZjTWO7zU0C3YkvnzLCs3S0stiPGvDvBPBA%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.
--MLHIM VIP Signup: http://goo.gl/22B0U
============================================
Timothy Cook, MSc +55 21 994711995
MLHIM http://www.mlhim.org
Like Us on FB: https://www.facebook.com/mlhim2
Circle us on G+: http://goo.gl/44EV5
Google Scholar: http://goo.gl/MMZ1o
LinkedIn Profile:http://www.linkedin.com/in/timothywaynecook
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CA%2B%3DOU3Uky1-JSEsW8towv4gQz9hFH_c5dx1w6HaCdRA%2B9ZKshA%40mail.gmail.com.--
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.--
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.--MLHIM VIP Signup: http://goo.gl/22B0U
============================================
Timothy Cook, MSc +55 21 994711995
MLHIM http://www.mlhim.org
Like Us on FB: https://www.facebook.com/mlhim2
Circle us on G+: http://goo.gl/44EV5
Google Scholar: http://goo.gl/MMZ1o
LinkedIn Profile:http://www.linkedin.com/in/timothywaynecook
--To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CA%2B%3DOU3UD64_vHr8Cm7qHipLULX2qZv2Ego%3D-HuZHCWFyo9Redg%40mail.gmail.com.
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.
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/CALXYUbk5VBeRdxygicuqQmMatKAQ2eC4KVjbEbwS-OUe2M9RSA%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.
No comments:
Post a Comment