Open Django template in dialog box (not in window)

[Kamal Kaur]

I'm trying to open a Django template using JS as a popup. Actually
I've done this. But it opens a separate window but I want a clean
dialog box or simply a division instead of that window.

Using window.open method, clicking on the "Advance", "popitup"
function runs. Here's the code:
http://pastie.org/9580729

The popitup function takes the passed url and opens a window
containing template sent by the view. But how to open a dialog box
instead?

I've tried using AJAX, like told in the link below but yet unable to do:
http://stackoverflow.com/questions/19267531/how-to-open-jquery-ui-dialog-with-ajax-request


--
Kamaljeet Kaur
kamalkaur188.wordpress.com

[Collin Anderson]

I've tried using AJAX, like told in the link below but yet unable to do:
http://stackoverflow.com/questions/19267531/how-to-open-jquery-ui-dialog-with-ajax-request 

What happens when you try?

[Fred Stluka]

Kamal,

I do this via the jQueryUI "dialog" widget.  Works fine with Django
or any other back end code.  Just make an Ajax call to the URL
to get the HTML, instead of passing the URL to window.open(),
and pass the HTML to the jQuery dialog widget.

See:  http://jqueryui.com/dialog/

--Fred

---

Fred Stluka -- mailto:fr...@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.

---

[Kamal Kaur]

On Mon, Sep 22, 2014 at 9:14 PM, Collin Anderson <cmawe...@gmail.com> wrote:
> What happens when you try?

I'm not getting how to tell AJAX to go to a view and load the data that it returns as the template, (in dialog). It's just not done. Feeling too dumb to use it. And doesn't work when I send a URL like: '/popupadvance/?worker_id={{worker_id}}'

@Fred Stluka

Yes, I've checked it before. It just opens 

​up a​

division that is defined in the same HTML file and is working fine as a separate file.

<quote>

Just make an Ajax call to the URL
to get the HTML, instead of passing the URL to window.open(),
and pass the HTML to the jQuery dialog widget.

</quote>

How? This is what I'm not getting. Can you give me a quick example of the same

​,​

using Django?

--
Kamaljeet Kaur

[Collin Anderson]

# 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;
}

[Fred Stluka]

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:fr...@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.

---

--
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...@googlegroups.com.
To post to this group, send email to django...@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.

[Kamal Kaur]

On Tue, Sep 23, 2014 at 11:17 PM, Fred Stluka <fr...@bristle.com> wrote:
> Kamal, does this fill in the gaps for you? If not, let us know.

I've used this example in my app and getting this, in Firefox console,
on clicking the link:
http://pastie.org/9590027

Here is what I get as output:
http://awesomescreenshot.com/0413ji0643

It's not recoganizing the HTML template returned, I guess. Where can be the
problem now?

--
Kamaljeet Kaur
kamalkaur188.wordpress.com

[Collin Anderson]

Hmm... it seems to be trying to parse your html as javascript. Try using adding to your $.ajax():

dataType: 'text',

[Kamal Kaur]

Nothing happened.

--
Kamaljeet Kaur
kamalkaur188.wordpress.com

[Kamal Kaur]

On Tue, Sep 23, 2014 at 6:14 PM, Collin Anderson <cmawe...@gmail.com> wrote:
> # popupadvance.html
> <p>Here's the worker object: {{ worker }}</p>

<snip>

> 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>

What I see is that I need to write the contents to be shown, in the
dialog, inside this division:

<div id="dialog-form"> Content to be shown in dialog </div>

But in the previous case, when I did it with window.open event, a
separate HTML file was passed. See my first mail in the thread. On
clicking the link, a new, separate template came up in the window. But
here it checks for the content in a division which is already there in
same template. Which means the link and the content to be popped up
should be in "popupadvance.html" only.

Am I able to explain my point?


--
Kamaljeet Kaur
kamalkaur188.wordpress.com

[Collin Anderson]

Interesting. Maybe it should be $("#dialog-form").html(data) rather than load(data)

[Jan Eskilsson]

Sorry for budging in but for me this works $("#dialog-form").html(data) rather than load(data) but I get a "Uncaught TypeError: Undef is not a function" error in the Java Script, dont understand why really ?

Thank You in Advance

Jan Eskilsson

2014-09-24 22:05 GMT+04:00 Collin Anderson <cmawe...@gmail.com>:

Interesting. Maybe it should be $("#dialog-form").html(data) rather than load(data)

--

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...@googlegroups.com.
To post to this group, send email to django...@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/6e776a5d-869d-4c74-9adf-34fc4650093a%40googlegroups.com.

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

--

No trees were killed in the creation of this message.

However, many electrons were terribly inconvenienced.

 

Please consider the environment before you print this email.

 

(1) The contents of this transmission are privileged and confidential and intended solely for the use of the addressee. Any disclosure, distribution or copying of the contents, other than by the addressee, is strictly prohibited. If you receive this transmission in error, please notify us immediately and destroy the material received.

(2) All incoming and outgoing emails and any attachments are subjected to a virus scanner and are believed to be free of any virus, or any other defect which might affect any computer or IT system into which they are received and opened. Therefore, it is the responsibility of the recipient to ensure that they are virus free and no responsibility is accepted by Jan Eskilsson  for any loss or damage arising in any way from receipt or use thereof.

[Kamal Kaur]

On Tue, Sep 23, 2014 at 11:17 PM, Fred Stluka <fr...@bristle.com> wrote:
>

> 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.

@ Collin, please do the above now ;)

Yes, writing $("#dialog-form").html(data) worked like a charm. This is
what happens when we don't know all about the tool we're using :(

Can you point me to some documentation about JS + Django?

Something is left... Opening the page for the first time > Clicking on
the link > I get the dialog box as we've mentioned. But after closing
dialog by clicking on "cross" > reopening it > I get the "Contents to
be shown in popup" only in the <div> and no dialog box is there. Check
it here:
http://awesomescreenshot.com/0da3jnxoc4

Can we figure out, why does it happen? Browser console gives this:
TypeError: $(...).html(...).dialog is not a function

--
Kamaljeet Kaur
kamalkaur188.wordpress.com

[Kamal Kaur]

On Thu, Sep 25, 2014 at 12:10 AM, Jan Eskilsson <janesk...@gmail.com> wrote:
> "Uncaught TypeError: Undef is not a function" error in the Java Script, dont
> understand why really ?

Yes, I get the same in Chromium (y)

​,​

but only after reopening, as I mentioned in my previous mail.

--
Kamaljeet Kaur
kamalkaur188.wordpress.com

[Collin Anderson]

I think you only included the "jquery" script code. You need to include both jquery and jqueryui.

I'll work on the blog post.

[Collin Anderson]

Here's the blog post, by popular demand :)

http://collincode.wordpress.com/2014/09/24/jquery-ui-popup-with-django-backend/

[Fred Stluka]

Excellent!  Thanks!  Now I can just point my team at it, instead
of writing out the details myself.

--Fred

---

Fred Stluka -- mailto:fr...@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/24/14 5:27 PM, Collin Anderson wrote:

Here's the blog post, by popular demand :)

http://collincode.wordpress.com/2014/09/24/jquery-ui-popup-with-django-backend/

--
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...@googlegroups.com.
To post to this group, send email to django...@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/dd66d8cb-e5bc-44d9-bae4-7e6383508bc0%40googlegroups.com.

[Collin Anderson]

I figured it out. html() isn't chainable. It needs to be one of these:

$.get(this.href, function(data){
  $("#popup").html(data)
  $("#popup").dialog({modal: true}).dialog('open')
})

or

$.get(this.href, function(data){
  $("#popup").dialog({modal: true}).dialog('open').html(data)
})

or, after I learned that "load()" can do ajax calls for you, this might work:

$("#popup").dialog({modal: true}).dialog('open')).load(this.href)

I've updated my blog post.

[Kamal Kaur]

On Fri, Sep 26, 2014 at 1:49 AM, Collin Anderson <cmawe...@gmail.com> wrote:
> $("#popup").dialog({modal: true}).dialog('open')).load(this.href)
>
> I've updated my blog post.

This is opening the template on next page :/

And you need to edit the post:

$("#popup").dialog({modal: true}).dialog('open')).load(this.href)

There should not be double brace after "open".

--
Kamaljeet Kaur
kamalkaur188.wordpress.com

http://faithreel.com/dancing-3-year-old-amazing-even-actor-jet-li-cheering/
“My dream is to make people happy.”

Know your sheet size:
http://goo.gl/8yaeyo

[Collin Anderson]

Ahh yup. I should really test my examples :) The SyntaxError will make the even handler not register. Does removing the extra parentheses fix it?

[Kamal Kaur]

On Fri, Sep 26, 2014 at 10:40 PM, Collin Anderson <cmawe...@gmail.com> wrote:
> Ahh yup. I should really test my examples :)

Indeed!

> The SyntaxError will make the
> even handler not register. Does removing the extra parentheses fix it?

No.

In fact, I got the content in next page only after removing it ")" :P

--
Kamaljeet Kaur
kamalkaur188.wordpress.com

[Collin Anderson]

I have a jsfiddle working with my code. http://jsfiddle.net/mafos5ox/1/

Do any errors show up in the developer tools console?