display_widget or elgg_view_entity in 1.7

I am trying to display widgets in my plugin page.  I use display_widget(id).
It creates extra javascript in the collapsable_box_editpanel which causes edit_panel to stay open when loaded.  How do I fix it?  Here's the html it puts out.


<div class="collapsable_box_editpanel">
    <script src="http://localhost/1.7/vendors/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://localhost/1.7/_css/js.php?lastcache=1270759331&amp;js=initialise_elgg&amp;viewtype=default" type="text/javascript"></script>
    <script src="http://localhost/1.7/vendors/jquery/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="http://localhost/1.7/vendors/jquery/jquery.form.js" type="text/javascript"></script>
    <link type="text/css" href="http://localhost/1.7/_css/css.css?lastcache=1270759331&amp;viewtype=default" rel="stylesheet">
    <style type="text/css">
        .collapsable_box_editpanel{
            display:block;
            font-size:12pt;
            font-weight:bold;
        }
        input[type="submit"] {
            width:100%;
            height:50px;
            font-size:12pt;
            font-weight:bold;
        }
        input[type="text"] {
            width:99%;
        }
        .input-access{
            font-size:12pt;
            font-weight:bold;
            height:30px;
            width:50%;
        }
    </style>
    <div class="collapsable_box_editpanel">
    <form method="post" action="http://localhost/1.7/action/widgets/save" id="widgetform11">
    <input type="hidden" value="1345a3f99a87ccb562094e3904b32641" name="__elgg_token"><input type="hidden" value="1271267494" name="__elgg_ts"><p>
        Number of groups to display:
        <select name="params[num_display]">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
    </p><p><label>Access:
    <select class="input-access" name="params[access_id]">
    <option value="0">Private</option><option value="-2">Friends</option><option selected="selected" value="1">Logged in users</option><option value="2">Public</option><option value="3">Group: junk</option><option value="4">Group: aaaa</option>    </select>
    </label></p><p><input type="hidden" value="11" name="guid"><input type="hidden" value="true" name="noforward"><input type="submit" value="Save" class="submit_button" name="submit11"></p></form></div>
    <script type="text/javascript">
    $(document).ready(function() {

    $("#widgetform11").submit(function () {

        $("#submit11").attr("disabled","disabled");
        $("#submit11").attr("value","Saving ...");
        $("#widgetcontent11").html('&lt;div align=\"center\" class=\"ajax_loader\"&gt;&lt;/div&gt;');
        $("#widget11 .toggle_box_edit_panel").click();

        var variables = $("#widgetform11").serialize();
        $.post($("#widgetform11").attr("action"),variables,function() {
            $("#submit11").attr("disabled","");
            $("#submit11").attr("value","Save");
            $("#widgetcontent11").load("http://localhost/1.7/pg/view/11?shell=no&amp;username=&amp;context=mobile_dashboards&amp;callback=true");
        });
        return false;
    });
});
</script></div>

  • The Elgg core does not create what you pasted there. jQuery is included in html head, but not inline like you are showing. Same with the inline css.

  • That's what I was thinking.  Here's what my code is .

    <?php echo elgg_view_entity(get_entity(11)); ?>
    or
    <?php echo display_widget(get_entity(11)); ?>

    This prints. The main area of concern is collabsable_box_edit_panel.

    <div id="widget11">
        <div class="collapsable_box">
            <div class="collapsable_box_header">   
                <a class="toggle_box_contents" href="javascript:void(0);">-</a><a class="toggle_box_edit_panel" href="javascript:void(0);">Edit</a>    <h1>Group membership</h1>
            </div>
            <div class="collapsable_box_editpanel">
                <script src="http://warpcore/~bshah/1.7/vendors/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
                <script src="http://warpcore/~bshah/1.7/_css/js.php?lastcache=1270759331&amp;js=initialise_elgg&amp;viewtype=default" type="text/javascript"></script>
                <script src="http://warpcore/~bshah/1.7/vendors/jquery/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
                <script src="http://warpcore/~bshah/1.7/vendors/jquery/jquery.form.js" type="text/javascript"></script>
                <link type="text/css" href="http://warpcore/~bshah/1.7/_css/css.css?lastcache=1270759331&amp;viewtype=default" rel="stylesheet">
                <style type="text/css">
                    .collapsable_box_editpanel{
                        display:block;
                        font-size:12pt;
                        font-weight:bold;
                    }
                    input[type="submit"] {
                        width:100%;
                        height:50px;
                        font-size:12pt;
                        font-weight:bold;
                    }
                    input[type="text"] {
                        width:99%;
                    }
                    .input-access{
                        font-size:12pt;
                        font-weight:bold;
                        height:30px;
                        width:50%;
                    }
                </style>
                <div class="collapsable_box_editpanel">
                    <form method="post" action="http://warpcore/~bshah/1.7/action/widgets/save" id="widgetform11">
                        <input type="hidden" value="8e32f1c7b868f64dd8aeb5db07e4f6ae" name="__elgg_token"><input type="hidden" value="1271338952" name="__elgg_ts"><p>
                            Number of groups to display:
                            <select name="params[num_display]">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                            </select>
                    </p><p><label>Access:
                    <select class="input-access" name="params[access_id]">
                    <option value="0">Private</option><option value="-2">Friends</option><option selected="selected" value="1">Logged in users</option><option value="2">Public</option><option value="3">Group: junk</option><option value="4">Group: aaaa</option>    </select>
                    </label></p><p><input type="hidden" value="11" name="guid"><input type="hidden" value="true" name="noforward"><input type="submit" value="Save" class="submit_button" name="submit11"></p></form></div>
                    <script type="text/javascript">
                        $(document).ready(function() {

                        $("#widgetform11").submit(function () {

                            $("#submit11").attr("disabled","disabled");
                            $("#submit11").attr("value","Saving ...");
                            $("#widgetcontent11").html('&lt;div align=\"center\" class=\"ajax_loader\"&gt;&lt;/div&gt;');
                            $("#widget11 .toggle_box_edit_panel").click();

                            var variables = $("#widgetform11").serialize();
                            $.post($("#widgetform11").attr("action"),variables,function() {
                                $("#submit11").attr("disabled","");
                                $("#submit11").attr("value","Save");
                                $("#widgetcontent11").load("http://warpcore/~bshah/1.7/pg/view/11?shell=no&amp;username=&amp;context=mobile_dashboards&amp;callback=true");
                            });
                            return false;

                        });

                    });
                    </script>
                </div><!-- /collapsable_box_editpanel -->
            <div class="collapsable_box_content">
                <div id="widgetcontent11">
                    <div class="groupmembershipwidget">
                        <div class="contentWrapper">
                            <div class="groupicon">
                                <a class="icon" href="http://warpcore/~bshah/1.7/pg/groups/82/aaaa/"><img border="0" title="" src="http://warpcore/~bshah/1.7/mod/groups/graphics/defaultsmall.gif"></a&gt;
                            </div>
                            <div class="search_listing_info"><p><span>aaaa</span><br></p></div><div class="clearfloat"></div></div><div class="contentWrapper">
                                <div class="groupicon">
                                    <a class="icon" href="http://warpcore/~bshah/1.7/pg/groups/15/junk/"><img border="0" title="" src="http://warpcore/~bshah/1.7/mod/groups/graphics/defaultsmall.gif"></a&gt;
                                </div>
                                <div class="search_listing_info"><p><span>junk</span><br>asfd</p></div><div class="clearfloat"></div></div></div>
                                </div>    
                            </div><!-- /.collapsable_box_content -->
                        </div><!-- /.collapsable_box -->   
                    </div>

    That's what I was thinking.  Here's what my code is .

    <?php echo elgg_view_entity(get_entity(11),false); ?>

    This prints.

    <div id="widget11">
        <div class="collapsable_box">

        <div class="collapsable_box_header">   

    <a class="toggle_box_contents" href="javascript:void(0);">-</a><a class="toggle_box_edit_panel" href="javascript:void(0);">Edit</a>    <h1>Group membership</h1>
        </div>
            <div class="collapsable_box_editpanel">






        <script src="http://warpcore/~bshah/1.7/vendors/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="http://warpcore/~bshah/1.7/_css/js.php?lastcache=1270759331&amp;js=initialise_elgg&amp;viewtype=default" type="text/javascript"></script>
     <script src="http://warpcore/~bshah/1.7/vendors/jquery/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
     <script src="http://warpcore/~bshah/1.7/vendors/jquery/jquery.form.js" type="text/javascript"></script>
        <link type="text/css" href="http://warpcore/~bshah/1.7/_css/css.css?lastcache=1270759331&amp;viewtype=default" rel="stylesheet">

    <style type="text/css">
        .collapsable_box_editpanel{
            display:block;
            font-size:12pt;
            font-weight:bold;
        }
        input[type="submit"] {
            width:100%;
            height:50px;
            font-size:12pt;
            font-weight:bold;
        }
        input[type="text"] {
            width:99%;
        }
        .input-access{
            font-size:12pt;
            font-weight:bold;
            height:30px;
            width:50%;
        }
    </style>


    <div class="collapsable_box_editpanel">
    <form method="post" action="http://warpcore/~bshah/1.7/action/widgets/save" id="widgetform11">
    <input type="hidden" value="8e32f1c7b868f64dd8aeb5db07e4f6ae" name="__elgg_token"><input type="hidden" value="1271338952" name="__elgg_ts"><p>
            Number of groups to display:
            <select name="params[num_display]">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
    </p><p><label>Access:
        <select class="input-access" name="params[access_id]">
        <option value="0">Private</option><option value="-2">Friends</option><option selected="selected" value="1">Logged in users</option><option value="2">Public</option><option value="3">Group: junk</option><option value="4">Group: aaaa</option>    </select>
        </label></p><p><input type="hidden" value="11" name="guid"><input type="hidden" value="true" name="noforward"><input type="submit" value="Save" class="submit_button" name="submit11"></p></form></div>
    <script type="text/javascript">
    $(document).ready(function() {

        $("#widgetform11").submit(function () {

            $("#submit11").attr("disabled","disabled");
            $("#submit11").attr("value","Saving ...");
            $("#widgetcontent11").html('&lt;div align=\"center\" class=\"ajax_loader\"&gt;&lt;/div&gt;');
            $("#widget11 .toggle_box_edit_panel").click();

            var variables = $("#widgetform11").serialize();
            $.post($("#widgetform11").attr("action"),variables,function() {
                $("#submit11").attr("disabled","");
                $("#submit11").attr("value","Save");
                $("#widgetcontent11").load("http://warpcore/~bshah/1.7/pg/view/11?shell=no&amp;username=&amp;context=mobile_dashboards&amp;callback=true");
            });
            return false;

        });

    });
    </script></div><!-- /collapsable_box_editpanel -->
            <div class="collapsable_box_content">
            <div id="widgetcontent11">

    <div class="groupmembershipwidget"><div class="contentWrapper">
    <div class="groupicon">
    <a class="icon" href="http://warpcore/~bshah/1.7/pg/groups/82/aaaa/"><img border="0" title="" src="http://warpcore/~bshah/1.7/mod/groups/graphics/defaultsmall.gif"></a&gt;
    </div>

     <div class="search_listing_info"><p><span>aaaa</span><br></p></div><div class="clearfloat"></div></div><div class="contentWrapper">
    <div class="groupicon">
    <a class="icon" href="http://warpcore/~bshah/1.7/pg/groups/15/junk/"><img border="0" title="" src="http://warpcore/~bshah/1.7/mod/groups/graphics/defaultsmall.gif"></a&gt;
    </div>

     <div class="search_listing_info"><p><span>junk</span><br>asfd</p></div><div class="clearfloat"></div></div></div>




    </div>    </div><!-- /.collapsable_box_content -->
        </div><!-- /.collapsable_box -->   
        </div>

  • To work correctly. This is how it should look.  I am not sure what I am doing wrong.

    <div id="widget11">
        <div class="collapsable_box">
        <div class="collapsable_box_header">
        <a href="javascript:void(0);" class="toggle_box_contents">-</a><a href="javascript:void(0);" class="toggle_box_edit_panel" style="display: block;">Edit</a>    <h1>Group membership</h1>
        </div>
        <div class="collapsable_box_editpanel" style="display: none;">
            <form id="widgetform11" action="http://warpcore/~bshah/1.7/action/widgets/save" method="post">
            <input type="hidden" name="__elgg_token" value="5b461d1797216aded0a08c27c1abd879"><input type="hidden" name="__elgg_ts" value="1271339540"><p>
                    Number of groups to display:
                    <select name="params[num_display]">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
            </p><p><label>Access:
                <select name="params[access_id]" class="input-access">
                <option value="0">Private</option><option value="-2">Friends</option><option value="1" selected="selected">Logged in users</option><option value="2">Public</option><option value="3">Group: junk</option><option value="4">Group: aaaa</option>    </select>
                </label></p><p><input type="hidden" name="guid" value="11"><input type="hidden" name="noforward" value="true"><input type="submit" name="submit11" class="submit_button" value="Save"></p></form>
        </div>
    <script type="text/javascript">
    $(document).ready(function() {

        $("#widgetform11").submit(function () {

            $("#submit11").attr("disabled","disabled");
            $("#submit11").attr("value","Saving ...");
            $("#widgetcontent11").html('&amp;lt;div align=\"center\" class=\"ajax_loader\"&amp;gt;&amp;lt;/div&amp;gt;');
            $("#widget11 .toggle_box_edit_panel").click();

            var variables = $("#widgetform11").serialize();
            $.post($("#widgetform11").attr("action"),variables,function() {
                $("#submit11").attr("disabled","");
                $("#submit11").attr("value","Save");
                $("#widgetcontent11").load("http://warpcore/~bshah/1.7/pg/view/11?shell=no&amp;amp;username=&amp;amp;context=mobile_dashboards&amp;amp;callback=true");
            });
            return false;

        });

    });
    </script>
            <div class="collapsable_box_content" style="display: block;">
            <div id="widgetcontent11">

    <div class="groupmembershipwidget"><div class="contentWrapper">
    <div class="groupicon">
    <a href="http://warpcore/~bshah/1.7/pg/groups/82/aaaa/" class="icon"><img border="0" src="http://warpcore/~bshah/1.7/mod/groups/graphics/defaultsmall.gif" title=""></a>
    </div>

     <div class="search_listing_info"><p><span>aaaa</span><br></p></div><div class="clearfloat"></div></div><div class="contentWrapper">
    <div class="groupicon">
    <a href="http://warpcore/~bshah/1.7/pg/groups/15/junk/" class="icon"><img border="0" src="http://warpcore/~bshah/1.7/mod/groups/graphics/defaultsmall.gif" title=""></a>
    </div>

     <div class="search_listing_info"><p><span>junk</span><br>asfd</p></div><div class="clearfloat"></div></div></div>




    </div>    </div><!-- /.collapsable_box_content -->
        </div><!-- /.collapsable_box -->   
        </div>

  • I've search through the source in Elgg 1.7.1 beta and cannot find anywhere that has that inline css. You should be able to do a search for it and figure out where it is coming from.

  • I fixed the issue by using Wrapper instead of the function display_widget or elgg_view_entity. 

    Thank you fro your help.