New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with HTML containing anchor tags with href attributes that point to element IDs. #1

Closed
gordon-matt opened this Issue May 7, 2018 · 7 comments

Comments

Projects
None yet
2 participants
@gordon-matt
Copy link

gordon-matt commented May 7, 2018

When the HTML contains anchor tags with an href that points to an element ID. It complains about no such route being defined. The reason I have such markup is because it has Bootstrap tabs. Example:

<a href="#Themes" aria-controls="Themes" role="tab" data-toggle="tab">Themes</a>

Which points to the tab panel as follows:

<div role="tabpanel" class="tab-pane" id="Themes">
    <div class="form-group">
        <label for="DefaultTheme">Default Theme</label>
        <input type="text" id="DefaultTheme" name="DefaultTheme" class="form-control" value.bind="defaultTheme" />
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" id="AllowUserToSelectTheme" name="AllowUserToSelectTheme" checked.bind="allowUserToSelectTheme" /> Allow User To Select Theme
        </label>
    </div>
</div>
@gordon-matt

This comment has been minimized.

Copy link
Author

gordon-matt commented May 7, 2018

I have checked in my code to the develop branch on my Aurelia Test Project. If it's helpful for you to see the issue, just clone the repo, setup per instructions, run it and click the "Dynamic HML Test" link in the nav bar. Then choose the "Site Settings" option from the dropdown and click "Get Settings" button to load it. Everything seems fine until you click one of the tabs. Open the console to see the error.

NOTE: I have a bug in this test project, where on first time load it complains about not being able to find the app.html view. I haven't figure out why this is yet, but just ignore this and refresh the page; it will work the second time.

@fkleuver fkleuver self-assigned this May 7, 2018

@fkleuver fkleuver added the bug label May 7, 2018

@fkleuver

This comment has been minimized.

Copy link
Member

fkleuver commented May 7, 2018

This is related to the router. Any anchor tag with an href that starts with # will trigger a router navigation.

Basically you've got 4 options here:

  • Use an alternative API in bootstrap if it exists (one that doesn't use href)
  • Implement your own click.delegate that shows/hides the tab in question (use Aurelia instead of bootstrap)
  • Tell the router to ignore these paths (see aurelia/router#527 and aurelia/router#558 which are related)
  • Use PushState

Closing this since it's not related to dynamic-html element. This behavior will also occur for static html.

@fkleuver fkleuver closed this May 7, 2018

@gordon-matt

This comment has been minimized.

Copy link
Author

gordon-matt commented May 7, 2018

The weird thing is the exact same code works fine in normal views. It's only when getting Aurelia to process this dynamic view that there's a problem. Any idea why that is? Anyway, I will look at the options you've mentioned. Thanks for the help; much appreciated.

@fkleuver

This comment has been minimized.

Copy link
Member

fkleuver commented May 7, 2018

Now that you mention that, I did notice there were no bootstrap event handlers attached to the anchors so the click events aren't being intercepted. That's probably why it works in static views but not in a dynamic one. You need to tell bootstrap to do something (initialize?) after the dynamic html is compiled.

I just released v0.3.0 which dispatches a compiled event after each compilation. You can listen to it like so:

<dynamic-html
  html.bind="html"
  context.bind="context"
  compiled.delegate="handleCompiled($event)">
</dynamic-html>
handleCompiled($event) {
  const dynamicHtml = $event.detail;
  // this is the dynamic-html element
  const el = dynamicHtml.el;
  // something like this, don't know the exact api constraints
  $(el.querySelectorAll('[data-toggle="tab"]')).tab();
}
@gordon-matt

This comment has been minimized.

Copy link
Author

gordon-matt commented May 7, 2018

The latest version gives a 404 error for /jspm_packages/npm/aurelia-dynamic-html@0.3.0/dynamic-html.js. That file does not exist

@fkleuver

This comment has been minimized.

Copy link
Member

fkleuver commented May 7, 2018

Sorry about that. I switched to rollup for single file output but that was a bad idea apparently. It should be fixed now with 0.3.1

@gordon-matt

This comment has been minimized.

Copy link
Author

gordon-matt commented May 8, 2018

You sir, are the man. It works perfectly now. You can see it in action if you want on a demo page in my test project here: https://github.com/gordon-matt/aurelia-razor-netcore2-skeleton. Thanks very much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment