Drop-Down Link Opens Inside Drop-Down List

  • Resolved NiallASD

    (@niallasd)


    9 years, 6 months ago

    Hi all,

    I’ll start by saying I’m guessing this is because I’m using an iFrame, but I don’t know what other method I should be using.

    On my page I have a drop-down list that shows an archive – clicking on an entry on this list is meant to take you to a separate page (in the same window), but instead it loads the new page within the drop-down list itself.

    I don’t want to include the form code on every page as that would mean a lot of extra work every 3 months so I included it in a separate PHP file.

    Here’s the code:

    <iframe src="https://www.greencastleparish.com/wordpress/wp-content/themes/greencastleparish/newssheetarchive.php" style="border: 0px #FFF none; float: right; clear: both;" name="newssheetarchive" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="20px" width="213px"></iframe>

    And this is in it’s own separate PHP file (I removed some of the entries here for the sake of readability):

    <script>
<!--
function JumpToIt(list) {
    var newPage = list.options[list.selectedIndex].value
    if (newPage != "None") {
        location=newPage
    }
}
//-->
</script> <!-- archive list -->

<div class="monthlist">
<form>
  <select name="select" onchange="JumpToIt(this)">
    <option value="None">Select a month from the archive</option>
    <option value="https://www.greencastleparish.com/wordpress/native-priests">April to June, 2015</option>
    <option value="https://www.nialldevlin.com/newssheetarchive/2015/january-march.php">January to March, 2015</option>
    <option value="https://www.nialldevlin.com/newssheetarchive/2014/october-december.php">October to December, 2014</option>
  </select>
</form>
</div> <!-- monthlist -->

    Once again, here is the page.

    And here is the PHP file, incidentally it works fine straight from here.

    Really hope someone can help me with this as it’s been puzzling me for a long while.

Viewing 12 replies - 16 through 27 (of 27 total)
  • Thread Starter NiallASD

    (@niallasd)

    I had forgotten to add the <script> tags in the CSS & JavaScript Toolbox plugin – here’s a screenshot of the errors I now get with the tags added.

    With the TC plugin I can only paste the JavaScript with no option as to where.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oops don’t post the HTML <script> tags in there ??
    Or the HTML comments

    Should just be this:

    function JumpToIt(list) {
    var newPage = list.options[list.selectedIndex].value
    if (newPage != "None") {
        location=newPage
    }
}

    Thread Starter NiallASD

    (@niallasd)

    That’s what I had at first which led to the code appearing under the <body> tag – doing so also give me these errors.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try this instead:

    function JumpToIt(list) {
    var newPage = list.options[list.selectedIndex].value;

    if (newPage != "None") {
        location = newPage;
    }
}

    Thread Starter NiallASD

    (@niallasd)

    Still nothing – the errors are gone, though it still says ‘Read ony’ at the following line.

    location = newPage;
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Damn I hate it when plugins can’t stop being too “helpful”.
    Try this instead:

    function JumpToIt(list) {
    var newPage = list.options[list.selectedIndex].value,
        location;

    if (newPage != "None") {
        location = newPage;
    }
}

    If that doesn’t work then dump the plugin and use another.

    Thread Starter NiallASD

    (@niallasd)

    I think the problem lies with me rather than the plugin, it seems to be well received by others and I can’t find any alternatives (other than TC Custom JavaScript, which also didn’t work).

    I tried adding the iframe to the plugin as a HTML code block to the page in addition to the JavaScript (with tags as otherwise it just appears under <body>) and although it then appeared via shortcode on the page it was with the same problem. I can’t change it from iframe to anything else.

    To recap here is my code.

    JavaScript

    <script>
function JumpToIt(list) {
    var newPage = list.options[list.selectedIndex].value,
        location;

    if (newPage != "None") {
        location = newPage;
    }
}
</script>

    HTML
    <iframe src="https://www.greencastleparish.com/wordpress/wp-content/themes/greencastleparish/newssheetarchive.php" style="border: 0px #FFF none; float: right; clear: both;" name="newssheetarchive" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="20px" width="213px"></iframe>

    .php Page

    <script>
<!--
function JumpToIt(list) {
    var newPage = list.options[list.selectedIndex].value
    if (newPage != "None") {
        location=newPage
    }
}
//-->
</script> <!-- archive list -->

<div class="monthlist">
<form>
  <select name="select" onchange="parent.JumpToIt(this)">
    <option value="None">Select a month from the archive</option>
    <option onclick="parent.newPage;" value="https://www.greencastleparish.com/wordpress/native-priests">April to June, 2015</option>
    <option value="https://www.nialldevlin.com/newssheetarchive/2015/january-march.php">January to March, 2015</option>
    <option value="https://www.nialldevlin.com/newssheetarchive/2014/october-december.php">October to December, 2014</option>
    <option value="https://www.nialldevlin.com/newssheetarchive/2014/july-september.php">July to September, 2014</option>
    <option value="https://www.nialldevlin.com/newssheetarchive/2014/april-june.php">April to June, 2014</option>
  </select>
</form>
</div> <!-- monthlist -->

    I also had a look at this video as a guide.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I tried adding the iframe to the plugin as a HTML code block to the page in addition to the JavaScript (with tags as otherwise it just appears under <body>) and although it then appeared via shortcode on the page it was with the same problem. I can’t change it from iframe to anything else.

    Let’s try that again so that at least your JS is in the page. Then we can debug why that isn’t working.

    Thread Starter NiallASD

    (@niallasd)

    I’ve added the shortcode now along with the original directly below it.

    Thread Starter NiallASD

    (@niallasd)

    It seems if I use paste the code from the PHP page into the plugin and refer to it via shortcode it works, though now I see the drop-list twice on the page (very top and in the intended place).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Cool looks like you resolved it

    Thread Starter NiallASD

    (@niallasd)

    I hope so, though I have yet to see if it works through multiple pages and can be easily updated.

    I also don’t know what to do about it appearing in the top-left corner.

    I’ll be away for the weekend so can’t resolve this just yet.

Viewing 12 replies - 16 through 27 (of 27 total)
  • The topic ‘Drop-Down Link Opens Inside Drop-Down List’ is closed to new replies.