Using $(document).ready(function() in Ext Builder

BaconFries · Post by **BaconFries** » Wed Apr 04, 2012 10:53 pm

Ok I am putting together a new "Extension" that is using a newer version of jQuery than WB. Now to get this to work together I have to use jQuery noconflict plus a liitle mod to the code, see below in blue. Now if I use this then the builder is also adding
$(document).ready(function() see below in red so in preview it then breaks the extension is there any way to stop the builder adding then $(document).ready(function().
I have tried using the $(document).ready(function() in the builder but it will not allow me to add the var $s = jQuery.noConflict(); before the $(document).ready(function() and to also modify it to allow the two jQuerys to work on one page. So is there a work around for this.

<script type="text/javascript">
var $s = jQuery.noConflict();
$s(function() {
$s('#map-container').storeLocator({'slideMap': false, 'modalWindow': true});
});
</script>

<script type="text/javascript">
$(document).ready(function()
{

});
</script>

[RZ] · Post by **[RZ]** » Thu Apr 05, 2012 12:02 am

yes, move the block to the head tab instead of use this specific tab.
i think there is some issue because this tag doesn't accept $variables$ like this.

as far as i know, if you want to use the noConflict function, must use jQuery instead of $

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function()
{
.......
});
</script>

http://wysiwygwebbuilder.com/forum/view ... 24&t=46015

gp2727 · Post by **gp2727** » Thu Apr 05, 2012 2:36 am

Hey Baconfries, you can just add this line to the document.ready tab -> $('#map-container').storeLocator();
Also, do not check to add the jQuery library to the page and that should fix this issue. Add it your way.

But we do need to have the document.ready script not show unless we have added script there... Good Point.

BaconFries · Post by **BaconFries** » Thu Apr 05, 2012 10:39 am

Hi RZ thanks for your input

, I am aware that I can insert the jQuery between the <head> in the Ext Builder I have done this many times in the past for many of my extensions. The issue still remains even if I use the jQuery function between the <head> as the builder is generating the following and it is this that is breaking the final output of the extension, I know this because if I manually edit this out then the extensions works

Code: Select all

<script type="text/javascript">
$(document).ready(function()
{

});
</script>

Hi gp2727 as RZ I am aware that I can just add $('#map-container').storeLocator({'slideMap': $slide$, 'modalWindow': $modal$}); in the builder using the
$(document).ready(function() but this is not the issue I cannot modify or add the following var $s = jQuery.noConflict(); this is required to be added before see code below in red.
<script type="text/javascript">
$s = jQuery.noConflict();
$s(function() {
$s('#map-container').storeLocator({'slideMap': $slide$, 'modalWindow': $modal$});
});
</script>

The main issue is that the builder is adding the following code below no matter what way I try to build the extension each way it gets added and each time it stops the extension from working as it should it also gives errors...so what I need is to be able to have the builder not gemerate this I hoipe this gives a better insight to what is happening
The below is getting generated and not required as it stops the extension from working

Code: Select all

<script type="text/javascript">
$(document).ready(function()
{

});
</script>

[RZ] · Post by **[RZ]** » Thu Apr 05, 2012 10:55 am

hi bacon!
please read carefully this thread: http://wysiwygwebbuilder.com/forum/view ... 24&t=46015
this is a bug in EB, as you can see, i reported it...
you must manually edit only once the eb source file (with notepad or the like) and the issue is gone.
hope i explained myself and this "dirty trick" helps you.

BaconFries · Post by **BaconFries** » Thu Apr 05, 2012 11:14 am

Hi RZ thanks for pointing me to the url, I knew I had read about this but I could remember who it was that had posted this. I have now read it and I will edit the xwb file and make the changes and start building the extension and get it finished for release. thanks

[RZ] · Post by **[RZ]** » Thu Apr 05, 2012 11:21 am

when i build an extension from scratch, i save it of course, edit the source eb file removing these empty tags, and although i continue editing, updating and saving the extension over and over again, fortunately these empty tags are not present.
well, hope to see your extension very soon

madebyibloo · Post by **madebyibloo** » Thu Apr 05, 2012 11:46 am

Nice addition RZ! i'm going to re-do my extensions next week with this info! so thanks!

While this post is available, I got a quick question about the jquery conflict..

See this snippet below, because I cannot get it to work with the conflict included...

Code: Select all

<script type="text/javascript" src="./jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="./jquery.effects.core.min.js"></script>
<script src="preloader/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="preloader/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery("body").queryLoader2();
});
</script>
<script type="text/javascript" src="jquery.localscroll.js"></script>
<script type="text/javascript" src="jquery.scrollto.js"></script>
<script type="text/javascript">
$(function($) {
 $.localScroll.defaults.axis = 'y';
 $.localScroll({
  duration: 1000,
  easing: 'linear',
  queue: false,
  hash: false });
 });
</script>

In the above, there is 2 extensions, one is the ultimate page scroller (bottom) and the top one is a preloader i'm working on..

The

Code: Select all

<script type="text/javascript" src="./jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="./jquery.effects.core.min.js"></script>

belongs to the UPS but for some reason its showing up within the preloader script, I dont think this is the issue though, I believe its something to do with the jquery conflict code.

Whats your thoughts guys?

Cheers,
Scott

[RZ] · Post by **[RZ]** » Thu Apr 05, 2012 11:56 am

as far as i've read, noConflict must be into the ready function:

jQuery(document).ready(function () {
jQuery.noConflict();

also, are you mixing two jquery versions?

anyhow, i already did and posted a simpler "preloader" extension to avoid <this> issue...

madebyibloo · Post by **madebyibloo** » Thu Apr 05, 2012 12:08 pm

[RZ] wrote:as far as i've read, noConflict must be into the ready function:

jQuery(document).ready(function () {
jQuery.noConflict();

also, are you mixing two jquery versions?

anyhow, i already did and posted a simpler "preloader" extension to avoid <this> issue...

Hi RZ,

yeh, ive included the doc ready function as posted above

Code: Select all

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery("body").queryLoader2();
});
</script>

And, what do you mean by mixing two jquery versions? I did not include the jquery in extension builder if thats what you mean, thats why i'm using the noConflict with the preloader, basically the ultimate page scroller uses the standard jquery (added within eb) and the preloader extension has to include the latest version of 1.7.2 for it to work, which it does having the extension alone on a page.

Yeh i've seen and downloaded your preloader extension, its nice! This one i'm building has been a work in progress for over a year but never got round to making it, now there is a newer js version available and its got alot of cool features that can be included.

Cheers,
Scott

BaconFries · Post by **BaconFries** » Thu Apr 05, 2012 12:17 pm

Hi SUB ok try the following workaround this is how I have set up the code using the noconflict in the extension I am working on at present

Before

Code: Select all

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery("body").queryLoader2();
});
</script>

After

Code: Select all

<script type="text/javascript">
var $s = jQuery.noConflict(); 
$s(document).ready(function () {
$s("body").queryLoader2();
});
</script>

The above is working for me I am using jQuery 1.7.1 in the extension and using the jQuery Tabs in WB that is using jQuery 1.6.4 and both work together.

[RZ] · Post by **[RZ]** » Thu Apr 05, 2012 12:22 pm

your 1st and 3rd line are:
<script type="text/javascript" src="./jquery-1.6.4.min.js"></script>
<script src="preloader/jquery-1.7.2.min.js" type="text/javascript"></script>

madebyibloo · Post by **madebyibloo** » Thu Apr 05, 2012 12:30 pm

Thanks BF! that did the job! all works fine now! Cheers buddie!

Rz, yeh i noticed the two instances of jquery but with having the noConflict attached to the one with the higher jquery version,this excludes the previous version of jquery from that script.

Cheers,
Scott

[RZ] · Post by **[RZ]** » Thu Apr 05, 2012 12:48 pm

ok sub, i think i've misread something here...
glad to know it works now.

madebyibloo · Post by **madebyibloo** » Thu Apr 05, 2012 12:52 pm

Hehe no probs RZ

, Thanks again for letting us aware of the 'Editing & Removal' of the eb file regarding the doc ready issue!

Have a great day!

Cheers,
Scott

www.wysiwygwebbuilder.com

Using $(document).ready(function() in Ext Builder

Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder

Re: Using $(document).ready(function() in Ext Builder