Нow to run my javascript code in InfoBubble?

in mytheme/js/script.js

(function ($, Drupal, window, document, undefined) {
    Drupal.behaviors.myCustomJS  = {
        attach: function (context, settings) {
            //my custom code
        }
    };
})(jQuery, Drupal, this, this.document);

this code does not work

Comments

hutch’s picture

hutch commented

Copy php function theme_getlocations_adinfo() to your theme's template.php, renaming it in the usual way, then you can add what you like to the bubble content. Alternately, if in a Views view you can put your own content in by providing it as a field, type Global: PHP or Global: Custom text can be useful. Check box "Replace default content" and select the field you have set up.

Either way you will have to find a way to drive the event so that your code runs, jQuery can come in handy.

proweb.ua’s picture

proweb.ua commented

I'm probably not correctly formulated question.
in InfoBubble I display teaser (Popup Data -> rendered_entity ), and I use Ajax in views

rendered teaser code

<div class="ds-2col-stacked node node-object view-mode-teaser clearfix">
    <div class="group-header">
        <!--my header fields-->
    </div>
    <div class="group-left">
        <!--my left fields-->
        <span id="hide-group-right">hide right fields</span>
    <div class="group-right">
        <div class="right-fields">
            <!--my right fields-->
        </div>
        <div class="icons">...</div>
    <div class="group-footer">
        <!--my footer fields-->
    </div>
</div>

mytheme/js/script.js

(function ($, Drupal, window, document, undefined) {
    Drupal.behaviors.popup_hide_fields  = {
        attach: function (context, settings) {
            $("#hide-group-right").click(function (){
                $(".right-fields").hide();
            });
        }
    };
})(jQuery, Drupal, this, this.document);

I click on <span id="hide-group-right">, but nothing happens

hutch’s picture

hutch commented

You are right, I cannot get it to work either. The only explanation I can think of is that the popup does not exist at the time that the javascript is initiated so the event is not attached. I also tried onClick="clickbubble()" but it gets deleted by drupal ;-(

brolad’s picture

brolad commented

I found one solution, I think it not very well but it works!

I was need to make workable AJAX into a window. I used infoBubble because it more flexible. So, what to do?...

Basically ajax didn't work because we haven't included JS files when we have opened info window. If we check /js/infobubble_options.txt file we can find the next string: "copy infobubble_options.txt to infobubble_options.js to override infobubble settings". So, make it for to have possibility override settings (Don't forget to include the file on your page).

Then into the file just to add the next:

(function ($) {
    $(document).ready(function () {
        /**
         * Open the InfoBubble (asynchronous).
         *
         * @param {google.maps.Map=} opt_map Optional map to open on.
         * @param {google.maps.MVCObject=} opt_anchor Optional anchor to position at.
         */
        InfoBubble.prototype.open = function(opt_map, opt_anchor) {
            var that = this;
            window.setTimeout(function() {
                that.open_(opt_map, opt_anchor);
            }, 0);
            // Timeout needed for to execution JS file when window will be opened.
            window.setTimeout(function() {
                // Include drupal.js file for to have workable ajax on info window.
                $.getScript("/misc/drupal.js");
            }, 100);
        };
    });
})(jQuery, Drupal, this, this.document);

In this case we'll execute misc/drupal.js file when window will be opened. That's all :) If you need to run your script, you can include your custom js file using $.getScript();

So, I think later I'll make some patch for this...