I'm working on a Drupal project that imports JQuery on all its pages. We started to use Vue.js by injecting it directly in the HTML pages for the development of dynamic components (not for a SPA).
The problem is that we have JQuery UI that conflicts with Vue.js. It will directly modify all the inputs of Vue.js by readapting their styles.
Is it possible to disable JQuery UI on a particular div, which would contain Vue.js? Without having to disable it on the whole page, because our header has a burger menu that uses JQuery UI.
We found a fix to correct this conflict between Vue.js and JQuery. This method will not completely disable JQuery on a given scope, but will disable a behavior that we were having trouble with.
$('select').selectmenu("destroy")
More about the method destroy here:
https://api.jqueryui.com/selectmenu/#method-destroy
Related
I've created a simple html web page using bootstrap.
I've also created a "nice looking" form with Svelte that also uses bootstrap.
The svelte form is hosted on another server/domain. I embed it on my html page by placing a -Tag and than placing my custom html tag where I want to see it.
Embedding the form is no problem, technically everything works but: I would like to remove the bootstrap library from the component because otherwise I load bootstrap twice.
When I remove bootstrap from the form, it loses its style. Using the "refer" option in is no solution.
Do you have any idea how I can make the embeded form use the bootstrap css from the page that it is embeded on?
I just found out that the problem is the so called "Shadow DOM", which is used by Svelte. It protects the svelte component from being modified by global css.
At the moment there is no official way to disable the Shadow DOM :(
I am using ReactJS and it is not recommended to use JQuery (or vanilla JS) to maniplate the actual DOM, because it may have unpredictable results because of ReactJS using a virtual DOM.
So, if I include pure Bootstrap in my project, could it have the same adverse effect? If so, the use of reactstrap or react-bootstrap would solve this problem or do those libaries also use the bootstrap javascript under the hood?
Thank you,
Michel
The key thing to Avoid is manipulating the DOM for objects (or html DOM elements) that have been created with react, and have states tracked by react. Outside that you are free to use as much jquery or vanilla javascript as you like for DOM manipulation.
This is because, objects rendered with react js tend to work with the state of the object, and attempting to get things to work like toggling classes can cause clashes, if the element state that reactjs remembers has been altered by javascript or jQuery.
For example: What this means is that you can use react to render bootstrap tabs that use bootstrap javascript and jquery,
Then you can activate the tabs after react has rendered them with jquery. You'll have to limit your react to only the render function and avoid setState or update.
using setState or render after the initial render will have to be avoided, if jquery is used to toggle the classes, and react attempts to do the same later, clashes will occur.
In summary you can use both reactjs and JQuery in the same project , but stick to one (either pure react or pure jquery) per element for post render manipulations
Yes it could cause a conflict with React, but it very much depends on what you want to use in Bootstrap? if you just want to use the styling then that will not cause you issues.
Bootstrap JS functions such as showing and hiding divs ( Accordion for example ) might give you issues if React is going to be expecting that div to be in a certain state on the render.
But i have hobby projects that use React and jQuery just fine as long as i am not asking each of the libraries to overlap. Once i have built an application i then try and remove the jQuery from it and move the function into React with the aim to remove jQuery completely.
If you want to expand your answer to provide an example of what you are working on then i'm happy to add to my answer.
I am building a Project Management application as a SugarCRM Plugin.
In my app, which uses a lot of JavaScript, exscecially for a part that shows a Project Task record in a popup Modal Div.
So on the page there is HTML for 1 Modal Div. I then update the Task record fields inside of that 1 modal every time a new task record is clicked on. It brings the Task Modal into view and updates all the task fields and re-initiates all the JavaScript code that works on those fields.
For example almost all the data fields for a Task record that are shown in the modal div have Edit-in-place capability using the jQuery library called X-Editable. There is also a scrollbar plugin for custom scrolling inside of the Modal, Datepicker library, and some more little plugins here and there. As well as all my custom code, hundreds o lines for this section alone!
Now that I explained the app a little bit, I can move on to the questions...
SugarCRM v6.x.x uses jQueryUI DatePicker plugin for it's own Date Selectors.
SugarCRM v7.x.x changes and uses Bootstrap DatePicker library (this one http://www.eyecon.ro/bootstrap-datepicker/)
So in my plugin app I have considered both of these for my Date field needs since they are already loaded into the page anyways!
Once issue I have is the SugarCRM v6 vs v7 using different libraries.
But that isn't a real big issues as I am able to build 2 versions and target the code to the correct version for the user.
My question is, knowing that these libraries get loaded into the page, is there a reliable way for my app to check for there existence and use them if they exist? And then if they do not, load my own versions?
Or am I better off loading my own version, even though it could be loaded into the page already?
You can use duck typing to check what script is loaded. For the bootstrap version, you can check if the $.fn.datepicker.Constructor method exists; it's exclusive to that script. The jqueryui version has the same property but in lowercase.
Edit cause I didn't notice the last part of the question. If none of the scripts have loaded, you can load your own the same way the HTML5 Boilerplate does (assuming we are still working on the datepicker):
<script>window.MyLibrary || document.write('<script src="//routeToMyScript.js"><\/script>')</script>
<script>$().datepicker || document.write('<script src="//routeToMyScript.js"><\/script>')</script>
I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.
You should also keep in mind the possibility that the 3rd party website also uses angular,
and potentially a different version.
Check Multiple versions of AngularJS in one page
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.
As I know that in JQuery Mobile, every page changing is equivalent to create new "page" div, Can we just change a portion in the "content" of the page, something like subpage?
jQuery Mobile doesn't require you to manage pages by creating additional div element in the same HTML file - you can do it perfectly fine in a different HTML file and make a transition to it (perhaps with data-prefetch attribute set) using <a>.
Nothing prevents you from writing a jQuery plug-in, jQuery UI plug-in or (scary though, I know) pure JavaScript that will alter the contents of the DOM element dynamically and manage pages loading according to data received from server - with necessary calls to things of the listview('refresh') ilk - to ensure proper styling.
With that said you have to ask yourself two things:
Why do you need to do it? Can't you manage by pre-creating the page using jQuery Mobile paradigm and just retrieving and inserting the data into the new page?
What will the performance implication (if any) will be, if I have to perform DOM manipulations on every 'page transition'?
As a side note - jQuery Mobile provides you with methods that allow for page manipulation:
$.mobile.changePage and $.mobile.loadPage that you can use (look at pageContainer option).
See API docs here
I am trying to use right now a jQueryMobile plugin for subpages: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget
I didn't make it work yet but i think it should work :).