Select All Option (SOLVED)

Archived from the Xataface Users forum.

cantlep — Wed Jun 02, 2010 2:11 pm

Hiya,

In my “ContractData” table, I have a relationship with “SiteData”. The sites within SiteData show up when I create a new contract record. Is there a way that I can have a “Select All” option (as well as the tick boxes next to each site name).

Thanks

Paul

shannah — Wed Jun 02, 2010 8:18 pm

Is this on the existing related record form? Or the grid widget?

cantlep — Wed Jun 02, 2010 11:43 pm

In ContractData/fields.ini I have this:

Code: Select all: [SiteName] widget:label = "Site Names" widget:question = "Select one or multiple sites for this contract" transient=1 relationship=SiteData widget:type=checkbox widget:columns=12 validators:required = true order=2

What I’m after is a “Select All Site Names” option. with the site checkboxes. Does that make sense?

PS: I did have a look at the grid widget but couldn’t get the relationship to work properly as per the wiki. The relationship works fine with the checkboxes though.

Code: Select all: [SiteData] SiteData_ContractData.SiteName=SiteData.SiteName SiteData_ContractData.ContractDataID="$ContractDataID"

I did try it with this:

Code: Select all: __sql__ = "select * from SiteData WHERE SiteDataID='$SiteDataID'"

but it doesn’t display anything proprtly in the grids.

Thanks

shannah — Mon Jun 07, 2010 9:43 am

You could do this with a bit of javascript… good idea for built-in functionality, but it doesn’t exist yet.

Hint: use something like the after_xxx_widget block or before_xxx_widget_block, and add a select all button. Then you can use jquery to easily check all the checkboxes. THere are lots of examples of the ‘net. E.g.:
http://briancray.com/2009/08/06/check-a … avascript/

cantlep — Mon Jun 07, 2010 3:08 pm

Hi Steve,

Well, I think I’ve got stuff in the right place but it’s not really doing much

Here’s what I’ve got

conf/ApplicationDelegate.php

Code: Select all: function block__before_SiteName_widget() { echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"language="javascript"></script>'; echo '<script type="text/javascript" src="checkall.js" language="javascript"></script>'; echo '<div class="checkbox-of-SiteName"><input type="checkbox" name="checkall"><label for="checkall">Select all Sites</label></div>'; }

/checkall.js

Code: Select all: $(function () { // this line makes sure this code runs on page load $('#checkall').click(function () { $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked); }); });

Have I missed something obvious?

Cheers

Paul

shannah — Mon Jun 07, 2010 3:18 pm

A couple of things. I think jquery is already included for the edit form (could be wrong – you can check it out by viewing hTML source of the edit form.

Is your button showing up at all, or is the button showing up and then not working when you click it?

Looking at your code it is apparent that the button will not work like this. Your javascript directs it to only check boxes withing the #checkall div, which only includes your “Select All” button, but doesn’t include the actual checkboxes of the widget. Rather than using the #checkall selector, you should use a selector pointing to the div that wraps the whole widget (and all its checkboxes).

cantlep — Mon Jun 07, 2010 3:27 pm

Hi Steve,

Cheers for the reply.

1) Confirmed, it is
2) The latter, the box appears but doesn’t check anything.

In the example given on the site you pointed me to, the #checkall div doesn’t exist apart from the actual checkall checkbox.

Code: Select all

`<fieldset>
<div class="radio"> Check all</div>

<div class="radio"> Checkbox</div>
<div class="radio"> Checkbox</div>
<div class="radio"> Checkbox</div>
<div class="radio"> Checkbox</div>
<div class="radio"> Checkbox</div>

</fieldset>

</form>

Which is what I’ve done. The div class my checkboxes are in doesn’t have a name, it’s just an open div and a close div.

Cheers

cantlep — Mon Jun 07, 2010 4:18 pm

hmm, actually, I think it’s the (‘fieldset:eq(0)’) that’s hindering…as the checkboxes aren’t located in <fieldset>.

They look like this:

Code: Select all: <td class="Dataface_QuickForm-widget-cell"> <div class="field " id="ContractData-SiteName-wrapper"> <div> <div class="formHelp">Select one or multiple sites for this contract</div> <script type="text/javascript" src="checkall.js" language="javascript"></script><div class="field"><input type="checkbox" name="checkall" id="checkall"><label for="checkall">Select all Sites</label></div>  <table><tr><td> <input class="checkbox-of-SiteName " name="SiteName[SiteDataID=18]" type="checkbox" value="1" id="qf_df1b7f" /><label id="qf_df1b7f-label" for="qf_df1b7f">blah[555555]</label> <br /> </td><td> <input class="checkbox-of-SiteName " name="SiteName[SiteDataID=19]" type="checkbox" value="1" id="qf_52ee59" /><label id="qf_52ee59-label" for="qf_52ee59">Colchester Print Centre[150009124857]</label>

but I don’t know how to write that reference in the jscript.

cantlep — Mon Jun 07, 2010 4:33 pm

This sorted it:

Code: Select all: $(function () { // this line makes sure this code runs on page load $('#checkall').click(function () { $(this).parents('#ContractData-SiteName-wrapper').find(':checkbox').attr('checked', this.checked); }); });

Note the parent being changed to the field ID the boxes reside in.

Cheers