Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Embeddable Widget is not showing data #229

Open
xehroz opened this issue Jul 23, 2020 · 1 comment
Open

Embeddable Widget is not showing data #229

xehroz opened this issue Jul 23, 2020 · 1 comment

Comments

@xehroz
Copy link

xehroz commented Jul 23, 2020

Hi!

I have tried to embed the datagrepper widget by it does not show any data (activity)

You can see the live version in action here https://switch.shehroz.pk/

Also the code is also attached below.


<html>
    <head>
        <title>Switch it Datagrepper</title>
    </head>
  <body>
    <h1>My Contribution log in Fedora Project</h1>
    <p class="lead">Welcome to my Datagrepper front-end.</p>
    <p>Here is my latest Fedora activity:</p>

    <script id="datagrepper-widget"
      src="https://apps.fedoraproject.org/datagrepper/widget.js?css=true"
      data-user="shehroz"
      data-rows_per_page="40">
    </script>

     <p><a href="https://apps.fedoraproject.org/datagrepper/raw?user=shehroz">Raw Data</a>
     
     </p>
     <p> <br> </p>

    <footer>Happy Hacking!</footer>
  </body>
</html>
@nasirhm
Copy link

nasirhm commented Aug 31, 2020

Hey @xehroz , Thanks for reporting the issues. The issue seems to be with the widget file (widget.js) and it's reference (link) to a JQuery file over HTTP and the server is blocking it and prefers HTTPS.

I've made some changes to the widget file and changed it to HTTPS, Kindly use the attached file instead of https://apps.fedoraproject.org/datagrepper/widget.js?css=true once we know if it's the issue, we can push those changes upstream.

Save the following code in a file:


function include_js(url, success) {
    var script     = document.createElement('script');
    script.src = url;

    var head = document.getElementsByTagName('head')[0],
    done = false;
    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = function() {
        if (!done && (
                !this.readyState ||
                this.readyState == 'loaded' ||
                this.readyState == 'complete'
                )) {
            done = true;
            success();  // Do the callback
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);  /* poof */
        };
    };
    head.appendChild(script);
};

function run_with_jquery(callback) {
    var jq_url = 'https://apps.fedoraproject.org/datagrepper/static/jquery-2.1.0.min.js'
    if (typeof jQuery == 'undefined') {
        include_js(jq_url, callback);
    } else {
        callback();
    }
}
run_with_jquery(function() {$('script#datagrepper-widget').before('<div id="datagrepper-widget"></div>');;

var datagrepper_success = function(json) {
    $.each(json.raw_messages, function(i, msg) {
        var meta = msg.meta;
        if (meta === undefined) { meta = msg; }
        var card = '<div class="message-card">';
        if (meta.icon) {
            if (meta.link) {
                card = card +
                    '<a href="' + meta.link + '">' +
                    '<img src="' + meta.icon + '"/>' +
                    '</a>';
            } else {
                card = card + '<img src="' + meta.icon + '"/>';
            }
        }
        if (meta.secondary_icon) {
            card = card +
                '<img src="' + meta.secondary_icon + '"/>';
        }
        card = card +
            '<p>' + meta.subtitle + '</p>' +
            '</div>';
        card = card + '<div class="datetime">' + meta['date'] + '</div>';
        $("div#datagrepper-widget").append(card);
    });
}

// These are the default arguments that we use for our datagrepper query
var data = {
    order: 'desc',
    chrome: 'false'
};

// Check to see if the user has asked us to filter the firehose.
var datagrepper_attrs = [
    'user', 'package', 'category', 'topic',
    'order', 'rows_per_page', 'page', 'size',
    'grouped'];
$.each(datagrepper_attrs, function(i, attr) {
    var value = $('script#datagrepper-widget').attr("data-" + attr);
    if (value != undefined) {
        data[attr] = value;
    }
});

$.ajax(
    'https://apps.fedoraproject.org/datagrepper/raw/?meta=link&meta=icon' +
    '&meta=secondary_icon&meta=subtitle&meta=date', {
        data: data,
        dataType: 'jsonp',
        success: datagrepper_success,
        error: function() {
            console.log(arguments);
        }
    }
)
;

$('head').append('<link rel="stylesheet" href="https://apps.fedoraproject.org/datagrepper/static/css/bootstrap.css" type="text/css"/>');
;

$('head').append('<link rel="stylesheet" href="https://apps.fedoraproject.org/datagrepper/static/css/raw.css" type="text/css"/>');
});

and place it in the directory with the code you wrote and instead changing the link from https://apps.fedoraproject.org/datagrepper/widget.js?css=true to <filename - placeholder for the name of file you created>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nasirhm @xehroz