[jQuery] OT: Javascript OOP / Class Design
Hello, This is a bit OT sorry, but I don't know where else to post this JS related question. My question is about using design patterns and OOP principles in Javascript. I am trying to determine the best way to build a photo album application, where the user can layout many photos and each photo can have different properties and behaviors. They can also add text and other elements to their photo album. Does it make sense to create a PhotoElement class for each photo added to the album? This might be instantiating between 10-200 of these objects. Each object would manage its own display, and properties etc. The data would be saved back to the server and when it was reloaded, the data would be parsed back into object instances. So does that make sense, or should I just use a MVC pattern where the controller looks at the data (model) which is, say an array of objects (the photos/page elements) and creates an each instance of the photo representation (renders them to the screen only) and handles all of the interaction through conditional processing as opposed to allowing the objects to do their thing and maintain their own properties and behavior. Anyone? Brook
[jQuery] Re: AJAX and dynamically created dropdowns
You'll never see it in the 'view source' if its dynamically added. If you use the Inspect function of firefox you can see the dynamically added content. I think the IE developer toolbar does the same thing. Make sure that you are setting the length of the selects option array and setting a text/value pair for each entry in the drop down. When you say 'no results', what do you mean? No results when you submit the form? Brook -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Yaz Sent: October 19, 2007 11:59 AM To: jQuery (English) Subject: [jQuery] Re: AJAX and dynamically created dropdowns With the select plugin I get the same results. Added the form tag. Still no results. Btw, I noticed that even though in Firefox the dropdown does get populated, at view source there is no list of schools Thanks for the suggestion guys. -yaz On Oct 19, 2:31 pm, Jack Killpatrick [EMAIL PROTECTED] wrote: FWIW, I've never had any problems with id and name being the same on controls in IE. I don't see a form tag on the page, maybe that's the issue? You might also want to try this: http://www.texotela.co.uk/code/jquery/select/ - Jack Chris Jordan wrote: Could it be because you're name and id are identical? select name=SchoolID id=SchoolID /select Perhaps IE doesn't like this? Just a guess. Chris On 10/19/07, *Yaz* [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Hello everyone, I have a script that basically just reads some data from an xml file, then the data gets loaded into a select dropdown, by dynamically creating option tags. Here's the working sample: http://yazmedia.com/sandbox/ View source for the code. XML:http://yazmedia.com/sandbox/data.html It works fine in Firefox, but in IE 7 or 6 it doesn't. I tried using a function addOption() that I found online, to see if at least I was doing something wrong in my code, but still neither option works. Anything that could shed a little light into this would be much appreciated. -yaz -- http://cjordan.us
[jQuery] .wrap when targeting a frame generates an error in IE
I tested some code in IE7 today and ran into a strange problem with the
jQuery .wrap method. I have narrowed it down to this function failing when
targeting a frame like this:
curContext = $('#mPreviewFrame')[0].contentWindow.document;
$('#mydiv',curContext).wrap('div id=myNewOuterDiv/div');
This generates an error Invalid Argument in IE 7, but works fine in FF. To
further isolate the problem I changed the 'curContext' to a div on the
current page and tested, and that works fine in IE, so it appears to be
specifically releated to using a frame as the context.
Does anyone know another way this could be written to achieve the same
result? Is this a bug?
Thanks!!
BrookD
[jQuery] Re: AjaxCFC
Thanks for the feecback Jack. I am using the success() method and within
that method I want to call a method on the current object. The reason is
because I have spawned multiple objects and they all fetch data via ajaxCFC
and I want the correct object to handle the result.
I could save a reference in the global scope, but that would mean I could
only have one ajax call at a time. I just wish I could pass an object
through to the callback handler so that reference would be available in
success(). I guess I could pass a string reference to the class object to
the server and have it returned an evaluated - but there must be a better
way, no?
BrookD
_
size=2 width=100% align=center tabindex=-1
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Jack Killpatrick
Sent: October 3, 2007 6:19 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: AjaxCFC
Hmm, maybe create a global var to hold a ref to the scope?
var currentObj;
and in getData:
currentObj = this;
ajax call
and in dataResult:
currentObj.someProperty = data.yadda;
currentObj = null;
?
In case you don't know, the ajaxCFC also has a success callback:
$.AjaxCFC({
url: some.cfc,
method: 'doIt',
data: { yadda:'ya' },
success: function(data){
do some stuff;
}
});
I'm assuming you're calling the dataResult() function via the success
attribute, but just in case, FYI. It doesn't really change the approach to
knowing scope thing, though, AFAIK. If you try putting this inside the
anonymous function, it still won't know the calling object.
- Jack
Brook Davies wrote:
Hello Jack,
Well I want to get the scope of the calling object that the function
resides in. I have multiple instances of this object:
someObj = {
getData: function(){
//cfAjax request starts here
}
,
dataResult: function(data){
// handle result from cfAjax here
}
}
a = new someObj()
b = new someObj()
// call getData on 'a' instance
a.getData();
This is where I want the cfAjax callback to be within the scope of the 'a'
object or at least somehow get a reference to 'a'. How do I do that?
BrookD
[jQuery] EXTjs and Jquery
Steve, You mention that you use extJS and jQuery. How do they work together and how is this a beneficial relationship? I drool when I see the ext demos. How do the two technologies play together? BrookD
[jQuery] Re: ajaxCFC and CF8
Thanks Rey! I didn't so much mean about using the built in ajax components, but more along the lines of all the work ajaxCFC does converting to json and such. Isn't some of that functionality build into CF8 now? BrookD -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Rey Bango Sent: October 3, 2007 5:52 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: ajaxCFC and CF8 Brook, CF8 provides quite a number of options in terms of prebuilt Ajax controls but I tend to refer to them as intro widgets. They don't provide the level of functionality available in jQuery or many other libs and do not adhere to any form of progressive enhancement. Also, few users want to use Spry for their development and CF8, out of the box, already includes an outdated and non-upgradeable version of YUI. AjaxCFC most certainly remains relevant as it provides a very easy interface for making Ajax calls to your CF templates and leveraging native CF data types. In addition, since jQuery is included in AjaxCFC, you now have the capability to leverage the wealth of jQuery plugins available. And since it's open source, you can upgrade things as needed instead of having to wait until Adobe patches the libs. Rob and I will be working on updating AjaxCFC to jQuery v1.2.1 soon and possibly creating wrappers around jQuery UI components. Rey... Brook Davies wrote: Can Rob or Rey shed some light on this? Is ajaxCFC still relevant with the release of CF8? BrookD
[jQuery] Re: AjaxCFC
Hello Jack,
Well I want to get the scope of the calling object that the function
resides in. I have multiple instances of this object:
someObj = {
getData: function(){
//cfAjax request starts here
}
,
dataResult: function(data){
// handle result from cfAjax here
}
}
a = new someObj()
b = new someObj()
// call getData on 'a' instance
a.getData();
This is where I want the cfAjax callback to be within the scope of the 'a'
object or at least somehow get a reference to 'a'. How do I do that?
BrookD
[jQuery] RED: [jQuery] Re: Packed version of BlockUI?
On this topic, what are the rules to write JS that will pack without error? I know you need a ; at the end of every line, but what else? BrookD -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Rey Bango Sent: October 3, 2007 8:15 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Packed version of BlockUI? Andy, Just take the code and drop it into Dean Edward's Packer or YUI compressor. Rey Andy Matthews wrote: I'm in need of a simple page overlay, which I'll be using to display help messages. I found BlockUI, but it's 15k. Is there a packed version of it, or a simpler version that just allows for a page overlay? * Andy Matthews *Senior ColdFusion Developer Office: 877.707.5467 x747 Direct: 615.627.9747 Fax: 615.467.6249 [EMAIL PROTECTED] www.dealerskins.com http://www.dealerskins.com/
[jQuery] ajaxCFC and CF8
Can Rob or Rey shed some light on this? Is ajaxCFC still relevant with the release of CF8? BrookD
[jQuery] AjaxCFC
Can anyone who uses ajaxCFC tell me how to get a reference to the calling objects scope in the success handler? I can't figure out how to pass arguments through to the callback / success handler. Anyone? FYI, I am using the jQuery version of ajaxCFC. Works awesome BTW. BrookD.
[jQuery] Re: NEWBIE QUESTION: Catch Select event
I've tried this, but it does not catch change events trigged by the
keyboard. Why?
Brook
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Andy Matthews
Sent: September 20, 2007 1:21 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: NEWBIE QUESTION: Catch Select event
I believe you'd want the change handler.
$(select).change(function() {
//do some stuff here...
)};
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of hobbit
Sent: Thursday, September 20, 2007 1:22 PM
To: jQuery (English)
Subject: [jQuery] NEWBIE QUESTION: Catch Select event
Hi,
I would like to catch the select event when a user changes the select item
in any SELECT in a form. Something like:
$(select).select(function() {
//do some stuff here...
)};
Is this feasible?
[jQuery] OT: Combining JS files for production releases
Hello, Since we know that including a large number of JS files seperatlty significantlty increases download time (http://www.wormly.com/help/case-studies/the-web-2.slow), what does everyone do? Do you combine and pack your JS files (for example if you have several of the UI library includes) into 1 js file before moving the site to production? Do you have a system to do this or is it a manual process? How do you keep your source files organized and the process of combining and packing them to release any changes or bug fixes orderly? Brook
[jQuery] Newbie Question: Workiing with form fields and jQuery / Select in Particular
How do you get a reference to a select field and then do things like set the
selectedIndex, get the options array etc.
I know I can get a reference to the object via a basic selector
$(#mySelect) but then how do I access the options array and related stuff?
How do you access the 'object' that you would get returned from
getElementById('mySelect')
Brook
[jQuery] Loading remote JS or dynamically loading .js files
Hello, I am trying to create an app that opens a window dialog window (using the new UI plugin..) and I am debating between loading into an iframe or dynamically loading a number of .js files and then dynamically generating the content of the window. The window lets the user adjust some settings and it can be called from within an app or as a standalone. Which method is better? I do not have much experience loading the .js files to support the new 'window', would this be a good approach? Or would an Iframe be better / easier? Brook
[jQuery] Re: How to return a click event from the container function
Question: When you say consider caching $('#inline_dialog') in a local
variable, do you mean simply storing the string x = somehtml or another
method of caching. How would you cache it and reuse it with jQuery? Does it
need to be inserted into the document before it can be cached?
Thanks!
Brook
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Erik Beeson
Sent: September 19, 2007 11:39 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: How to return a click event from the container
function
For that to happen, showDialog would have to block until the dialog was
closed, and that's not how JavaScript works. To do what you want, pass a
callback function to showDialog and call it on close. Something like this
(untested):
this.showDialog = function(msg, buttons, onHide) {
$('#inline_dialog').show().swapDepths();
var buttons = (buttons) || 'div class=clear-block/divdiv
id=inline_alert_close_button/div';
$('#' + self.window_id).floatWinSetContent({content:msg + buttons,
title:''});
$('#inline_alert_close_button').click(function() {
$('#inline_dialog').hide();
if($.isFunction(onHide)) onHide.call(/* whatever you want 'this' to be
in your callback, maybe $('#inline_dialog') */);
return false;
});
}
Also, you might consider caching $('#inline_dialog') in a local variable,
since you call it a lot. Lastly, it's good form to include a semicolon after
the last } since it's technically an assignment, so one should be there.
It'll help save you from potential problems down the road.
Good luck with it.
--Erik
On 9/19/07, Skilip [EMAIL PROTECTED] wrote:
Hi, I'm currently working on a function which shows a inline dialog,
so I can use html in the dialog box. In the dialogbox I've put a
button to close the dialog box. If the button is clicked I want the
function showDialog() to return a value. The problem is that it's out
of the scope when I'm in the click() function. It there a solution?
this.showDialog = function(msg, buttons) {
$('#inline_dialog').show().swapDepths();
var buttons = (buttons) || 'div class=clear-block/divdiv
id=inline_alert_close_button/div';
$('#' + self.window_id).floatWinSetContent({content:msg + buttons,
title:''});
$('#inline_alert_close_button').click(function() {
$('#inline_dialog').hide();
return false;
});
}
[jQuery] Re: blockUI scope / $.unblockUI not closing
Mike, I think this was a mistake in my code, which has been fixed. Thanks for the reply. Another thing is that I was using an existing dom element as the blockUI window and this works fine, but after blockUI shows the div, it does not replace it back into the document, so the next call to blockUI does not work. I worked around this by creating the dialog/dom element dynamically and then calling $.blockUI(myDynamicElement). Is this the expected behavior, or is it something I am doing wrong? Brook -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Mike Alsup Sent: September 14, 2007 5:16 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: blockUI scope / $.unblockUI not closing Brook, Do you have a page that demonstrates this problem? I've not seen any case in which unblockUI fails to unblock. For reference, all the elements used by blockUI have a class of blockUI so you can find them that way. Mike On 9/11/07, Brook Davies [EMAIL PROTECTED] wrote: Hello, How can I reference the blockUI window if $.unblockUI will not close it? I am using blockUI and can't get it to close from an event handler within an object using $.unblockUI. The object that contains the call to $.unblockUI. is not the same object that called $.blockUI(). Brook
[jQuery] blockUI scope / $.unblockUI not closing
Hello, How can I reference the blockUI window if $.unblockUI will not close it? I am using blockUI and can't get it to close from an event handler within an object using $.unblockUI. The object that contains the call to $.unblockUI. is not the same object that called $.blockUI(). Brook
[jQuery] NEWBIE Question: children() skips first element?
Hello,
I am trying to simply grab the children of a div. The markup is:
div id=content
div id=panelPreview class=fieldset_theme
div id=panelPreview_inner class=hPanel
fieldset
legend[Section/Panel
Heading]/legend
/fieldset
/div
/div
/div
But, what I don't understand is why when I call
alert($('#content').children().html());
The resulting html starts with 'div id=panelPreview_inner
class=hPanel'
It seems like it is missing the first div after #content? What am I
missing??
Brook
[jQuery] Re: NEWBIE Question: children() skips first element?
Hi John,
Sorry, this post is fairly long, what I am doing was a bit tricky to
explain. John, I know you are very busy and likely expected a short answer.
Don't feel too obligated to read though all of this
--
Well, actually, I was trying to get the markup/elements around another group
of elements and replace them with a new wrapper. In the example below, the
wrapper element (which actually consists of several elements), that I want
to remove and re-wrap (while keeping the children) with a new set of
elements is:
div id=panelPreview class=fieldset_theme
div id=panelPreview_inner class=hPanel
fieldset
legend[Section/Panel Heading]/legend
!-- lots of additional elements (including fieldsets) here.. --
/fieldset
/div
/div
Amd it is inside a div with an id 'content' which is static.
So I wanted to get the entire '#panelPreview' object, and then I guess
traverse through it to the contents of the fieldset element (after removing
the legend), store those children and then replace the #panelPreview divs,
fieldset element, and legend, with my new markup.
To the end user this essentially changes the visual display of a container
element as the user selects from various pre-defined 'themes'.
The outer markup is not the same between themes; some themes use a fieldset
while others have multiple nested divs etc.
The best I could come up with was to store the js in the DB along with each
theme definition. The JS includes code to remove the existing element based
on the ID (again, because of the variation between elements I could not
create a standard script to handle this..). That string is returned via ajax
as well as the new markup for the newly selected theme. These two strings
are combined, and an '[id]' placeholder in the string replaced with the
current elements ID. The '[newContainer]' placeholder gets replaced with the
new markup from the newly selected div. Then the string is evaluated.
This is working with essentially this code below being returned from the
server:
Note: (curContent is an iframe...)
=
//Remove fieldset legend tag
$('#[id]_inner fieldset legend',curContext).remove();
//Remove Replace Container
$('#[id]',curContext).wrap([newContainer]).after($('#[id]_inner
fieldset:first',curContext).children()).remove();
=
Which after being parsed results in:
=
//Remove fieldset legend tag
$('#previewPanel_inner fieldset legend',curContext).remove();
//Remove Replace Container
$('#previewPanel',curContext).wrap('div id=newOuterDiv).after($('#
previewPanel_inner fieldset:first',curContext).children()).remove();
=
This code works - but my guess is it's a mess.
This is still in test mode, I haven't gotten to far with this. I honestly am
not sure If this is a good way to do it or not or if it will be harder to
maintaiin being that the js is stored in a DB. My thought was actually to
create the [theme].js files that include the markup and then read those in
on the server and store that data in memory so requests for it are fast.
This way, also, I can have a testing area and I can simply include and edit
the js files to tweak code as opposed to getting it from the database and
upating the database each time.
Brook
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of John Resig
Sent: September 12, 2007 12:21 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: NEWBIE Question: children() skips first element?
.html() only gets the innerHTML for the first matched element. What
are you trying to do with the children?
--John
On 9/12/07, Brook Davies [EMAIL PROTECTED] wrote:
Hello,
I am trying to simply grab the children of a div. The markup is:
div id=content
div id=panelPreview class=fieldset_theme
div id=panelPreview_inner class=hPanel
fieldset
legend[Section/Panel
Heading]/legend
/fieldset
/div
/div
/div
But, what I don't understand is why when I call
alert($('#content').children().html());
The resulting html starts with 'div id=panelPreview_inner
class=hPanel'
It seems like it is missing the first div after #content? What am I
missing??
Brook
[jQuery] Using wrap() and then removing the wrapped element without removing the children
Easy Question I think. If I use (from Jquery 1.2): $(#myElem).wrapAll(div id='myDiv'/div); To wrap the div 'myDiv' around 'myElem', how can I later remove that div without removing the pre-existing myElem and any other contents of that div? Brook
[jQuery] Removing the Gray Border on the blockUI window
The BlockUI window has a thick gray border. How do you remove it? I am using
a hidden div as the contents of blockUI (as shown below) and have tried
setting the overlayCSS properties - but I can not get the gray border to go
away. Anyone?
$.extend($.blockUI.defaults.overlayCSS, { backgroundColor:
'#00',borderStyle:'none' });
var messageElement = $('#processingMessage');
$.blockUI(messageElement);
Brook
[jQuery] Redraw after changing CSS / Screen artifacts?
I am new to jquery, and I am trying to load HTML and CSS from a database and
have them applied dynamically to the document. The CSS is returned as a
string and I am using the cssEngine plugin to change the CSS:
$.cssEngine.createStyle(myCSS,'page_theme');
Everything is working fine, the CSS gets applied correctly, however, as I
toggle between different CSS the screen does not seem to completely redraw -
until the window is resized. For example, between two sets of CSS, the
background color changes - but it doesn't update until the window is
resized. Then it redraws correctly. So my question is, is there someway to
force a redraw?
The createStyle method from the ccEngine plugin source is below:
if($.browser.msie){
rules=document.createElement(style);
rules.setAttribute('type', 'text/css');
rules.styleSheet.cssText=cssText;
$(head)[0].appendChild(rules);
}else
var rules = $(head).append('style
type=text/css'+cssText+'/style')[0].lastChild;
if(id)
$(rules).attr(id, id);
var fClasses = this.classes || this.getClasses(true);
var obj = rules.styleSheet ? rules.styleSheet : (rules.sheet ||
document.styleSheets[document.styleSheets.length-1]);
$.each((obj.cssRules || obj.rules), function(){fClasses.push(this);});
return rules;
}
};
[jQuery] Developing for Opera
Doesn't Opera have like 1% marketshare? How can you justify spending a lot of time developing for Opera? Brook
