Hello,

I'm trying to display a node in a modal but unfortunatelly don't understand how to do it... I'm using Bootstrap 7.x-3.1-beta1, bootstrap 3.1.1, and jquerry 1.9.
Also, Twitter Bootstrap Modal 7.x-3.5, jQuery AJAX Load 7.x-1.4, jQuery AJAX Load Node 7.x-1.4 are installed and enabled with the default configuration.

Here is what I've already tried:

<a class="bs_modal" href="/node/8">Load my link a Bootstrap Modal!</a>
produces the following output:
<a class="bs_modal jquery-once-1-processed jquery-once-3-processed jquery_ajax_load_open" href="#jquery_ajax_load_target">Load my link a Bootstrap Modal!</a>
<a class="jquery_ajax_load" href="/node/8">Load my link a Bootstrap Modal!</a>
produces the following output:
<a class="jquery_ajax_load jquery-once-1-processed jquery_ajax_load_open" href="#jquery_ajax_load_target">Load my link a Bootstrap Modal!</a>
<a class="jquery_ajax_load bs_modal" href="/node/8">Load my link a Bootstrap Modal!</a>
produces the following output:
<a class="jquery_ajax_load bs_modal jquery-once-1-processed jquery-once-3-processed" href="#jquery_ajax_load_target">Load my link a Bootstrap Modal!</a>
<a class="jquery_ajax_load_TB bs_modal" href="/node/8">Load my link a Bootstrap Modal!</a>
produces the following:
<a class="jquery_ajax_load_TB bs_modal jquery-once-1-processed jquery-once-3-processed jquery_ajax_load_open" href="#jquery_ajax_load_target">Load my link a Bootstrap Modal!</a>

None of the above actually work as expected... When using, for example, class="bs_modal" the modal is loaded but without content.
Can somebody please help me?
Thank you!

Comments

gge’s picture

gge commented

I have also tried
<a class="twitter_bootstrap_modal tb_modal" href="/node/8">Load my link a Bootstrap Modal!</a>
which produces the following:
<a data-toggle="modal" data-target="#jquery_ajax_load" class="twitter_bootstrap_modal tb_modal jquery-once-2-processed" href="/jquery_ajax_load/get/ro/xxxxxxxxxxx">Load my link a Bootstrap Modal!</a>
Using .twitter_bootstrap_modal and .tb_modal does not load the modal window and the link is wrong (this website is multilingual).
http://www.xxxxxx.org/jquery_ajax_load/get/<strong>ro</strong>/xxxxxxxxxxxxx

hatuhay’s picture

hatuhay commented

Please enable jqueryajaxload test module it willgenerate a test page something like jquery_ajax_load/test.
Debug there.
If you do not find the path look for the menu hook on the test module.

gge’s picture

gge commented

First link "Javascript Ajax Modal Test /node/10" no modal
<a class="btn jquery_ajax_load_TB bs_modal" href="/node/10">Javascript Ajax Modal Test /node/10</a>
Second link "Javascript Ajax Modal Test /node/10" no modal
<a class="btn jquery_ajax_load_TB bs_modal" href="/node/10">Javascript Ajax Modal Test /node/10</a>
Third and fourth
<a class="btn jquery_ajax_load jquery-once-1-processed" href="#jquery_ajax_load_target">jQuery Test /node/10</a>
<a class="btn jquery_ajax_load jquery-once-1-processed" href="#jquery_ajax_load_target" data-target="ajax-target-11">jQuery Test /node/10</a>
"Sorry but there was an error: 500 Internal Server Error".

After rebuilding all the registry and clearing caches I think <a class="twitter_bootstrap_modal tb_modal" href="/node/8">Load my link a Bootstrap Modal!</a> give the best results, because the modal is created but the link is wrong.

href="/jquery_ajax_load/get/ro/xxxxxxxxxxx" should be href="/jquery_ajax_load/get/xxxxxxxxxxx". If i manually edit the href, it seems that the modal correctly loads the content.

hatuhay’s picture

hatuhay commented

Jquery ajax load do that job.
That language issue was solved.
I will check that code, it reads the language and take it out.

gge’s picture

gge commented

Another issue, related to loading node content, is that when a block is inserted in a body field using Insert Block and that block comes with its own javascript, JQuery AJAX Load does not load that js file, even if "Check if you want to load js files" is checked.

For example I'm trying to display, in a modal, a block generated by Paypal Donations which is inserted in a body field. The block is rendered by Twitter Bootstrap Modal (right now I have to edit the url manually as I explained above) but its javascript file (paypal_donations.js) is not loaded and "Check if you want to load js files" is checked.

hatuhay’s picture

hatuhay commented

Use the test to assure scripts are loaded it is visually obvious because the css application generates a blink.
I cannot assure that the scripts loaded will be executed, there are lots of diferent options and behaviours.

lstirk’s picture

lstirk commented

Hi,

I am struggling to get this working, the modal launches but the content isnt loaded. I get a 404 Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/drupal_site/bs_modal/drupal_site/image/stablemapr-sm-di... URL doesnt look correct?

hatuhay’s picture

hatuhay commented

Hello, it only loads drupal pages, whatever types.
I believe you are trying to load an image.
If you are using modal to load an image maybe the twitter bootstrap carousel in this same module could help.

lstirk’s picture

lstirk commented

Hello,

No its a node its just that im using path alias of image, i get the same if i dont use the alias and instead use node/611

lstirk’s picture

lstirk commented

I am building the link as so:

$output = l($image, 'node/'.$node->nid, array('attributes' => array('class' => array('jquery_ajax_load_TB tb_modal')), 'html' => TRUE));

Does that look correct?

lstirk’s picture

lstirk commented

It seems the issue is to do with my path been localhost/drupal_site if I change to just localhost this works. But once the node is rendered the styling disappears on the modal

hatuhay’s picture

hatuhay commented
  1. Check on jquery_ajax_load rendering css files
  2. Verify if CSS files have also a URL error
lstirk’s picture

lstirk commented

Problem is its rendered without the modal-dialog, modal-content ect divs, they seem to be removed when the content is rendered but they are there when the loading icon is shown and the modal is correctly styled

lstirk’s picture

lstirk commented

Seems this can be solved by adding the modal layout into the tpl file

eebanos’s picture

eebanos commented

I'm having the same issue and it's related to the las part of the URL, in my case it tries to
GET http://siteUrl/bs_modal/node/id but it adds this to the end: ?_=number and the response code is 404. Any ideas on how do i fix this??

vood002’s picture

vood002 commented

EDIT:

I figured out how to solve issue in #15 and my own issue after screwing around with the javascript file.

This wasn't clear to me, but on the TBM Configuration page, any jQuery selectors you place in the second box ALSO have to be placed in the first box. Which is to say, any thing you list under "Valid jQuery Classes/IDs to tell TB Modal to load with full modal code (One per line)" also needs to appear in the first box "Valid jQuery Classes/IDs to trigger TB Modal via Ajax (One per line)".

I'm experiencing the same issues as #15.

The standard jQuery Ajax Load test links are working on the JAL test page, but the Twitter Bootstrap Modal test links on this page do not work, they simply act as a standard link and load the content of the target page.

Standard TB links are working (via TBM Blocks module), but when I try to load a node via ajax in a TB modal I see a 404 in the console with a link formatted like http://site.com/bs_modal/path/to/node?_=0123456789

It doesn't look to me like either TBM or JAL are appending the blank argument to the url, i'm assuming this is just to bypass the cache and is being added by jQuery. But, I don't know, I just don't see it in code. I can't tell if the argument is causing the issue or some sort of bad bs_modal routing is causing it. I've tried this with various versions of jQuery and the latest dev version of TBM and JAL and am not seeing any changes in behavior.

joe huggans’s picture

joe huggans
Primary language English
Location Kiel, Germany
commented

Yep this module seems to be dead

karuna patel’s picture

karuna patel commented
Status: Active » Fixed

You can use Colorbox module and Colorbox node module.

All you have to do:

1. Download and enabled the modules.
2. Download the colorbox libraries from wget http://www.jacklmoore.com/colorbox/colorbox.zip . And extract under /sites/all/libraries.
3. Then create a node with your form fields.consider its path will be http://www.yourdomain.com/node/1
4. Again create a page like this Load my link a Bootstrap Modal!
5. It will give a link. on clicking that it will show pop up with your node contents.

Hope it helps to resolve this issue.

Thanks..

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.