Invoking a modal from within a named function... and having it popup properly.

[Sandor]

The project has a number of huge word wall pages where its desirable to tag various persons with a popup with their extended info, several dozen per page.  After I finish my work on the site, I expect less skilled operators to add content at a later time, so I want to automate as much of the process as I can to prevent typos breaking the pages.

There ought to be a way...   There really ought to be a way where I can put this....

<button class='w3-button w3-round [Lookup color from argument 3] [lookup hover-color from argument 3]' onclick="document.getElementById('[argument 1]').style.display='inline'">[argument 2]</span>

into a shortcut function call like....

<script> nameTag(john_doe123, John, A); </script>

Where the output sent to the browser engine is this: 

<button class='w3-button w3-round w3-red w3-hover-blue' onclick="document.getElementById('john_doe123').style.display='inline'">John</span>

There really must be a viable way to not hand code every single instance of those button calls...  How do I do it?   Every method I've devised so far doesn't work.  I feel like the solution is mockingly close too.

<script>
  funtion nameTag(a, b, c) {
	//assume code here for taking 'C' above and calculating what colors to use//
	let color1 = "w3-red";
	let color2 = "w3-hover-blue";
	let result = "\"<span class='w3-tag w3-round\"" + color1 + color2 + "' onClick=\"document.getElementById('" + arg1 + "').style.display='inline'\">" + arg2 + "</span>";
}
</script>

Which isn't returning anything.  I've thought myself into a corner and need help.

[dsonesuk]

Because you have applied the string values, BUT! not doing anything with result, it should refer to a id ref of the element you are targeting and use that to apply new classnames,  click event and styling.

Consider using multi-dimensional array to store grouping of different values.

[Sandor]

Not sure I follow what you mean.    The goal is to make a quick and easy function call to act as a macro to fill in the supplied data...    If I'm going to use a multi-dimensional array I might as well start building the dataset in MySQL or even just XML and hoping those that come after won't muck it up.

 

 

[dsonesuk]

Any of those will do, but as you are calling a js function to apply the stored values i suggested a javascript method of array.

nameTagArr[

["John123",123,"John","w3-red","w3-hover-blue"],

["Josh456",456,"Josh","w3-blue",w3-hover-red"]

]

All you have to do is use array index of nameTagArr[0][0],

nameTagArr[0][1],

nameTagArr[0][2]

to get each value in first array listing of values.

And all you have to do is pass index parameter of 0 or 1...

<code>

function nameTag(indexRef) { //assume code here for taking 'C' above and calculating what colors to use//

let color1 = nameTagArr[indexRef][3];

let color2 = nameTagArr[indexRef][4];

let result = '<span  class="w3-tag w3-round' + color1 +' '+color2 +'">'+nameTagArr[indexRef][2]+'</span>';

let vTargetelem = document.getElementById(nameTagArr[indexRef][0]);

vTargetelem.style.display="inline";

vTargetelem.innerHTML=result;

}

</code>

Not tested, did on mobile.

Edited October 18, 2021 by dsonesuk

[Sandor]

First off thank you so much.   I did not end up using your method...  But while trying to figure out what you meant lead me down the path to where I rediscovered the php function stripslashes() and that worked as required allowing me to code the replacement in PHP where I have the best programming foundation.

Now when I type

<?php nameTag("john_doe123","John","C"); ?>

it builds the html correctly.

Here is the secret sauce....

<?php
function nameTag($id_tag,$alias,$dept_tag) {
    switch ($dept_tag) { //This only sets the correct colors for the button.
        case "B":
            $color1 = " w3-indigo";
            $color2 = " w3-hover-blue";
            break;
        case "C":
            $color1 = " w3-dark-grey";
            $color2 = " w3-hover-grey";
            break;
        case "DA":
            $color1 = " w3-blue-grey";
            $color2 = " w3-hover-teal";
            break;
        case "DR":
            $color1 = " w3-deep-purple";
            $color2 = " w3-hover-purple";
            break;
        case "F":
            $color1 = " w3-deep-orange";
            $color2 = " w3-hover-orange";
            break;
        case "R":
            $color1 = " w3-green";
            $color2 = " w3-hover-light-green";
            break;
        case "W":
            $color1 = " w3-cyan";
            $color2 = " ww3-hover-light-blue";
            break;
        default:
            $color1 = " w3-black";
            $color2 = " w3-white";
    }
    $r1 = "<span class=\' w3-tag w3-round".$color1.$color2."\' onclick=\"document.getElementById(\'".$id_tag."\').style.display=\'block\'\">".$alias."</span>";
    echo "\n".stripslashes($r1)."\n";
}
?>

 

Edited October 19, 2021 by Sandor
fix typo in code block.

[dsonesuk]

If you reversed the double quotes to single for HTML text, you wouldn't require that?

$r1 = '<span class=" w3-tag w3-round' . $color1 . $color2 . '" onclick="document.getElementById(\'' . $id_tag . '\').style.display=\'block\';">' . $alias . '</span>';

        echo "\n" . $r1 . "\n";

Matches surrounding HTML using double quotes for attributes and less use of slashes. But you still have to use double quotes for newline characters.

Edited October 21, 2021 by dsonesuk
missed block quotes

[Sandor]

Thank you, I'll get that a try later.  For some reason my mind wants to default to double quotes when ever a sub-element also requires quotation marks and then using single quotes...   I think its something that was instilled in primary school grammar lo those many years ago.