How can I display different sort options on the web page.

discuss.answer

24,544 Posts

BobRay Reply #11, 13 years ago

OK, let's leave the filtering out of the picture for now. Worry about the JS after you get everything working the way you like it.
Try this using the submit button (untested).

<form action="[[~[[*id]]]]" method="POST">
<select name="sort_method" onchange="this.form.submit()">
   <option value="itemno" selected="selected">Sort by Name</option>
   <option value="height">Sort by Height</option>
   <option value="width">Sort by Width</option>
</select>
<input type="submit" value="Submit">
</form>

<?php
$output = '';
$path = MODX_CORE_PATH . 'components/aeiproducts/';
$result = $modx->addPackage('aeiproducts', $path .
    'model/', 'aei_');

if (!$result) {
    return 'failed to add package';
}
/* Set default sort field */
$sortby = 'itemno';

/* Use form value if there is one */
if (isset($_POST['sort_method']) && (! empty($_POST['sort_method']))) {
    $sortby = $_POST['sort_method'];
}
  
$c = $modx->newQuery('Product');
$c->sortby($sortby, 'ASC');

/* For future use: */

// if (isset($_POST['filter']) && (!empty($_POST['filter']))) {
//    $c->where(array('cat' => $_POST['filter']));
// }
 
$products = $modx->getCollection('Product', $c);
foreach ($products as $product) {
    $fields = $product->toArray();
    $output .= $modx->getChunk('ShowProds', $fields);
}

return $output;

[ed. note: BobRay last edited this post 13 years ago.]

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

123 Posts

redhen Reply #12, 13 years ago

Quote from: BobRay at Sep 28, 2013, 10:50 PM

OK, let's leave the filtering out of the picture for now. Worry about the JS after you get everything working the way you like it.
Try this using the submit button (untested).

<form action="[[~[[*id]]]]" method="POST">
<select name="sort_method" onchange="this.form.submit()">
   <option value="itemno" selected="selected">Sort by Name</option>
   <option value="height">Sort by Height</option>
   <option value="width">Sort by Width</option>
</select>
<input value="Submit" type="submit">
</form>

<!--?php
$output = '';
$path = MODX_CORE_PATH . 'components/aeiproducts/';
$result = $modx--->addPackage('aeiproducts', $path .
    'model/', 'aei_');

if (!$result) {
    return 'failed to add package';
}
/* Set default sort field */
$sortby = 'itemno';

/* Use form value if there is one */
if (isset($_POST['sort_method']) && (! empty($_POST['sort_method']))) {
    $_POST['sort_method'];
}
  
$c = $modx->newQuery('Product');
$c->sortby($sortby, 'ASC');

/* For future use: */

// if (isset($_POST['filter']) && (!empty($_POST['filter']))) {
//    $c->where(array('cat' => $_POST['filter']));
// }
 
$products = $modx->getCollection('Product', $c);
foreach ($products as $product) {
    $fields = $product->toArray();
    $output .= $modx->getChunk('ShowProds', $fields);
}

return $output;

Thank you Bob!
Using "sort_method" like you suggested did the trick. It's almost (...) working now.

In the resource:

<form action="[[~[[*id]]]]" method="POST">
<select name="sort_method" onchange="this.form.submit()">
   <option value="itemno" selected="selected">Sort by Name</option>
   <option value="height">Sort by Height</option>
   <option value="width">Sort by Width</option>
</select>
<input type="submit" value="Submit">
</form>

[[ShowProds]]

I took out

onchange="this.form.submit()"

because it's not necessary when you use a submit button, plus I had to call the snippet un-cached like this:

[[!ShowProds]]

to have the page change.

In the snippet I added $sortby =

if (isset($_POST['sort_method']) && (! empty($_POST['sort_method']))) {
    $_POST['sort_method'];
}

like this

if (isset($_POST['sort_method']) && (! empty($_POST['sort_method']))) {
    $sortby = $_POST['sort_method'];
}

I'm getting a drop down on my product page and it changes when I select one of the different sort options. So far so good. Now I would like to use

onchange="this.form.submit()"

and leave out the submit button. The problem is the drop down keeps going back to Sort by Name so I can't select it. By the way, this also happens in the version with the submit button.

Does anyone know why that happens? Thanks again for all your help!

24,544 Posts

BobRay Reply #13, 13 years ago

Your correction is what I thought I'd typed to begin with. wink

If you're going to implement a search filter, using the onChange() code will mean that some users are going to end up submitting the form by accident before they have a chance to fill in the filter. That would be kind of annoying, imo.

That said, I think the problem is that the onChange event is attached to the selection, so that's what 'this' resolves to and the select input doesn't have a form inside it.

Adding name="myform" to the form tag and using this might work:

onChange()="document.myform.submit();"

[ed. note: BobRay last edited this post 13 years ago.]

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

123 Posts

redhen Reply #14, 12 years, 11 months ago

Quote from: BobRay at Sep 30, 2013, 05:21 PM

Your correction is what I thought I'd typed to begin with.

If you're going to implement a search filter, using the onChange() code will mean that some users are going to end up submitting the form by accident before they have a chance to fill in the filter. That would be kind of annoying, imo.

That said, I think the problem is that the onChange event is attached to the selection, so that's what 'this' resolves to and the select input doesn't have a form inside it.

Adding name="myform" to the form tag and using this might work:
onChange()="document.myform.submit();"

This works the same as what I had before

onchange="this.form.submit()"

But it might be useful when I put 2 forms on the page, I'm going to test that further down the road.

I'm adding an option to the drop down

<form action="[[~[[*id]]]]" method="POST" name="myform">
<select name="sort_method" onChange="document.myform.submit();">
   <option value="">Choose Sort Order...</option>
   <option value="itemno">Sort by Name</option>
   <option value="height">Sort by Height</option>
   <option value="width">Sort by Width</option>
</select></form>

so it will go back to "Choose Sort Order..." after selecting. It's still not exactly what I'm looking for but I'm very happy the rest is working.
I'm going to see what I can do with JS to make the drop down look better, maybe this issue will resolve itself.

I will mark this thread as answered and open up a new one when time comes! Thanks for all the help.

Answered How can I display different sort options on the web page.