Tuesday, September 23, 2014

Re: Open Django template in dialog box (not in window)

Collin,

Excellent sample.  Thanks!  That's a nice standalone summary
of how to do a popup dialog via jQuery and Ajax.  Worth posting
to a tips page or blog if you have such, so other people can
Google it.

Kamal, does this fill in the gaps for you?  If not, let us know.

--Fred
Fred Stluka -- mailto:fred@bristle.com -- http://bristle.com/~fred/
Bristle Software, Inc -- http://bristle.com -- Glad to be of service!
Open Source: Without walls and fences, we need no Windows or Gates.
On 9/23/14 8:44 AM, Collin Anderson wrote:
# popupadvance.html
<p>Here's the worker object: {{ worker }}</p>

# views.py
def popupadvance(request):
    worker
= Worker.objects.get(id=request.GET.get('worker_id')
   
return render(request, 'popupadvance.html', {'worker': worker})

# urls.py
from . import views
urlpatterns
= [
    url
('popupadvance/$', views.popupadvance)
]

<!-- HTML -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<a href="" onclick="return popitup('/popupadvance/?worker_id={{worker_id}}')">Advance </a>
<div id="dialog-form"></div>

<!-- JS -->
function popitup(url) {
  $
.ajax({
    url
: url,
    success
: function(data) {
      $
("#dialog-form").load(data).dialog({modal:true}).dialog('open');
   
}
 
})
 
return false;
}

--
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/41199304-7a14-4d20-af30-eebce07e3ac7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment