I am creating a jQuery plug-in for web applications. My plug-in captures page events and replay back all events which i captured. Normally web applications use jQuery frameworks and i am also using one version, so I used noConflict to overcome conflict problems.
My plug-in will integrated with any web application. so i cant change anything in web application. All changes should be in done in plug-in itself.
My Plug-in Code:
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script src="jquery.ui.dialog.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var JqNoConflict = $.noConflict(true);
</script>
<script src="captureall.js" type="text/javascript"></script>
Web Application Code
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.11.js" type="text/javascript"></script>
This the files I am using to create my plug in.
I can capture all the events from web page. When i populate back i am using trigger function to trigger all events which i captured. I am facing problem of,
JqNoConflict("DIV").eq(30).trigger('click');
it is not working, instead of
$("DIV").eq(30).trigger('click');
this code is working.
NOTE : i placed my plugin code all over the place in page. top, bottom, middle. nothing works.(it captures,not triggering)
I am facing major problems, when i captures dialog and calendar events.
I need a solution for above problem,
I need to know that which jQuery framework gets called when events happened.may be that will help to find which jQuery framework gets called
I need to know that, is it possible to call a trigger event $().trigger(); from JqNoConflict() .trigger();
is there anyway to write a code to capture a events and trigger back from myself defined JqNoConflict jQuery frameworks?
Related
I'm a new angular2 development and currently facing a rendering issue with my application. I use #angular#2.0.0-rc.1 for my app and router-deprecated#2.0.0-rc1 for my routing, whenever I click on the a link, the static content of the page loads immediately and the binding (dynamic content) happens only when I do some interaction with the mouse like click or hover over a link. I tried various options and still couldn't figure it out.
Any help would be appreciated.
The order in which you include the JS files is important.
This issue happened when I didn't.
<script src="/lib/shim.min.js"></script>
<script src="/lib/system.js"></script>
<script src="/lib/system-polyfills.js"></script>
<script src="/lib/Reflect.js"></script>
<script src="/lib/zone.js"></script>
As mentioned by bryanm, the order of the js files is important and the placement of those script tags also matters. In my environment with angular2.rc.4, the order was
<script src="node_modules/es6-shim/es6-shim.js">
<script src="node_modules/reflect-metadata/Reflect.js">
<script src="node_modules/systemjs/dist/system.src.js">
<script src="node_modules/zone.js/dist/zone.js">
It has to be placed at the end of the body tag just above loading the systemjs config script.
I've incorporated a Magento ecommerce site into our existing website and all is OK, but there are various different jQuerys and prototypes being used along the way.
I wanted to improve the site's mobile navigation and found the awesome jQuery.mmenu plugin. I've integrated this into the site and it looks and mostly works great, but there are certain pages within the magento part of the site that have their js broken by the menu and as such the menu ceases to exist.
Looking at the code of a working page and non-working page I have found some differences in the js they use but I can't figure out how to rectify the issue:
Working page: http://www.doble-shop.co.uk/shop/boots.html
Non-working page: http://www.doble-shop.co.uk/shop/richa-monza-waterproof-leather-boots-black.html (notice that the menu doesn't show on the mobile size of the site and that the js tabs are broken as is the dropdown quick access, also the error message of Uncaught TypeError: Cannot read property 'blocker' of undefined is shown in the console)
When comparing the code of the two pages and paying attention to the js used the following are included on the broken page but not on the working page:
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/varien/product.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/varien/configurable.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/calendar/calendar.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/infortis/jquery/plugins/jquery.cloudzoom.min.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/infortis/jquery/plugins/jquery.colorbox.min.js"></script>
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.
If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ); from the second version will return the globally scoped jQuery variables to those of the first version.
<script>
var $ = jQuery.noConflict();
</script>
Place this snippet right after including of the jQuery in your page.
Read more here.
The CMS I use (Liferay) is dependent on jQuery to do a lot of things.
When I recently added new functionality to our site through the use of fancybox, I find that this breaks all other jQuery functionality on the page. If I take out the initial jQuery library import I use for fancybox, the other functionality works, but fancybox does not. Here is the code in question:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
I've tried adding jQuery.noConflict(); to various parts of the code, but to no avail. I feel like this should be the correct solution, I'm just not sure exactly where to put it. Unless someone has a different possible solution, while keeping the fancybox functionality. I've been stuck on this awhile now, I'm kind of at a loss of what to try next.
Thanks in advance,
Noah
EDIT: Here is a pastebin of the page source code: http://pastebin.com/NA5WKrMW#. Line 81 is where I'm trying my jQuery import for fancybox purposes.
You have to add the noConflict right after the script tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var jQuery_latest = $.noConflict(true);
</script>
EDIT:
Make sure you're initializing fancybox using the correct jQuery:
jQuery_latest(document).ready(function() {
jQuery_latest(your_element_here).fancybox();
});
I have a site where I use some jquery functionalities.
On the home page I used Nivo Slider plugin, while on another page I used a Lightbox effect.
In the arrangement of links to the script in my header.php file, I have the lightbox link under Nivo Slider link. Lightbox works but Nivo slider does not work. When I re-arrange, slider works but lightbox does not work.
In this situation LightBox works, but slider does not work
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
Is this normal? How can I make both work at the same time.
My Homepage that has the slider is Here
Page that has lightbox is here
Thank you.
With lots of code from lots of places, some things stop working. One can not simply assume that adding little bits of code that individually work will work when integrated together. In this particular case, jQuery and Prototype are fighting.
This can be fixed by loading only one jQuery at the top, and then including this little snippet:
jQuery.noConflict();
Then jQuery no longer takes over the $ variable. (Your code will also need to account for this change by using jQuery rather than $, but all well-written plugins should interoperate decently with this change.)
After that, you should be able to include Prototype and your other plugins. In theory, anyways.
In practice, Prototype hooks some other things. In your particular case, it's hooking Array.​prototype.​reverse in a way that the jQuery plugins don't expect, and somehow, it's causing a stack overflow. I don't really know how to resolve Prototype's hijacking of that function without breaking one or the other, so you might just want to find a lightbox plugin that works with just jQuery.
jQuery is not available when you are trying to call it. You could try moving everything to the bottom of the body. Also worth noting that you are loading jQuery twice.
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.min.js"></script>
I have been playing around with PHP and JavaScript and jQuery and installed a couple of jQuery plugins. Now in my header I have:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Is this loading two different things? Or can I get rid of one?
No you are not loading twice. They are 2 different libraries for different purpose.
http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js is the jQuery library mainly for document traversing, event handling, animating, and Ajax interactions. Check their website documentation for information.
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js is the jQuery UI library that contains the widgets like tabs/accordian/dialog and functions like animate/draggable/sortable and more. Check out jQuery UI website for more information.