Wt

Hey,

Any progress on this? What theme are you trying to integrate?

You need to keep in mind that traditional JavaScript will assume that all of the HTML is static and rendered when it gets loaded --- but in Wt (or any Ajax driven application) this is not the case. Perhaps it's this what you observe ?

Regards,

koen

Hello Koen,

Not any progress, I was working on something else hoping you would give me a clue about that.

I am trying to integrate this theme : http://wbpreview.com/previews/WB0F35928/ ; i spotted the problem with the submenu that doesn't appear once integrated. (I can make it happen re-developping it in C but it was not the idea of "integrating a theme")

If it is what you think (not sure I understood everything it implies ?) what can I do ?

Thank you :)

Regards

Thomas

Hey,

That seems to be at least based on Twitter Bootstrap, no ? How does it differentiate itself from it ?

Regards,

koen

Hey,

It is fully based on bootstrap, they provide css, img and js files. I tried both replacing their files with wt's and the contrary, same result.

Here is the "compatibility" part of the readme file provided :

Features ¶

- Responsive Design, support any PC or MAC systems, phones and tablets

• Integrated charts (jQuery Flot and jQuery Peity)
  
• Dynamic tables (jQuery DataTables)
  
• Full featured calendar (jQuery FullCalendar)
  
• jQuery 1.7.2
  
• Bootstrap 2.2.1
  
• Colorpicker for Bootstrap
  
• Datepicker for Bootstrap
  
• Form Wizards (jQuery Wizard)
  
• Support Chat - example page
  
• jQuery Chosen
  
• jQuery Uniform
  
• 3 color styles
  
• Growl-like notifications (jQuery Gritter)
  
• Valid HTML5 pages
  
• Includes documentation

Regards,

Thomas

You were right about the non static aspect. Found a solution. Explanation tomorrow :)

Regards,

Thomas

Hey,

Look forward to hearing about this... the theme's CSS looks more complete than bootstrap.

Regards,

Koen

Hey,

So, the problem was exactly what you said so I had to bypass the "I try to attach a click event to a not yet existent element" problem.

I found the .live() jQuery function that is a solution : .live is attached to $(document) so we can attach events to elements that are inserted dynamically into the DOM. I replaced every .click() in the theme .js and it works.

The only problem left is that it is deprecated in jQuery 1.7.x because of some drawbacks :

1. jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.

1. Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.
   
2. Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.
   
3. Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.
   
4. The .live() method interacts with other event methods in ways that can be surprising, e.g., $(document).unbind("click") removes all click handlers attached by any call to .live()!

I will have to change that if the jQuery embedded by Wt changes. Is that in your plans ?

source : http://www.jquery4u.com/jquery-functions/on-vs-live-review/

Regards,

Thomas

Hey Thomas,

The .on() alternative seems indeed to be better and could be a drop-in replacement for this need as well?

You can swap the built-in JQuery for another one with "WApplication::requireJQuery()".

We're not inclined to upgrade the built-in JQuery unless there is a reason for it (if we want to use new features within Wt), but that is unlikely.

New JQuery versions are double the size of the version we are using ...

Regards,

koen

Hey,

Yes .on() is the best solution but it doesn't work properly with the built-in JQuery version.

I will probably try to upgrade it and try the .on() but not yet, I spent enough time on that problem for now :)

Regards,

Thomas

Hello Koen,

Update about that :

I finally decided to use a more recent JQuery (the version used for the theme) and i switched to .on, which works perfectly as expected.

New problem : I just tried (the 3 last hours) to use the bootstrap tooltip and I have the same problem without finding a workaround this time. The js is never fired, my tooltip never appears.

They must be defined in a js file to be used as explained here http://twitter.github.io/bootstrap/javascript.html#tooltips

For example :

$('.tip-top').tooltip({ placement: 'top' });

And then used in the html page to be displayed (i do that in a WTemplate)

<button class="btn tip-top" data-original-title="Tooltip in top">Top</button>

The problem is the same for others bootstrap objects like "popovers".

Do you have an idea about that ?

Thank you in advance, this really becomes blocking for me, i am loosing a tremendous amount of time on that problem.

Regards,

Thomas

Found a solution :)

HTML :

<button rel="tooltip" class="btn" title="Show Tooltip">
    <i class="icon-file"></i>
</button>

JS :

$('body').tooltip({
    selector: '[rel=tooltip]'
});

It is working, but still improvable since rel is not a standard attribute.

In fact I think the real problem is "how to implement bootstrap for dynamic content" for a theme maker. I will not bother you again about that ;)

Regards,

Thomas

Hey Thomas,

We did experiment in the past with integrating third-party JS libraries, but that never went well (they tend to do things behind your back which confuse Wt).

That's why we were glad we could integrate the Bootstrap theme without using their JS (only borrowing their CSS).

I am interested hearing how it works out for you, but don't say you haven't been warned :-)

Regards,

koen

Has there been any progress made on this? Was trying to call a javascript library and its appears as if its not loading.

I also have the same problem.

I'm using a template, but js things don't work.

If in inspect with developer tools from firefox i can see thet there isn't any event connected to the HTML objects that suposed to.

Regards

poiou