Hi, 

I found that bootstrap (with jQuery) and the Ajax framework (prototype.js) 
would tend to clash a bit.

Try these 3 things in order:

1) Try putting this just before </head>
<script type="text/javascript">jQuery.noConflict();</script>
And when you access jQuery in your page, don’t use the ‘$.someThing()’ 
notation, use the full ‘jQuery.someThing()’ instead.

2) The order in which you put the <script … “thing.js”></script> is also 
significant (but this can be tricky to control because Ajax injects its own 
ones at runtime).

3) If things start randomly disappearing from the browser.
I found that the prototype.js has a hide(element) function that causes issues 
with Bootstrap v3.

My comment:  (in my /js/ajax_prototype_fix.js file)
 * Contains a minor update to help with an issue with Twitter Bootstrap v3, 
where certain elements (pop-ups, etc) would disappear after a roll-over.
 * See the 'hide(element)' function below.
 * To use, add 'noProtoJs' to your element's class (if you find they disappear 
for no obvious reason). 
 * E.g. <a class = "noProtoJs" data-toggle="tab" href="#tab-1">Tab 1</a>
 *
 * TODO: There is certainly a better way to fix this issue, but this works for 
now.

I replaced the hide function with:

  function hide(element) {
    /*  MG - See intro text at top. This helps with Twitter BootStrap 3 */
    if(!hasClassName(element, 'noProtoJs')){
        element = $(element);
        element.style.display = 'none';
    }
    return element;
  }

You can tell Wonder to load a different prototype.js using config:
# Replace the default Ajax:prototype.js with my own one (to fix a bootstrap 
issue)
er.extensions.ERXResponseRewriter.resource.Ajax.prototype.js=MGUtilities.mg/js/ajax_prototype_fix.js


Good luck.

Mark


> On 13 Oct 2017, at 15:43, Stavros Panidis <stavros.pani...@gmail.com> wrote:
> 
> Dear Theodore,
> 
> sure you are not. Sure it is my problem to explain due also to my pure 
> english.
> 
> 
> In my application I use bootstrap css framework for styling (getbootstrap.com 
> <http://getbootstrap.com/>) . This framework has also a nice date/time picker 
> component. This works fine inside my WOComponent but when I add a 
> AjaxUpdateContainer at the same component does not work anymore.
> 
> Then I tried the AjaxDate picker from Ajax examples. This works fine but it 
> is not conforms in style with other elements like text fields, check boxes 
> etc.
> 
> I hope that I explained a little bit.
> 
> Stavros
> 
>> On 13 Oct 2017, at 16:30, Stavros Panidis <stavros.pani...@gmail.com 
>> <mailto:stavros.pani...@gmail.com>> wrote:
>> 
>> Dear,
>> 
>> I try to implement Bootstrap date time picker style in a WOComponent. 
>> Javascript and css works fine except the case that in this component the is 
>> also a AjaxUpdateContainer (which I certainly need for other controls).
>> 
>> I tried also with AjaxDatePicker which works fine but I don’t know if it is 
>> possible to apply bootstrap styling on this.
>> 
>> Any suggestions?
>> 
>> Stavros
> 
> _______________________________________________
> Do not post admin requests to the list. They will be ignored.
> Webobjects-dev mailing list      (Webobjects-dev@lists.apple.com)
> Help/Unsubscribe/Update your Subscription:
> https://lists.apple.com/mailman/options/webobjects-dev/mark%40gowdy.co.uk
> 
> This email sent to m...@gowdy.co.uk

_________________
Mark Gowdy
Gowdy Associates Ltd
M: +44 7808 400 941
Skype: markgowdy




 _______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list      (Webobjects-dev@lists.apple.com)
Help/Unsubscribe/Update your Subscription:
https://lists.apple.com/mailman/options/webobjects-dev/archive%40mail-archive.com

This email sent to arch...@mail-archive.com

Reply via email to