1

My page is shown in the image below. Users must select the city they are in using the dropdown. Then they click one of the images. The link is currently <a href="{path=type/{title}/}">. I'd like it to be automatically populated like <a href="{path=type/{title}/Portland/}">, based on whatever is selected in the dropdown.

I don't want the dropdown to load a new page - that would be way too slow. So I am looking for an alternative solution (CSS3 or JavaScript?), something that is lightweight and quick.

{exp:channel:entries channel="type" search:primary-category="not --" search:secondary-category="" dynamic="no"}
    <a href="{path=type/{title}/Portland/}">
       <div id="secondary-images">
           {exp:ce_img:single src="{type-image}" max="100" crop="yes" }
           <p>{title}</p>
       </div>
    </a>
{/exp:channel:entries}

Example

1

Assuming your dropdown is named and id's as city_select and has the vlaues set to the URI that you wisdh to add, like this :

<select id="city_select" name="city_select">
    <option value="Portland">Portland, Oregon</option>
    <option value="USA">USA, Earth</option>
</select>

The below is pure jquery :

<script>

    //get the common part of the URI
    var targetSegment = 3;

    //wait for the page to load
    $(document).ready(function(e){

        //on change event
        $('#city_select').change(function(e){

            //iterate the links (add a valid selector here)
            $('#container a').each(function(){

                //get the new 'part'
                var extraUri = $('#city_select option:selected').eq(0).attr('value');

                //explode the current URI of the link
                var uriParts = $(this).attr('href').split('/');

                //build new URI
                var myUri = "";
                for ( var c = 1 ; c < targetSegment ; c++ ) {
                    myUri += uriParts[c] + "/";
                }
                myUri += extraUri;

                //apply the URI
                $(this).attr('href', myUri);

            });

        });

    });

</script>

Or at least something like that, you'll have to debug the script yourself as I've written this straight to notepad (my test sandbox site is no available atm) so it can also probably be hightly optimised, but I beleive this will give you the idea...

  • Thank you very much - that definitely gives me something to work with! – Geoff May 12 '15 at 22:03
  • Let us know how you get on and if you come up with something different please do answer your own question. Otherwise if this (or any other answer) is the way you go please mark the answer, it helps others with similar problems! – Blatant May 13 '15 at 8:44
1

Blatants response was very helpful in figuring out how to proceed. I hired someone to get this working exactly as needed, and here is the code that I am using:

var changed = 0;
function myFunction() {
    var re = /type/;
    a = document.getElementsByTagName('a');
    for (index = 0; index < a.length; ++index) {
        if (changed==1) {
            a[index].href = a[index].href.replace(oldvalue, '');
        }
        if (a[index].href.match(re)) {
            a[index].href = a[index] + '/' + document.getElementById("topic").value;
        }
    }
    changed=1;
    oldvalue='/' + document.getElementById("topic").value;
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.