Link to widget

eviltomato said 1 year, 8 months ago:

I am going to be making quite a few data tables for my site.

I am looking for a way to have a drop down button on the site that will let the visitor select which data table (widget) they see in the body. I do not want to create a separate page for every widget.

Am looking around at the insert lists and i dont see anything that would let me do this

thanks

chrisg said 1 year, 8 months ago:

@eviltomato,

It sounds like you are referring to our Easy Database for Websites Data Tables and Widgets. If that is the case, I can refer you to the following articles which explains how to create Data Tables and Data Widgets:

Creating Data Tables with Easy Database for Websites
Creating Data Widgets with Easy Database for Websites

Beyond this, what you want to accomplish sounds like it would require some custom scripting to accomplish. I cannot provide a script example, but I have notified our Easy Database developers of the inquiry who may be able to provide an example you can work with to accomplish this.

Christopher G.

bcb said 1 year, 8 months ago:

@eviltomato,

What you want to do is not part of Easy Database for Websites, but it can be accomplished using some custom Javascript.

You would need to wrap each widget inside of a <div> with a unique id, and then have an onchange event handler for the dropdown to toggle the visibility of the widgets.

Here is an example of how it could be done:

—————–

<select id=”widget_changer” onchange=”change_widget();”>
<option value=”widget_1″>Widget One</option>
<option value=”widget_2″>Widget Two</option>
<option value=”widget_3″>Widget Three</option>
</select>

<div id=”widget_1″><script>…embedded widget…</script></div>
<div id=”widget_2″><script>…embedded widget…</script></div>
<div id=”widget_3″><script>…embedded widget…</script></div>

<script type=”text/javascript”>
function change_widget() {
var dropdown = document.getElementById(‘widget_changer’);
for (var i = 0, len = dropdown.options.length; i < len; i++) {
var widget = document.getElementById(dropdown.options[i].value);
if (widget) {
widget.style.display = (i == dropdown.selectedIndex ? ‘block’ : ‘none’);
}
}
}

change_widget();
</script>

—————–

Note how the individual widgets are assigned an id, and those ids must match the value of the dropdown options.

Hope that helps!

Regards,
Brad B.
Easy Database Developer

eviltomato said 1 year, 8 months ago:

so close!

I went ahead and added 3 widgets to your code.

I clicked at the top and inserted a script… and put the entire code in it.

On the page i see the menu, but all the widgets show at the same time. Seems like the scripts are all running and the buttons are just kinda sitting at the top doing nothing lol.

<select id=”widget_changer” onchange=”change_widget();”>
<option value=”widget_1?>Widget One</option>
<option value=”widget_2?>Widget Two</option>
<option value=”widget_3?>Widget Three</option>
</select>

<div id=”widget_1?><script type=”text/javascript” id=”dbboon_script_4e9d02040a442″ src=”https://dbexternalsubscriber01.secureserver.net/embed/?method=getForm&accountId=12374&formId=References+October+2011&scriptId=4e9d02040a442&height=0&width=0″></script></div>
<div id=”widget_2?><script type=”text/javascript” id=”dbboon_script_4e9d823ecaebd” src=”https://dbexternalsubscriber01.secureserver.net/embed/?method=getForm&accountId=12374&formId=Google+October+2011&scriptId=4e9d823ecaebd&height=0&width=0″></script></div>
<div id=”widget_3?><script type=”text/javascript” id=”dbboon_script_4e9cf38839616″ src=”https://dbexternalsubscriber01.secureserver.net/embed/?method=getForm&accountId=12374&formId=Likes+October+2011&scriptId=4e9cf38839616&height=0&width=0″></script></div>

<script type=”text/javascript”>
function change_widget() {
var dropdown = document.getElementById(‘widget_changer’);
for (var i = 0, len = dropdown.options.length; i < len; i++) {
var widget = document.getElementById(dropdown.options[i].value);
if (widget) {
widget.style.display = (i == dropdown.selectedIndex ? ‘block’ : ‘none’);
}
}
}

change_widget();
</script>

bcb said 1 year, 8 months ago:

@eviltomato

Let me try that again since I think the forum formatting may have mangled the code.

Make sure that the HTML and Javascript are in the order shown below. The Javascript needs to come after the HTML so it will run properly.


<select id="widget_changer" onchange="change_widget();">
<option value="widget_1">Widget One</option>
<option value="widget_2">Widget Two</option>
<option value="widget_3">Widget Three</option>
</select>

<div id=”widget_1″><script>…embedded widget…</script></div>
<div id=”widget_2″><script>…embedded widget…</script></div>
<div id=”widget_3″><script>…embedded widget…</script></div>

<script type=”text/javascript”>
function change_widget() {
var dropdown = document.getElementById(‘widget_changer’);
for (var i = 0, len = dropdown.options.length; i < len; i++) {
var widget = document.getElementById(dropdown.options[i].value);
if (widget) {
widget.style.display = (i == dropdown.selectedIndex ? ‘block’ : ‘none’);
}
}
}

change_widget();
</script>

If that still does not work, can you post the URL to the page you are trying to add this to so I can look at it?

Regards,
Brad B.
Easy Database Developer

eviltomato said 1 year, 8 months ago:

yep still doing it. I tried it 2 ways… pasting all of the code into the script, and then putting the html into the coding part of the page and then adding just the script portion.

http://electionstats.net/google.php

I must say you… you are a big help and i appreciate it!

bcb said 1 year, 8 months ago:

Sorry, I can’t seem to get my post formatting to work correctly and the forum is mangling the quotes. I checked your webpage and I am pretty sure that is the issue. Everything else looks correct.

So you’ll need to fix these 2 issues with the quotes:

The quotes around the id in the <div id="widget_#"> lines.

And inside the change_widget() function there are 3 places that use single quotes (').

Regards,
Brad B.
Easy Database Developer

eviltomato said 1 year, 8 months ago:

I fixed the quotes around div_id.

In the change_widget i saw 3 sets of single quotes,, not really sure what you needed to be changed

bcb said 1 year, 8 months ago:

The single quotes are corrupted too… you just need to delete what is there and type a new quote mark.

I am going to try one more time to get the code in here formatted correctly.


<select id="widget_changer" onchange="change_widget();">
<option value="widget_1">Widget One</option>
<option value="widget_2">Widget Two</option>
<option value="widget_3">Widget Three</option>
</select>



<div id="widget_1"><script>...embedded widget...</script></div>
<div id="widget_2"><script>...embedded widget...</script></div>
<div id="widget_3"><script>...embedded widget...</script></div>



<script type="text/javascript">
function change_widget() {
var dropdown = document.getElementById('widget_changer');
for (var i = 0, len = dropdown.options.length; i < len; i++) {
var widget = document.getElementById(dropdown.options[i].value);
if (widget) {
widget.style.display = (i == dropdown.selectedIndex ? 'block' : 'none');
}
}
}

change_widget();
</script>

Regards,
Brad B.
Easy Database Developer

eviltomato said 1 year, 8 months ago:

i checked all the quotes in the script and they seem to be right. every open quote has an end quote

bcb said 1 year, 8 months ago:

The problem isn’t that the quotes are missing. It is that they get converted from a regular quote characters into “smart quotes.” The browsers do not handle smart quotes correctly, so it makes the Javascript invalid. In some fonts you can’t really tell a difference.

http://en.wikipedia.org/wiki/Quotation_mark#Smart_quotes

It looks like the last post I made didn’t convert the quotes, so you can copy and paste from it.

Regards,
Brad B.
Easy Database Developer

eviltomato said 1 year, 8 months ago:

boom! thanks!!