adding img and span within an a href tag

nkhine commented 11 years ago

hello, i have this code:

    - var user_menu = {'gravatar': '#', 'profile': '#', 'login': '#', 'logout': '#', 'contact': '#', 'help': '#'}
        ul.user-menu
            // <a href="#" class="tooltip"><img src='./resources/profile.png' alt="" /><span data-i18n="user.profile"></span></a>
            - for(var i in user_menu)
                li
                    a(href=user_menu[i] class="tooltip" data-i18n="user."+i)
                        img(src='../images/'+i+'.png', alt="")
                        span(data-i18n="user."+i)= i

i don't see why the image and span are not being taken into account as the template is rendered as:

<ul class="user-menu"><!--<a href="#" class="tooltip"><img src='./resources/profile.png' alt="" /><span data-i18n="user.profile"></span></a>--><li><a class="tooltip" href="#" data-i18n="user.gravatar">Gravatar</a></li><li><a class="tooltip" href="#" data-i18n="user.profile">Profile</a></li><li><a class="tooltip" href="#" data-i18n="user.login">Login</a></li><li><a class="tooltip" href="#" data-i18n="user.logout">logout</a></li><li><a class="tooltip" href="#" data-i18n="user.contact">Contact</a></li><li><a class="tooltip" href="#" data-i18n="user.help">Help</a></li></ul>

you can see it at http://blade.eu01.aws.af.cm/ if you look at the ul.user-menu the img and the span are not rendered?

also if you look at the chrome inspector, you can see that there is one error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://blade.eu01.aws.af.cm/images/language_icon.png

which i removed deliberately, so it seems the code is correct, but for some reason it is not parsed out on the template.

what am i missing?

thanks

bminer commented 11 years ago

I'd bet that one of your scripts is modifying the DOM at runtime and changing the resulting HTML. Try disabling JavaScript and see what you get. :)

In addition, there were a few problems with the HTML. Blade should be fine, but the resulting HTML has some issues. In Chrome, you can "view source" by hitting Ctrl+U. Copy/paste the HTML here into W3C's HTML validation service - http://validator.w3.org

When I did this, it caught a number of problems, including some of these:

Your <meta>, <title>, <link>, and <script> tags should be inside of the <head> tag
All <img> tags need "alt" attributes, even if they are empty (although empty ones aren't recommended)
Two of your <meta> tags are invalid
You have two <title> tags, which is invalid
The charset attribute on the link element is obsolete. Use an HTTP Content-Type header on the linked resource instead

It might also be worthwhile to correct these to achieve the best browser compatibility.

Hope this helps. Please feel free to hit me up if you need some help. Thanks! Closing this issue for now.

nkhine commented 11 years ago

you're 100% spot on, the offending script was http://blade.eu01.aws.af.cm/js/locale.js

bminer commented 11 years ago

Nice. How do you like Blade so far?

nkhine commented 11 years ago

Yes is really cool, but i have another issue ;(

As I am using the 18next library for localization of the content, if you click on the Languages http://blade.eu01.aws.af.cm/ you get a list and if you select french, all the content changes.

So i am not sure how to fix this to work with blade. Any pointers much appreciated.

bminer commented 11 years ago

@nkhine - I have no idea how the i18next library works. I looked at their website (http://i18next.com) and I couldn't really figure it out either. :-/ I don't have a lot of experience developing sites in different languages. I'd love to help, though.

How does the library know how to translate from English to French, for example?

nkhine commented 11 years ago

@bminer - how the i18next works is that each tag you want to translate you add a data-i18n="key:value" so in this case for the home page test i would have

    div#page.page-i18n
        p#notification
        p(data-i18n="welcome.p1")
        p(data-i18n="welcome.p2")

and in my locals folder, i have http://blade.eu01.aws.af.cm/locales/dev/translation.json

and this is initialised from the http://blade.eu01.aws.af.cm/js/locale.js

    $(".page-i18n").i18n();

so it looks up the class, in this case page-i18n and then pulls the translation from the corresponding locals file, so if it is french, it will pull the data from http://blade.eu01.aws.af.cm/locales/fr/translation.json

and so on... if there is no translation available it falls back to the dev/translations.json

any help much appreciated.

nkhine commented 11 years ago

ok i fixed it.

i had a(href=user_menu[i] class="tooltip" data-i18n="user."+i)

there was an error in that i don't need to have the data-i18n="user."+i

so this fixes it:

  a(href=user_menu[i] class="tooltip")

thanks

bminer commented 11 years ago

Nice. Also thanks for giving me a 101 course on i18n stuff.

bminer / node-blade

adding img and span within an a href tag #126