Only showing other drop-down with "display: show" and does not open with a click

[oz11]

 

Hey.

 

This is how it shows atm when enabling "display: block;" on the second drop down box for "show similar linkage".  The "show domain linkage"  button/link works fine and shows its  content.. though I connot get "Show simiar linakge" to work on click to show its content, and only shows when enabling block in the code. 

 

Here are some of the sections of code:

JS:

<script type='text/javascript'>
    function showDiv(id)
    {
        let thediv = document.getElementById(id)
        if (thediv.style.display == "block") {
            thediv.style.display = "none"
        }
        else {
            thediv.style.display = "block"
        }
        
    }
</script>

Style:

<style type='text/css'>
    .mydiv {
        display: none;
    }
        .mydiv2 {
        display: block;
    }
</style>

Functions:

function getLinkTree($pdo, $url, $index) {
    $res = str_replace(array('https://www.', 'http://www.', 'https://','http://'), '', $url);
    $stmt = $pdo->prepare("SELECT url, reference FROM links WHERE url LIKE ?");
    $stmt->execute(["%$res%"]); 
    echo "<br><div id='".$index."' class='mydiv'  style='float: right; background-color: white; background-color:rgba(255,255,255, 0.5); border: 1px solid grey; padding: 6px;' id='tree'>";
    while ($row = $stmt->fetch()) {
        //<a href='out.php?ref=" . $row['reference'] . "' target='_blank'>
        echo "<a style='color: black;' href='out.php?ref=". $row['reference'] ."'>".$row['url']."</a><br />";
    }
    echo "</div>";
}

function getLinkSimilar($pdo, $url, $index) {
    $res = str_replace(array('https://www.', 'http://www.', 'https://','http://','.com', '.com/', '.co.uk', 'co.uk/', '.is', '.is/', 'news.', 'shopping.'), '', $url);
    $stmt = $pdo->prepare("SELECT url, reference FROM links WHERE url LIKE ?");
    $stmt->execute(["%$res%"]); 
    echo "<div id='".$index."' class='mydiv2' style='float: right; background-color: white; background-color:rgba(255,255,255, 0.5); border: 1px solid grey; padding: 6px;' id='tree'>";
    while ($row = $stmt->fetch()) {
        //<a href='out.php?ref=" . $row['reference'] . "' target='_blank'>
        echo "<a style='color: black;' href='out.php?ref=". $row['reference'] ."'>".$row['url']."</a><br>";
    }
    echo "</div>";
}

 

And displaying (section)....

 

                    echo "<br><a href='#' onclick=\"showDiv(".$index.")\" style='float: right; margin-top: -6px; margin-right: 8px;'>Show domain linkage</a>";
                    echo getLinkTree($pdo, $row['url'], $index);

                    echo "<br><a href='#' onclick=\"showDiv(".$index.")\" style='float: right; margin-top: -6px; margin-right: 8px;'>Show similar linkage</a>";
                    echo getLinkSimilar($pdo, $row['url'], $index);
                    echo "</span></small></li>";

 

.. as you can see. the functions are very similar but work independently so need two drop-down boxes. 

 

Atm, the second div stays open, because its set as "block" though when i set it as "none" it does not open on click.  Not sure how to approach this one..

 

Edited November 15, 2022 by oz11
addition

[dodgeitorelse3]

this line has 2 id's in it. You can have only 1.

echo "<br><div id='".$index."' class='mydiv'  style='float: right; background-color: white; background-color:rgba(255,255,255, 0.5); border: 1px solid grey; padding: 6px;' id='tree'>";
    

and I believe you need quotes around the id in this line as well as a proper name for the id

let thediv = document.getElementById(id)
        

 

Edited November 15, 2022 by dodgeitorelse3
typo

[ginerjm]

Nice pickup on that double id considering how it was written.  Plus it references a class yet includes a lot of css that could be better included in the class definition.  And since we're picking up on duplicate things, how about the duplicate background color settings?

Ps - note that the break up of the line of code to include the "index" variable is really not necessary.  You are starting the string with a double quote so the id only needs to reference the value in single quotes without breaking the string.

[oz11]

Ok. I made the following changes:

• removal of redundant id ("tree")
• relocated css in to class -- background colour etc
• change css background repetition 
• added double quotes. Changed to: 

      echo "<br><div id=\"".$index."\" class='mydiv'>";

  Still the second link "Show similar linkage"  is not responding. It only brings up the link above it (Show domain linkage) Help.

I've tried simply adding another section of JS to be showDiv() and showDiv2(), but did not work

Edited November 15, 2022 by oz11

[ginerjm]

echo "<br><div id='$index' class='mydiv'>";

[oz11]

I changed the code to as you suggested (well, a little different. See bellow. 

Quote

    echo "<br><div id='".$index."' class='mydiv'>";
 

However when i click either of the links I'm getting the "Show domain linkage" results, though they should be different. "Show domain linkage "vs. "Show similar linkage"

Edited November 15, 2022 by oz11
details

[Barand]

You can

echo "<br><div id='$index' class='mydiv'>";

or, if you specifically want double-quotes (as is sometimes necessary), you can

echo "<br><div id=\"$index\" class='mydiv'>";

Either way there is no concatenation and convoluted nested quotes required

[ginerjm]

You didn't use the code that I gave you.  Do you not understand the use of quotes in strings with php vars?

Barand just gave you the same string that I wrote.  Are you going to massacre his as well?

[oz11]

 i will go your simpler way without concatenation then. 

Still just displaying content from  the first link though after edit.. :S

Edited November 15, 2022 by oz11
stuff to add

[Barand]

The simpler you make it the less chance there is of errors.

[oz11]

Just thought it  would be simple like the one i did before., which worked independently but causes  conflict with the other. it seems.

Edited November 15, 2022 by oz11

[ginerjm]

The first code was wrong.  What I  & Barand gave you corrected it.

Can we see the new line you are using?

[oz11]

Quote

echo "<br><div id='$index' class='mydiv'>";

 

[ginerjm]

Exactly.

[oz11]

Was thinking that doing something like this would work,..

                    echo "<br><a href='#' onclick=\"showDiv(".$index.")\" style='float: right; margin-top: -6px; margin-right: 8px;'>Show domain linkage</a>";
                    echo getLinkTree($pdo, $row['url'], $index);

                    echo "<br><a href='#' onclick=\"showDiv(".$index.")\" style='float: right; margin-top: -6px; margin-right: 8px;'>Show similar linkage</a>";
                    echo getLinkSimilar($pdo, $row['url'], $index);

to 

                    echo "<br><a href='#' onclick=\"showDiv(".$index.")\" style='float: right; margin-top: -6px; margin-right: 8px;'>Show domain linkage</a>";
                    echo getLinkTree($pdo, $row['url'], $index);

                    echo "<br><a href='#' onclick=\"showDiv2(".$index.")\" style='float: right; margin-top: -6px; margin-right: 8px;'>Show similar linkage</a>";
                    echo getLinkSimilar($pdo, $row['url'], $index);

But to no avail 

 

Edit: see  "showDiv2": separation between code

Edited November 15, 2022 by oz11

[ginerjm]

YOu are making the same errors we just tried to educate you on NOT doing.

[oz11]

is this ok then?..

                    echo "<br><a href='#' onclick='showDiv($index)' style='float: right; margin-top: -6px; margin-right: 8px;'>Show domain linkage</a>";
                    echo getLinkTree($pdo, $row['url'], $index);

                    echo "<br><a href='#' onclick='showDiv($index)' style='float: right; margin-top: -6px; margin-right: 8px;'>Show similar linkage</a>";
                    echo getLinkSimilar($pdo, $row['url'], $index);

 

[Barand]

I may be reading it wrong but it looks to me that you are allocating the same id (ie $index) to the linkTree div and the linkSimilar tree.

[oz11]

8 minutes ago, Barand said:

I may be reading it wrong but it looks to me that you are allocating the same id (ie $index) to the linkTree div and the linkSimilar tree.

hmm.. not sure why that's there.  Might need to test the option here..

Though  some testing: When I remove both of the id ($index), then the boxes stop appearing. However, and this is cool,.. wait for it...  when I remove the one from getLinkTree and keep the one in getLinkSimilar then suddenly the second box starts working (!), but not the first one (getLinkTree). Suggestions?  Just need to manage both to work here. Right?

Sorry my grammer is bad. But the good thing is that we seem to be getting there.

Edited November 15, 2022 by oz11
grammer

[Barand]

6 minutes ago, oz11 said:

Suggestions?

IDs need to be unique. You cannot have two (or more) elements with the same id. Give them different ids - simple!.

[oz11]

Just tried that. Changed the id names around. Unlucky though it cannot be that simple, for me even, as when i do nothing shows.

function getLinkTree($pdo, $url, $index) {
    $res = str_replace(array('https://www.', 'http://www.', 'https://','http://'), '', $url);
    $stmt = $pdo->prepare("SELECT url, reference FROM links WHERE url LIKE ?");
    $stmt->execute(["%$res%"]); 
    echo "<br><div id='tom' class='mydiv'>";
    while ($row = $stmt->fetch()) {
        //<a href='out.php?ref=" . $row['reference'] . "' target='_blank'>
        echo "<a style='color: black;'  target='_blank' href='out.php?ref=". $row['reference'] ."'>".$row['url']."</a><br />";
    }
    echo "</div>";
}

function getLinkSimilar($pdo, $url, $index) {
    $res = str_replace(array('https://www.', 'http://www.', 'https://','http://','.com', '.com/', '.co.uk', 'co.uk/', '.is', '.is/', 'news.', 'shopping.'), '', $url);
    $stmt = $pdo->prepare("SELECT url, reference FROM links WHERE url LIKE ?");
    $stmt->execute(["%$res%"]); 
    echo "<br><div id='jerry' class='mydiv'>";
    while ($row = $stmt->fetch()) {
        //<a href='out.php?ref=" . $row['reference'] . "' target='_blank'>
        echo "<a style='color: black;'  target='_blank' href='out.php?ref=". $row['reference'] ."'>".$row['url']."</a><br>";
    }
    echo "</div>";
}

Strangely it only works with $index, well half of it anyway. Atm. It's not even as if there is a class/id block of code to attach. just works kinda.

 

 

Edit: There is definitely a bug here but dont know what.

Edited November 16, 2022 by oz11

[dodgeitorelse3]

3 hours ago, dodgeitorelse3 said:

and I believe you need quotes around the id in this line as well as a proper name for the id

let thediv = document.getElementById(id)

line is correct, my bad

 

Edited November 16, 2022 by dodgeitorelse3
line is correct, my bad

[Barand]

11 hours ago, oz11 said:

Changed the id names around.

You now create all your TreeLinks with id='tom' and all SimilarLinks with id='jerry'.

Why are are you having difficulty with the concept of UNIQUE? I'll type this slowly for you ...

No -- two -- elements -- on -- a -- page-- can -- have-- the -- same -- id -- value.

Try some thing like this (As we only see snippets of your code, as though through keyholes, and not the whole picture, I am assuming that the following code is inside a loop and $index is incremented on each iteration). Prefix the TreeLink IDs with "T" and the SiimilarLink IDs with "S".

echo "<br><a href='#' onclick='showDiv(\"T$index\")' style='float: right; margin-top: -6px; margin-right: 8px;'>Show domain linkage</a>";
echo getLinkTree($pdo, $row['url'], "T$index");

echo "<br><a href='#' onclick='showDiv(\"S$index\")' style='float: right; margin-top: -6px; margin-right: 8px;'>Show similar linkage</a>";
echo getLinkSimilar($pdo, $row['url'], "S$index");