Hi Folks,
This is a biggie...
I have a view which produces a page of links to content. When the user clicks the link, I want to display an unadorned, overlaying, modal <DIV> of the target. Imagine, for example, that the view produces a list of drawings, then I want to display the selected drawing without any real estate consumed by Drupal navigation or block regions. I know this is a job for AJAX, and I need someone to just fill in a gap or two. Here's what I think I know:
In response to the user's click on the link, through the magic of 'class="use-ajax" ', Drupal will make an AJAX call for the requested content, wait on the promise, and finally return JSON encoded content to some function that I provide so that I can display the returned content in a <DIV> constructed specially for the circumstance. I see the example, but I can't quite follow it.
More specifically, how does 'class="use-ajax" ' do this magic? I have to assume there is an onClick event handler hiding somewhere above me in the DOM looking for the class "use-ajax". Where is this event listener attached? How does it become attached? Where is the source, so I can see both the event handler and the attachment?
Finally, how do I register my callback function which will operate on the returned JSON, which is a complicated question because I need an example of what I need to write, where I need to put it, and how I tell Drupal that it is there.
Thanks for the help,
Chris.
Sir, have you Googled for "ajax for drupal" and read the documentation on this subject? Most of your questions can be answered that way.
Thank you.
From: "Fred Jones" fredthejonester@gmail.com To: support@drupal.org Sent: Tuesday, October 22, 2013 1:14:36 PM Subject: Re: [support] AJAX
Sir, have you Googled for "ajax for drupal" and read the documentation on this subject? Most of your questions can be answered that way.
Hi Fred,
Geeze... Of course. I've read extensively. My question indicates that I have a pretty strong understanding, but I have not found the magic combination that integrates everything. This is exactly the right time to ask friends for help.
If you don't want to answer the question, than don't answer it, but please refrain from criticizing members for posing questions; that is, after all, the justification for this mailing list. The answer to my question may benefit other readers who have similar questions.
Since you apparently think I am abusing the privilege of asking questions and I'm not doing my investigational background research, perhaps you could find one "on point" web page with Google and help me out. I would appreciate having an answer and I have no problem doing the work necessary, but as I say, I have been looking for some time and I still have my questions.
Chris.
perhaps you could find one "on point" web page with Google and help me out.
No problem.
I have a view which produces a page of links to content. When the user clicks the link, I want to display an unadorned, overlaying, modal <DIV> of the target. Imagine, for example, that the view produces a list of drawings, then I want to display the selected drawing without any real estate consumed by Drupal navigation or block regions.
This is actually what Colorbox already does. Probably that's all you need:
https://drupal.org/project/colorbox
If not, Google for "drupal ajax" and you will find the third result in Google is an EXAMPLE of how to do it in Drupal, right on the Drupal API site:
https://api.drupal.org/api/examples/ajax_example!ajax_example.module/group/a...
More specifically, how does 'class="use-ajax" ' do this magic? I have to assume there is an onClick event handler hiding somewhere above me in the DOM looking for the class "use-ajax". Where is this event listener attached? How does it become attached? Where is the source, so I can see both the event handler and the attachment?
To understand the basics of Ajax if you prefer to do it yourself, start with a tutorial. Here's one I found on Google:
http://www.w3schools.com/php/php_ajax_intro.asp
Finally, how do I register my callback function which will operate on the returned JSON, which is a complicated question because I need an example of what I need to write, where I need to put it, and how I tell Drupal that it is there.
Google for "register ajax callback" and the first result is:
http://api.jquery.com/ajaxComplete/
Presuming that you already know that Drupal ships with and encourages use of jQuery, this is all you need.
Good luck.
From: "Fred Jones" fredthejonester@gmail.com To: support@drupal.org Sent: Wednesday, October 23, 2013 4:22:17 AM Subject: Re: [support] AJAX
This is actually what Colorbox already does. Probably that's all you need:
https://drupal.org/project/colorbox
I'll investigate this, because even if it doesn't work for the current project, it will definitely work for the Photo Album part. I oversimplified the description of what I was displaying to avoid misdirecting the conversation away for the aspect of AJAX. I doubt that colorbox will work for the true content which is a PDF. A picture is static, but a PDF needs controls like download and scroll bars.
<blockquote> If not, Google for "drupal ajax" and you will find the third result in Google is an EXAMPLE of how to do it in Drupal, right on the Drupal API site:
https://api.drupal.org/api/examples/ajax_example!ajax_example.module/group/a... </blockquote>
This would be some of the MANY articles I've read. They do not explain the questions I have. I am sure there will come a day when I can read this and completely understand it but right now it does not explain things usefully. I've read it many times and I have not been able to produce anything useful, which is why I am asking questions.
<blockquote>
More specifically, how does 'class="use-ajax" ' do this magic? I have to assume there is an onClick event handler hiding somewhere above me in the DOM looking for the class "use-ajax". Where is this event listener attached? How does it become attached? Where is the source, so I can see both the event handler and the attachment?
To understand the basics of Ajax if you prefer to do it yourself, start with a tutorial. Here's one I found on Google:
http://www.w3schools.com/php/php_ajax_intro.asp
</blockquote>
I understand the basics of AJAX, and I've used it before. What I DON'T understand is how to use AJAX withing the confines of Drupal, which is not an AJAX question, but a Drupal question.
<blockquote>
Finally, how do I register my callback function which will operate on the returned JSON, which is a complicated question because I need an example of what I need to write, where I need to put it, and how I tell Drupal that it is there.
Google for "register ajax callback" and the first result is:
http://api.jquery.com/ajaxComplete/ </blockquote>
This is a jQuery call, which is fine, but I have found no Drupal documentation that says to make this call. So, this is also not illustrative.
I appreciate that you tried to help, but I still have many questions. I did get a pointer from another source that sent me to http://www.interactivejunky.com/tutorial/ajax-commands-drupal-7 which has allowed me to create a minimal working example from which I can increase my understanding through brute force experimentation and intrusive debugging. My recommendation to anybody following the path I am on is to read this.
Chris.
A PDF is also static. The controls for the PDF doesn't come from code you put in, but rather from the mimetype handler on the user's browser and the associated viewer/plugin (ie - Adobe Reader, Chrome's PDF viewer, etc.). Same thing as clicking a link to an MP3 and your browser's audio player opens, so long as your browser has a handler associated with the MP3 mime-type.
What you are going to need is some browser method of displaying a PDF within the browser, like FlexPaper, so you control the viewing mechanism. That you can load into a Colorbox through regular inline DOM or an iFrame. Even then you still got extra work to do, either using FlexPaper's desktop publisher or server side (which means having a VPS or dedicated server so you can install the needed software).
You can also load the PDF via an iFrame in Colorbox, meaning the native PDF viewer in the browser will take over. That would be the easiest route, but also the one with the least amount of control.
Jamie Holly http://hollyit.net
On 10/23/2013 11:16 AM, Chris Miller wrote:
*From: *"Fred Jones" <fredthejonester@gmail.com> *To: *support@drupal.org *Sent: *Wednesday, October 23, 2013 4:22:17 AM *Subject: *Re: [support] AJAX This is actually what Colorbox already does. Probably that's all you need: https://drupal.org/project/colorboxI'll investigate this, because even if it doesn't work for the current project, it will definitely work for the Photo Album part. I oversimplified the description of what I was displaying to avoid misdirecting the conversation away for the aspect of AJAX. I doubt that colorbox will work for the true content which is a PDF. A picture is static, but a PDF needs controls like download and scroll bars.
If not, Google for "drupal ajax" and you will find the third result in Google is an EXAMPLE of how to do it in Drupal, right on the Drupal API site: https://api.drupal.org/api/examples/ajax_example!ajax_example.module/group/ajax_example/7This would be some of the MANY articles I've read. They do not explain the questions I have. I am sure there will come a day when I can read this and completely understand it but right now it does not explain things usefully. I've read it many times and I have not been able to produce anything useful, which is why I am asking questions.
> More specifically, how does 'class="use-ajax" ' do this magic? I have to > assume there is an onClick event handler hiding somewhere above me in the > DOM looking for the class "use-ajax". Where is this event listener > attached? How does it become attached? Where is the source, so I can see > both the event handler and the attachment? To understand the basics of Ajax if you prefer to do it yourself, start with a tutorial. Here's one I found on Google: http://www.w3schools.com/php/php_ajax_intro.aspI understand the basics of AJAX, and I've used it before. What I DON'T understand is how to use AJAX withing the confines of Drupal, which is not an AJAX question, but a Drupal question.
> Finally, how do I register my callback function which will operate on the > returned JSON, which is a complicated question because I need an example of > what I need to write, where I need to put it, and how I tell Drupal that it > is there. Google for "register ajax callback" and the first result is: http://api.jquery.com/ajaxComplete/This is a jQuery call, which is fine, but I have found no Drupal documentation that says to make this call. So, this is also not illustrative.
I appreciate that you tried to help, but I still have many questions. I did get a pointer from another source that sent me to http://www.interactivejunky.com/tutorial/ajax-commands-drupal-7 which has allowed me to create a minimal working example from which I can increase my understanding through brute force experimentation and intrusive debugging. My recommendation to anybody following the path I am on is to read this.
Chris.
From: "Jamie Holly" hovercrafter@earthlink.net To: support@drupal.org Sent: Wednesday, October 23, 2013 8:50:42 AM Subject: Re: [support] AJAX
A PDF is also static. The controls for the PDF doesn't come from code you put in, but rather from the mimetype handler on the user's browser and the associated viewer/plugin (ie - Adobe Reader, Chrome's PDF viewer, etc.). Same thing as clicking a link to an MP3 and your browser's audio player opens, so long as your browser has a handler associated with the MP3 mime-type.
What you are going to need is some browser method of displaying a PDF within the browser, like FlexPaper, so you control the viewing mechanism. That you can load into a Colorbox through regular inline DOM or an iFrame. Even then you still got extra work to do, either using FlexPaper's desktop publisher or server side (which means having a VPS or dedicated server so you can install the needed software).
You can also load the PDF via an iFrame in Colorbox, meaning the native PDF viewer in the browser will take over. That would be the easiest route, but also the one with the least amount of control.
I may yet relent and use colorbox, but that would dispel much of the impetus to learn Drupal AJAX, which is something I really want to do right now because I think I need to. Of course, if there is ALWAYS another, easier way to do it, then why bother? The answer to that question is that I can't be sure there is always another easier way to do it until I know a few ways. So, onward...
I claimed I was displaying an image to avoid this whole discussion, but this looks like it might also be informative, so I'm here to listen. Yes. I misspoke when I said the PDF was not "static". I meant the displaying an image was something the browser knew how to do very well but the PDF required more instruction and in this case that instruction takes the form of an <OBJECT> tag:
<object data="test.pdf#pagemode=thumbs&view=fitH&scrollbar=0&toolbar=0&statusbar=0&messages=0&navpanes=0" type="application/pdf" width="100%" height="80%"> <p>It appears your browser is not configured to display PDF files. No worries, just <a href="test.pdf" target="_blank">download the PDF file.</a></p> </object>
PDF also requires that the end-user have the necessary client/plug-in, which is a configuration problem as has been suggested, but not one I need to worry about -- yet.
After I can do what I want with Drupal AJAX, then I will investigate colorbox and try to do the same thing or better. Then I'll use the easier of the two. Frankly, if colorbox will do it at all, I will probably go with it because I now plan to use colorbox for the Photo Album piece and it is always better if you can avoid multiple ways to do the same basic thing. Do one thing well.
Chris.
-
Chris Miller -
Fred Jones -
Jamie Holly