Toggle Sorting - Inventory - Price / Name

[a_design_interactive]

## Using PHP & MySQL / HTML Table

Table = DB result output to 3 cols:
(Item Name | Description | Pricing)

in testing, i've tweaked my SQL from sorting by name, to sort instead by price. it would be cool to offer the user an option to toggle the sorting between product name or price-- but NOT to do it via another query action because that procedure takes too much time.

I thought that perhaps i could using the "display:none" toggle hidden div trick, as in:

$javascript = '<!--
function switchMenu(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != "block" ) {
		el.style.display = "block";
	}
	else {
 
		el.style.display = "none";
	}
}
//-->';

to simply "hide", for instance, a price-sorted table and then on-toggle, the price-sorted would be visible and the former would then become hidden-- so through this manner, we can eliminate the time needed to query the db, and there's no need to reload the page.

i couldn't figure out how to do the "flip-flop" aspect of it. it's easy to "hide / display / hide / etc" the single table element (thanks to what i've learned from the excellent teachers here a DD!), but 2 elements "at once" seems a whole different animal.

THANK YOU! i look forward to what reading any replies!
PS. i thought also perhaps the problem could be solved by dynamically changing the name of the ID in the javascript code-- but i don't know how to do it / if it's possible... as it would probably be the more sensible / easy solution?

[thetestingsite]

If you are only switching between two items, why not try the following.

function switchMenu(show, hide) {
	var hide_obj = document.getElementById(hide);
        var show_obj = document.getElementById(show);

        show_obj.style.display = "block";
        hide_obj.style.display = "none";
}

Then, in your HTML code (where you define the id[s] of the element[s]), place the following (as an example):

<a href="#" onclick="switchMenu('price', 'description'); return false;">Sort By Price</a>

<div id="price" style="display: block;">This is the price div</div>

Replace the part in red with the div/table id that you want to show, and the part in blue with the div/table id you want to hide.

If you wanted to show a third sorting option, simply add a third attribute to the function.

Hope this helps.

[a_design_interactive]

hey there, T-3!


this looks cool-- learning something new each time i come back w/ a question, which is a good thing!

actually-- it's sort of half going over my head, and half sinking in. i probably won't get it until i play around w/ it a bit. i understand the whole thing about 1, 2, 3 or more attributes being passed into / processed by the function -- and what they represent-- the id="" of the DIV, right? but-- i guess it's the basic "built-in" stuff where i'm getting lost or something. i dunno...

let me ask you this:
what does it mean to write:

var hide_obj = document.getElementById(hide);

???
i can see the other part more easily

        show_obj.style.display = "block";

i see that as, show_obj is a var you defined above, and it is supposed to affect the display style : block (from style.display = "block"), but how we get the actual "action"... i think it's the function of the document.getElementById() that i don't understand. i need to reference that built-in function, and gain a better understanding-- otherwise, i'm going to remain confused on how these hand-rolled functions are made to work.

i'll get it... but i need to learn more of the fundamentals yet, obviously