My problem in a nutshell is that from within coffeescript implemented jQuery-UI handler, I cannot create and show a bootstrap modal. If I try to show the modal using the standard button approach that is on the bootstrap documentation it works just fine. EDIT 3: This is within a Ruby on Rails 3.2 application using the asset pipeline.
Launch demo modal
However, when I do this from within a jQuery-UI event handler:
$("#my-modal").modal('show')
or
$("#my-modal").modal({})
I get this error:
Uncaught TypeError: Object [object Object] has no method 'modal'
My html is very standard--I just used the example html from the bootstrap documentation. I have this coffeescript for the jQuery-UI event handler:
$ ->
$("#selectable").selectable(
selected: (event, ui) ->
$("#my-modal").modal({})
)
EDIT: As this smells of a scope issue I tried monkeying with the -> and => to see if that changed things but no changes to that made any difference.
EDIT 2: I've validated that the javascript libraries are included in the right order: jquery, jquery-ui, jquery_ujs, and then bootstrap.js. Is it possible that there's another library I need to pull in?
I've validated that $("#my-modal") finds the modal DOM object correctly by doing
console.log $("#my_modal").html()
I'm at a loss to understand this. The code looks completely straightforward and simple to me.
I finally figured this out and thought I'd post the answer in case someone else runs into this.
Someone else on our team had brought in Google Analytics using jQuery and that was reintroducing jQuery AFTER bootstrap had injected itself into jQuery, thereby removing bootstrap from the world.
As we're in the first stages of our project and our motto is to not try to solve next years problems today, I fired him and we waited out back for him when he left. Of course he's my boss so none of that happened.
Related
I'm using a Rails 6 template (Jumpstart Pro) that has the new stuff hotwire, stimulus, webpacker. It works OK for basic stuff... scaffolding new models and make CRUD forms, etc.
However one of my pages uses a vendor's javascript widget, which also requires jquery.
Neither Jumpstart Pro template nor its Forum have any up-to-date documentation or support for adding jQuery via webpacker (e.g., no support for adding jquery the "right way").
So I've added jquery to the one page that needs it via a good old fashioned script tags in the header
%script{:src => "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"}
followed by the vendor's javascript to initialize the vendor's widget, inside $(document).ready(function(){ init_code_goes_here }); so the widget has time to load to the page.
Works: If I type the page's url into the browser "localhost:5000/cool_page" or "mydev.ngrok/cool_page", it works fine.
Broken: But clicking a link IN the app to go to the page (via link_to "cool page", "/cool_page") does not work:
jQuery is loaded (I have a little "hello world" jquery script that un-hides a div to confirm jquery is loaded)
the vendor widget does not load properly (browser console says widget object is null)
But if I then refresh the page, everything loads fine.
So the page works if "loaded" but not it reached via another page.
From this I infer that the magic behind hotwire/etc is interfering with a proper load of the page when I navigate to it.
So, the question: in a hotwire-enabled Rails 6 app, is there any way to have a nav link that, when clicked, simply tells Rails... skip hotwire shortcuts, load this page for real?
I believe your issue is just that you need to restore default (non-Hotwire) link behavior. There are 3 ways to do that.
See this answer: https://stackoverflow.com/a/68657223/2648054
In short:
1: Set the data-turbo attribute to false.
2: Set the target attribute to "_top".
3: Move the link outside any Turbo frame. Any link inside a Turbo frame, without one of the above attributes, will be handled by Turbo by default.
So I am currently working with an e-commerce cms that implements Lightbox to display large product pics.
In the sidebar I have implemented my own tab group powered by jquery-ui.
The sidebar works perfectly on every page except the product pages. i soon found out the problem was the call to prototype.js used by Lightbox...When i comment out the call to the prototype script the tab group starts working again.
I have tried various things like trying to change the scope of my code and reordering when the scripts are called, but this hasn't worked...any ideas on what i could do to remedy the situation?
NOTE: I didn't include any code because i thought we could just throw around soem theory : )...if you think anything would help i can add it
thanks for any help,
~skev
The problem was i needed to use $.noConflict();
before #MichealKoper suggested this i had no idea it existed
Thanks!
Long story short:
We've had errors being logged concerning a JQuery/JQueryUI based system for some time. At it's core we're doing a pretty basic click link -> JQuery AJAX GET -> Open JQueryUI modal pattern.
The error we were getting appeared simple - "Object doesn't support property or method 'dialog'" - leading us to believe there was an error with JQueryUI. After expending a lot of time ruling out browser incompatibilities, bad code on JQuery's end, bad code on our end, angry code gods... we caught a lucky break. A 100% repro on one of the machines in the office.
Turns out the thing was riddled with adware - specifically [an older version of] easyinline - http://www.easyinline.com. When the user clicked any link a cascade of javascript files would be loaded, including reloading JQuery from Google's CDN.
For most links this isn't really a problem - they take you off the page anyway and everything reloads. But for our modals it meant that every modal link would stamp over our JQuery at the point the request was sent, resulting in the response trying to make use of the 'new' $ which would now be missing JQueryUI and any other plugins.
Initially we thought about making another global var ($$ or something) for 'our' JQuery and explicitly using that in our code instead of just $. The issue with that is that we were using a few other 3rd party tools which rely on $ and the adware-loaded $ is a different (older) version. So it's important that we preserve $ correctly.
Any ideas? I'm aware of JQuery's noConflict() method but after a cursory glance don't think it fits the bill.
Ultimately we've decided to re-establish our JQuery integrity when we receive any ajax responses (i.e. just before the open modal code is executed). All our ajax stuff is wrapped in our own handler so this was fairly easy to inject across the board.
Basically;
We have the original JQuery 'saved' - we've got it in-scope thanks to our handler but it could be easily put into a separate global (like $$) just after it is loaded. In our ajax response handler we've got a fairly straightforward check;
if (window.$ !== $$) {
window.$ = window.jquery = window.jQuery = $$;
}
This will reset the global jquery back to what it should be.
well this is just a work around and not a full fledged solution.
you can try multiple things here
1. if you have control over what the adware loads then just put in something like this if(!$) where they try to load the jquery
2. try loading your plugin at the end of the page
3.even if end of the page is not working. Try injecting the link(a script tag using document.write) to the plugins CDN in the Jquery document ready event. this would ensure that the plugins code would be loaded at the end when all the jquery is already loaded (not a preferred thing).
I am using jeditable and i needed to integrate with jeditable-datepicker and Autocomplete
everything works fine apart from this incompatibility between them.
I have noticed that the problem is caused by the script
<script src="jquery-ui-1.8.24.custom.min.js"></script>
which makes working my jQuery datepicker, if i remove it the autocomplete starts working again but obviously my Jquery date picker stops working.
How can i figure it out my issue? there is a way to make them working together?
Thanks
i found the solution, i explain it here, it might be useful for someone in the future.
i have downloaded again the custom jQuery , i have deselected all the options just keeping the Datepicker Widget and then pasted the new script in my page and the incompatibility was gone!
Im building a search autocomplete using Jquery UI. Everything worked perfectly fine when I built the search in a minimal document with nothing but an input. eg:
<input id="autocomplete" />
and the Jquery
<script>
$( "input#autocomplete" ).autocomplete({
source: ['johannesburg z', 'johannesburg x', 'johannesburg v','johannesburg b','johannesburg a','johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p']
});
</script>
However, once I place my code into a Sitefinity 3.7 page, I get an error, telling me that "$("input#autocomplete").autocomplete" is not a function.
This error only occurs once its in sitefinity
Things Iv tried
Im using the latest Jquery UI library with the autocomplete widget.
Iv checked that my file paths are correct. (they are).
Used alerts eg
alert("$('input#autocomplete').autocomplete")
they keep returning undefined.
Any help would be much appreciated!
Sitefinity itself employs jquery and is probably overriding many of the base classes/methods with the same shorthand classnames ($, Jquery).
The consequence is that you cannot have your javascript on your page BEFORE any sitefinity page elements/controls are being inserted. I was having this same issue. I moved all my javascript AFTER the sitefinity elemens, to the bottom of my pages and everything worked fine again.
Bear in mind, what is actually happening in this case is that
sitefinity injects their own jquery, then
your link to the jquery.min.js file overrode sitefinity's.
So it's possible that doing this may actually break some of sitefinity's jquery-based functionality, although I haven't had any issues in the last 2 months.
You can also try using the sitefinity built-in version of jQuery (which is what Telerik recommends at the forum link below, although I didn't have much luck with this technique):
<%# Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
Here's the link to a recent Sitefinity forum post regarding this exact same issue:
http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/jquery-popup-not-working-in-telerik-webapplication.aspx
Good luck!