Andrew Foster
Andrew Foster

Reputation: 1

Adobe Muse - Event Listener in Custom HTML embed wont work properly after being added to muse?

I'm having a pretty weird problem while trying to design this page inside of adobe muse. I'm not an adept at coding javascript, so don't get mad if something is wrong, but here is what i'm trying to accomplish.

I decided to design this website with adobe muse, because the company I work for decided that the in-browser editor that came along with muse was the perfect solution for what we were doing. I shortly after figured out that designing things around using muse can sometimes be quite frustrating, and this is one case that I just cant wrap my head around.

I'm running several kinds of searches on the site, and for now, since I didn't have much time I thought the easiest way to incorporate all 3 different searches into 1 page was to design a custom search embed, that had tabs to toggle though all 3 kinds of searches, then I would write some super simple javascript that takes the text inside of an input, and plugs it into a url that redirects the page to wherever the search results were for the said word.

<script>
function storeSearch(x) {
    location.href = "http://gistsilverbuckle.com/store.html#!/~/search/keywords=" + (x) + "&offset=0&sort=relevance";
}
document.getElementById("ecwidSearch").addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("ecwidSearchButton").click();
    }
});    
</script>
<div class="ecwidStoreSearch">
    <div class="searchContainer">
        <div class="searchFormContainer">
            <form>
                <input type="text" class="searchField" id="ecwidSearch" placeholder="Search the Store">
            </form>
        </div>
        <div class="searchButtonContainer">
            <div class="customSearchButton" id="ecwidSearchButton" onclick="storeSearch(document.getElementById('ecwidSearch').value)">
                <svg class="searchButtonIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.55 12.82">
                    <title>Looking Glass</title>
                    <path d="M306.8,264.12a3.54,3.54,0,0,0,.1-5h0a3.53,3.53,0,0,0-5-.1h0a3.54,3.54,0,0,0-1.08,2.48,3.49,3.49,0,0,0,1,2.5h0a3.48,3.48,0,0,0,2.47,1.08,3.56,3.56,0,0,0,2.52-1Zm2.17-2.46a4.59,4.59,0,0,1-1.05,2.84l4.35,4.51-.78.76-4.35-4.51a4.63,4.63,0,0,1-2.88.93,4.59,4.59,0,0,1-3.23-1.4h0a4.64,4.64,0,0,1,.11-6.53h0a4.62,4.62,0,0,1,6.53.12h0A4.64,4.64,0,0,1,309,261.66Z"
      transform="translate(-299.73 -256.95)" />
                </svg>
            </div>
        </div>
    </div>
</div>

Fairly simple, right? That's what I thought too, it worked for me when I tested it inside of dreamweaver, but as soon as I embedded the code inside of muse, the base function works if you click the search button, but it doesn't work if you hit enter?

I'm probably doing something extremely dumb, so maybe you could point it out to me.

Here is my jsfiddle: https://jsfiddle.net/fosterboytron/3aba7gsa/

here is the link to the page i'm creating. http://gistsilverbuckle.com/search.html

Hope I included enough information, if you need any more, just respond and i'll add whatever you need.

Thank you for whatever help you can offer!

Upvotes: 0

Views: 245

Answers (0)

Related Questions