event listings in Joomla

[jrthor2]

I just installed Joomla and CiviCRM (I'm new to both).  I created a custom template for my Joomla site as seen in my attached photo of my homepage.  I have created a test event.  What I'd like to know how to do, is to have my next 2-3 events show up on the Events section on my homepage, and when clicked on, go to the details of that event.  Also, if a user clicks on the Events Tab at the top, go to a listing of all events.  Does CiviCRM display events in a calendar format, or just a listing?

Thanks!!

[Donald Lobo]

check:

http://joomla.demo.civicrm.org/index.php?option=com_civicrm&task=civicrm/event/ical&reset=1&page=1&html=1

which is the event listing in html format. CiviCRM does not have a calendar format

lobo

[jrthor2]

ok, that looks fine for the Events page, but how do I get the next 2-3 event titles to show up on my homepage?  also, where would I get the link for where my Events tab should link to to display all my events like the page you showed me?

thanks

[Donald Lobo]

1. might want to read the book to get an idea of how to do things in CiviCRM: http://en.flossmanuals.net/CiviCRM

2. You can goto the events dashboard, and click on the "web" link (globe like icon near top of page) to get the html listing

3. dont know enough about joomla to tell you how to get the event titles on the home page

lobo

[jrthor2]

Ok, when using the link from clicking on the globe, and if this is the link I'm suppossed to use in my page, it appears that CiviCRM generates invalid code.  It has <link> tags that point to css files in the body of the code.  There is also a ton of javascript includes in the body.  Is this correct?

[Donald Lobo]

can you be more specific with where the errors are. please give us the exact line number(s) and copy-n-paste the relevant lines of html to your reply

lobo

[jrthor2]

I'm not sure about line numbers, but here is the code that gets rendered when I create an event:

Code: [Select]

<div id="content_joomla" >
                   
<div id="crm-container" lang="en" xml:lang="en">
   

    <link rel="stylesheet" href="/joomla15/administrator/components/com_civicrm/civicrm/css/joomla_frontend.css" type="text/css" />
       
            <link rel="stylesheet" href="/joomla15/administrator/components/com_civicrm/civicrm/css/civicrm.css" type="text/css" />
   
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/jquery.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/jquery-ui.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/themes/smoothness/jquery-ui.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/flexigrid.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/flexigrid.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.autocomplete.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/jquery.autocomplete.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/tree_component.min.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/css.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/tree_component.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.menu.pack.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.dimensions.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/menu.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.chainedSelects.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.treeview.min.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.bgiframe.pack.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.contextMenu.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.tableHeader.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.tablednd.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/checkboxselect.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.textarearesizer.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.progressbar.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.form.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.tokeninput.js"></script>

<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/token-input-facebook.css);></style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.toolTip.js"></script>

<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/css/skins/aqua/theme.css);</style>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/js/calendar.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/js/lang/calendar-lang.php?en_GB"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/js/calendar-setup.js"></script>

<script type="text/javascript">var cj = jQuery.noConflict(); $ = cj;</script>

<script type="text/javascript">

cj( function( ) {
    var funVariable = 'bind';
   
       
    var currentId  = null;
    var hideAction = false;
   
     // Hiding action menu while clicking outside
    cj(document).click(function( ) {
     if ( !hideAction ) {
           cj(".btn-slide").each(function( ) {
                 cj(this).find("ul").hide( );
            });
        }
        hideAction = false;
    });
 
    eval('cj(".btn-slide").'+ funVariable +'( "click", function( ) {currentId = cj(this).find("ul").attr("id");cj(".btn-slide").each(function( ) {if ( currentId == cj(this).find("ul").attr("id") ) {cj(this).find("ul").show( );hideAction = true;} else {cj(this).find("ul").hide( );}});});');

});
</script>

    <div id="menu-container" style="display:none;">
    <ul id="civicrm-menu">
        <li id="crm-qsearch" class="menumain">
            <form action="/joomla15/index.php?option=com_civicrm&task=civicrm/contact/search/basic&" name="search_block" id="id_search_block" method="post" onsubmit="getSearchURLValue( );">
                <input type="text" class="form-text" id="sort_name" name="sort_name" style="width: 12em;"/>
                <input type="hidden" id="sort_contact_id" value="">
                <input type="submit" value="Go" name="_qf_Basic_refresh" class="form-submit default" style="display: none;"/>

            </form>
        </li>
       
    </ul>
</div>

<script type="text/javascript">
function getSearchURLValue( )
{
    var contactId =  cj( '#sort_contact_id' ).val();
    if ( ! contactId || isNaN( contactId ) ) {
        var sortValue = cj( '#sort_name' ).val();
        if ( sortValue ) {
            //using xmlhttprequest check if there is only one contact and redirect to view page
            var dataUrl = "/joomla15/index.php?option=com_civicrm&task=civicrm/ajax/contact&name=" + sortValue;

            var response = cj.ajax({
                url: dataUrl,
                async: false
                }).responseText;

            contactId = response;
        }
    }
   
    if ( contactId ) {
        var url = "/joomla15/index.php?option=com_civicrm&task=civicrm/contact/view&reset=1&cid=" + contactId;
        document.getElementById('id_search_block').action = url;
    }
}

/* Need to fix this properly*/
cj( function() {
    cj("#admin-menu").find("li :contains('CiviCRM')").click(function() {
        cj("#civicrm-menu").toggle();
        return false;
    });

    var contactUrl = "/joomla15/index.php?option=com_civicrm&task=civicrm/ajax/contactlist&context=navigation";

    cj( '#sort_name' ).autocomplete( contactUrl, {
        width: 200,
        selectFirst: false,
        matchContains: true
    }).result(function(event, data, formatted) {
        cj("#sort_contact_id").val(data[1]);
    });   
});

var framework = "Joomla";
if( framework != 'Joomla') {
cj('body').prepend( cj("#menu-container").html() );

//Track Scrolling
cj(window).scroll( function () {
   var scroll = document.documentElement.scrollTop || document.body.scrollTop;
   cj('#civicrm-menu').css({top: "scroll", position: "fixed", top: "0px"});
   cj('div.sticky-header').css({ 'top' : "23px", position: "fixed" });
});
} else {
   cj('div#toolbar-box div.m').html(cj("#menu-container").html());
   cj('#civicrm-menu').ready( function(){
cj('.outerbox').css({ 'margin-top': '6px'});
cj('#root-menu-div .menu-ul li').css({ 'padding-bottom' : '2px', 'margin-top' : '2px' });
cj('img.menu-item-arrow').css({ 'top' : '4px' });
});
}
var resourceBase   = "/joomla15/administrator/components/com_civicrm/civicrm/";
cj('#civicrm-menu').menu( {arrowSrc: resourceBase + 'packages/jquery/css/images/arrow.png'} );
</script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/js/Common.js"></script>

<table border="0" cellpadding="0" cellspacing="0" id="content">
  <tr>
    <td valign="top">

   
            <h1 class="title">Upcoming Events</h1>
     
<div id="printer-friendly"><a href="/joomla15/index.php?option=com_civicrm&amp;task=civicrm/event/ical&amp;option=com_civicrm&amp;task=civicrm/event/ical&amp;page=1&amp;html=1&amp;snippet=2" title="Printer-friendly view of this page."><img src="/joomla15/administrator/components/com_civicrm/civicrm/i/print-icon.png" alt="Printer-friendly view of this page." /></a></div>


    <div class="spacer"></div>

   
   

    <!-- .tpl file invoked: CRM\Event\Page\ICalendar.tpl. Call via form.tpl if we have a form in the page. -->
            <table>
<tr class="columnheader">
<th>Event</th>

<th>&nbsp;</th>
<th>When</th>
<th>Location</th>
<th>Category</th>
<th>Email</th>
</tr>
<tr class="odd-row ">
    <td><a href="/joomla15/index.php?option=com_civicrm&amp;task=civicrm/event/info&amp;reset=1&amp;id=1" title="read more"><strong>Test Event</strong></a></td>
    <td>Testing CiviCRM Events (<a href="/joomla15/index.php?option=com_civicrm&amp;task=civicrm/event/info&amp;reset=1&amp;id=1" title="details...">read more...</a>)</td>

    <td class="nowrap">
        October 25th, 2009  7:00 PM<br /><em>through</em><br />October 28th, 2009  8:00 PM            </td>
    <td>563 Randall Circle
Hummelstown, PA 17036
United States
</td>
    <td>Fundraiser</td>
    <td><a href="mailto:jroscoe10@comcast.net">jroscoe10@comcast.net</a></td>
</tr>

</table>   
   
    </td>

  </tr>
</table>


[Donald Lobo]

so why is it incorrect? i think we dont have as much control of the html in joomla, hence we put it in the body

lobo

[jrthor2]

It's incorrect because you have

Code: [Select]

<link rel="stylesheet" href="/joomla15/administrator/components/com_civicrm/civicrm/css/joomla_frontend.css" type="text/css" />
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/themes/smoothness/jquery-ui.css);</style>
in the middle of the body tag.  This is not valid code.

[Donald Lobo]

i dont think we can control where we add things in joomla (we do add them in  the head section of the html output in drupal / standalone). It does seem to work in most/all browsers

if this is a major issue for you please investigate what options are possible in joomla and file a patch that fixes this issue. that will help us be more compliant

thanx

lobo