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

This section can be used to submit suggestions for Extension Builder.
Note that this section is not monitored for support.
Forum rules
This forum section can be used to submit suggestions for Extension Builder.
Note that this section is not monitored for support.
Post Reply
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by BaconFries »

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>
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

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

Post by [RZ] »

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
 
 
Posts: 130
Joined: Fri Nov 04, 2005 12:40 pm
Location: USA

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

Post by gp2727 »

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.
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by BaconFries »

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>
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

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

Post by [RZ] »

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.
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by BaconFries »

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 :)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

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

Post by [RZ] »

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 :)
User avatar
madebyibloo
 
 
Posts: 371
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

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

Post by madebyibloo »

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
Last edited by madebyibloo on Thu Apr 05, 2012 11:37 pm, edited 1 time in total.
Cheers,
Scott


www.madebyibloo.com - a creative design studio.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

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

Post by [RZ] »

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... ;)
User avatar
madebyibloo
 
 
Posts: 371
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

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

Post by madebyibloo »

[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
Cheers,
Scott


www.madebyibloo.com - a creative design studio.
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by BaconFries »

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.
Last edited by BaconFries on Thu Apr 05, 2012 1:41 pm, edited 1 time in total.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

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

Post by [RZ] »

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>
User avatar
madebyibloo
 
 
Posts: 371
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

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

Post by madebyibloo »

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
Cheers,
Scott


www.madebyibloo.com - a creative design studio.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

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

Post by [RZ] »

ok sub, i think i've misread something here...
glad to know it works now.
User avatar
madebyibloo
 
 
Posts: 371
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

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

Post by madebyibloo »

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
Cheers,
Scott


www.madebyibloo.com - a creative design studio.
Post Reply