Why does .elgg-lightbox assume JSON as a return type?

I created a popup to summarize my page content using .elgg-lightbox in Elgg 3.0.3. But when .elgg-lightbox element is triggered, it returns the popup with only plain HTML text, no CSS properties with it. 

//creating a link

elgg_view('output/url', array(

   'href' => elgg_get_site_url( ) . 'plugin_name/summary_view',

   'text' => 'Summary',

   'class' => 'elgg-lightbox',

   'data-colorbox-opts' => json_encode([

      'width' => '80%',

      'height' => '80%',

      'iframe' => true,])

    ));

    1. Try to use w/o 'iframe' => true
    2. Your 'CSS' is your content into popup.

    Sample UI for popup is:

    $title = elgg_format_element('h3', ['class' => 'modal-title'], elgg_echo('Title for popup'));
    $header = elgg_format_element('div', ['class' => 'modal-header'], $title);
    
    $content = "Here is a popup content";
    
    echo elgg_format_element('div', ['class' => 'ui-front'], $header . $content);

     

  • Thanks RvR!

    1. When I use data-colorbox-opts without iframe, it throws Javascript error below:

    Uncaught SyntaxError: Unexpected token < in JSON at position 0

    2. I changed my code to use elgg_format_element ( ), but it does not work neither. It still returns plain HTML text in the popup.

  • Maybe, you need to create a view/json for this page if you're trying to fetch JSON data.

    Look at responses when you load your popup (tab 'Network' in browser's DevTools).

    Also, are you use json_decode() in your popup?

    Perhaps, example of your summary_view could help to understand more...

  • @RvR,

    I think his original question is this: why does Elgg assume that the output of an ajax view is in JSON format?  The view that he is trying to pop up in a lightbox is not JSON, it's just HTML.  But Elgg's AJAX code is treating the view output as though it's JSON, and it fails when trying to call parseJSON() on the view output.

  • It can be a bit tricky to get lightbox popups working correctly.

    First thing is you should register the view to be displayed in the popup as ajax view, e.g. in the init function of your plugin in start.php add the line

    elgg_register_ajax_view('plugin_name/summary_view');

    with summary_view.php saved at mod/plugin_name/views/default/plugin_name/summary_view.

    Then the link would be displayed with (omitted the additional options just for laziness)

    echo elgg_view('output/url', array(
        'href' => "ajax/view/plugin_name/summary_view",
        'class' => 'elgg-lightbox',
        'text' => 'Summary',
    ));

    By not registering the view to be displayed as ajax view I'm not sure if lightbox.js and lightbox.css are really loaded correctly (in the past you had to load them on your own when needed but now this should work automatically). And only with the ajax view Elgg might set content type to html. Otherwise it might be undefined (at least I don't see any json output option for content type in the available options at https://www.jacklmoore.com/colorbox/).

  • @RvR - I don't use json_decode( ) in my summary_view page. 

    @iionly - Thank you!

    I use the ajax view with one of my pages and it works but it does not work when the href value has parameter(s), for example: 

    echo elgg_view('output/url', array(
        'href' => "ajax/view/plugin_name/summary_view?year=$year",
        'class' => 'elgg-lightbox',
        'text' => 'Summary',
    ));

    I cannot get this to work because when I use elgg_extract( ) in my summary_view page, it returns empty string/null. For example:

    // in summery_view page

    $year = elgg_extract('year', $vars);

    // the outcome of $year is empty

  • It should work also with parameters. For example, I use it this way in the Unvalidated Email Change plugin (https://elgg.org/plugins/875971). In the Elgg 2.x version this plugin has the parameters directly in the url whereas I use elgg_http_add_url_query_elements() in the updated version for Elgg 3. But it should work both ways on both version of Elgg. The 3.0 version of the plugin displays the link no longer with output/url but registers it as an entity menu entry. But this shouldn't make a difference either.

  • In Elgg 3, elgg/lightbox component uses elgg/Ajax#path to fetch the contents (reason being consistent handling of elgg_require_js()). 

    When using views registered with elgg_register_ajax_view(), the URL query elements are not passed to $vars.

    You can try elgg_extract('year', $vars, get_input('year')); or pass data with data-colorbox-opts.

    echo elgg_view('output/url', [
       'href' => 'javascript:',
       'text' => 'Open Lightbox',
       'class' => ['elgg-lightbox', 'elgg-lightbox-iframe'],
       'data-colorbox-opts' => json_encode([
           'href' => 'my_plugin/view',
           'data' => ['year' => 2019],
       ]),
    ]);
    

     

  • I believe this change was rolled in by Jeroen, and I don't think it's really the intended behavior. You may want to open an issue to investigate what happens exactly. elgg/Ajax sends the X- header that transforms the response to JSON, which I think should not be the case if iframe or image is set as colorbox behavior.

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking