[jQuery] Strip element from inside object
I'm returning a jQuery object div that has a/aspan
class=type/spanspan class=size inside as .html().
So how do i get rid of the span class=type from the object and then
place the rest of the HTML into another element?
Example:
function otherFunction(){
doFunction($(myObj));
}
function doFunction(ob){
alert(ob.html()); // where this line alerts the a and 2 span
tags mentioned above.
}
Thanks.
[jQuery] Re: Strip element from inside object
Ok, I think I got it:
var the_val = ob.clone().find(span).remove();
alert(the_val.html());
On Nov 22, 12:12 am, briandichiara [EMAIL PROTECTED] wrote:
I'm returning a jQuery object div that has a/aspan
class=type/spanspan class=size inside as .html().
So how do i get rid of the span class=type from the object and then
place the rest of the HTML into another element?
Example:
function otherFunction(){
doFunction($(myObj));
}
function doFunction(ob){
alert(ob.html()); // where this line alerts the a and 2 span
tags mentioned above.
}
Thanks.
[jQuery] Sliding effect not working
What could be the problem here? I am using the easing plugin to have a
panel slide up out of sight, or down into sight and it was working
before, but now it's not. The panel just quickly goes to the desired
position with no effects. Would other elements on the page affect
this? I am using the latest version of both jQuery and the Easing
plugin. Am I using the animate function incorrectly? Here's the code
I'm using:
function toggleAlert(){
$(#toggle).blur();
$(#alert).animate( {
top: (($(#toggle).html() == show) ? -15px :
-163px)
}, 1000, easeInOutElastic);
setTimeout(function(t){
$(#toggle).html((($(#toggle).html() == show) ?
hide :
show));
$(#alert).toggleClass(hide);
$(#alert).toggleClass(show);
}, 500);
return false;
}
$(document).bind(ready, function(r){
$(#toggle).bind(click, function(c){ return toggleAlert(); });
});
[jQuery] Nested Sortables with 2 Lists
I'm trying to make a Menu builder and having trouble finding a plugin to do what I need. On the left is the current menu. It's a nested ul list. On the right is a list of pages not appearing in the menu. I need 1. The ability to sort the menu on the left in a nested manner, so items can contain sub-items. 2. The ability to drag items from the left to the right and vice-versa Something like this would be great: http://dev.jquery.com/view/tags/ui/latest/demos/functional/#ui.sortable But I can't figure out how to make it work with nested lists. I'm also looking at this: http://code.google.com/p/nestedsortables/wiki/NestedSortableDocumentation But this one doesn't use the jQuery UI plugin, but some other interface plugin. I need to combine these features so I can take an item from list of files and move it to the navigation list. Thanks for any help.
[jQuery] Which Event to use with Sortables and connectWith?
I am having trouble figuring out the difference between all of these events and need to know the best one to use. I'm using 2 lists and the ability to drag back and forth between them using connectWith. When an item goes from the left list to the right list, I have a receive function that simply marks that item as no longer in the menu. That's the only event i really need on the right side, however the left side is more complicated. On the left side I need to update the items when the list is sorted within itself as well as when an item is dropped from the right side. I tried update, however it has a duplicate of the item that is sorted in the sort list. So i used the stop function to handle the sorting, but neither of these do anything when an item is dropped onto the list, so I had to make a 3rd function (receive) when this event happens. 1. this has turned out to be a whole lot of difficult to manage code 2. sometimes it will fire 4 events on 1 action What's the best way to handle this situation? Thanks.
[jQuery] Re: Trouble with this
In the case you are trying to use it, the first instance of this is
referring to the root function object. this.hello is an item inside
that object. when you create the other 2 functions, this no longer
means what it did originally. If you want to pass the information of
this, you need to replace this with obj and set obj to this in
the root function. Like this:
var MyClass = function(selector)
{
obj = this;
obj.hello = 'Hello World!';
alert('loaded: this = ' + obj); // -- object Object
alert(obj.hello); // -- alerts Hellow World!
var onClick = function()
{
alert('onclick: this = ' + obj); // -- object HTMLInputElement
alert(obj.hello); // -- does not work: undefined
otherFunc();
}
var otherFunc = function()
{
alert('otherfunc: this = ' + obj); // -- object Window ??
alert(obj.hello); // -- does nto work: undefined
}
$(selector).bind(click, onClick);
};
$(document).ready(function()
{
var a = new MyClass('#clickme');
});
hth
Brian.
On Nov 10, 7:18 pm, Hector Virgen [EMAIL PROTECTED] wrote:
Here's the link to the test page:http://www.virgentech.com/sandbox/this.html
-Hector
On Mon, Nov 10, 2008 at 5:17 PM, Hector Virgen [EMAIL PROTECTED] wrote:
I'm having trouble using this in my objects when the method is triggered
by an event.
Here's my basic test class. The lines that do not work as expected are in
red.
var MyClass = function(selector)
{
this.hello = 'Hello World!';
var onClick = function()
{
alert('onclick: this = ' + this); // -- object HTMLInputElement
alert(this.hello); // -- does not work: undefined
otherFunc();
}
var otherFunc = function()
{
alert('otherfunc: this = ' + this); // -- object Window ??
alert(this.hello); // -- does nto work: undefined
}
$(selector).click(onClick);
alert('loaded: this = ' + this); // -- object Object
alert(this.hello); // -- alerts Hellow World!
};
The way this works is instantiating a new MyClass object binds the click
event to the selector. This works fine, but this loses its scope, even
when calling other functions.
To see this in action, check out this page (watch out for the alerts ;)).
Any ideas on how to keep this within scope?
-Hector
[jQuery] Re: Which Event to use with Sortables and connectWith?
This is what I have right now, which has been revised a bit, but i'm
sure there's a smarter way:
function sortAction(e,ui,a){
var proceed = true;
var el_id = $(ui.item).attr('id');
id = el_id.replace(ele-,);
var params = action=update_menu_itemjsa=+a+item_id=+id;
if($(#+el_id).parents(li).length 0){
var parent_id = $(#+el_id).parents(li).attr('id');
parent_id = parent_id.replace(ele-,);
var parent_el = $(#ele-+parent_id+ ul);
} else {
parent_id = 0;
var parent_el = $(#sortable-list ul);
}
if(a == remove){
parent_id = NULL;
} else {
var new_order = ;
var kids = parent_el.children(li);
$.each(kids, function(e){
var tmp = $(this).attr(id);
tmp = tmp.replace(ele-,);
new_order = (new_order == ) ? tmp : new_order
+ ,+tmp;
});
if(a == stop new_order == ){
proceed = false;
} else {
params += new_order=+new_order;
}
}
params += parent_id=+parent_id;
if(proceed){
$.ajax({
type: POST,
url: /stoneCMS/stone/stone_ajax.php,
data: params,
success: function(result){
if(result != ){
if(result.indexOf(script) == -1){
// do something...
} else {
eval($(result).html());
}
} else {
$(#menu_result).show();
var newHTML = (a == remove) ? 'Item
removed from menu.' : ((a
== receive) ? 'Item added to menu' : 'Menu updated and sort
positions saved.');
if($(#menu_result).html() == newHTML){
$(#menu_result).css(background-color,#BCD985);
setTimeout(function(){
$(#menu_result).animate({
backgroundColor: #FFC
}, 1000);
}, 500
);
} else {
$(#menu_result).html(newHTML);
}
}
} // end success function
}); // end AJAX
}
}
$(document).bind(ready, function(r){
$(#sortable-list ul).sortable({
connectWith: [#selection-list ul],
receive: function(e,ui){
sortAction(e,ui,'receive');
},
stop: function(e,ui){
sortAction(e,ui,'stop');
},
remove: function(e,ui){
sortAction(e,ui,'remove');
},
out: function(e,ui){
// secret to nested lists
}
});
$(#selection-list ul).sortable({
connectWith: [#sortable-list ul]
});
} // end bind ready function
);
On Nov 10, 9:38 pm, MorningZ [EMAIL PROTECTED] wrote:
1. this has turned out to be a whole lot of difficult to manage code
2. sometimes it will fire 4 events on 1 action
Care to post any of said code to help others help you?
On Nov 10, 8:24 pm, briandichiara [EMAIL PROTECTED] wrote:
I am having trouble figuring out the difference between all of these
events and need to know the best one to use. I'm using 2 lists and the
ability to drag back and forth between them using connectWith. When an
item goes from the left list to the right list, I have a receive
function that simply marks that item as no longer in the menu. That's
the only event i really need on the right side, however the left side
is more complicated.
On the left side I need to update the items when the list is sorted
within itself as well as when an item is dropped from the right side.
I tried update, however it has a duplicate of the item that is sorted
in the sort list. So i used the stop function to handle the sorting,
but neither
[jQuery] Executing Scripts returned by AJAX Request
Hi, I would like my AJAX Request to function like this: if empty, all good, proceed. if scripts, not good, execute the script. if no scripts, but something in response, alert the text (some kind of error). Reason I want this is when the user tries to execute an action that requires them to be logged in and they are not or their session has timed out, I would like to output script to the AJAX Request page so the jQuery function can execute it and redirect the user to the login form. Is there something built in to handle scripts received by an AJAX Request? Thanks.
[jQuery] Re: Executing Scripts returned by AJAX Request
Well, I was actually looking for a more specific answer, however I did
find out through trial and error that it works sort of like this:
$.ajax({ success: function(response){
if(response.indexOf('script') != -1){
eval($(response).html());
}
}
})
There's no need to strip out script tags, it already does that.
Thanks, let me know if this isn't right.
Brian.
On Nov 6, 10:51 am, George [EMAIL PROTECTED] wrote:
My guess you could use Eval statement...
George.
On Nov 6, 10:07 am, briandichiara [EMAIL PROTECTED] wrote:
Hi,
I would like my AJAX Request to function like this:
if empty, all good, proceed.
if scripts, not good, execute the script.
if no scripts, but something in response, alert the text (some kind of
error).
Reason I want this is when the user tries to execute an action that
requires them to be logged in and they are not or their session has
timed out, I would like to output script to the AJAX Request page so
the jQuery function can execute it and redirect the user to the login
form. Is there something built in to handle scripts received by an
AJAX Request?
Thanks.
[jQuery] Re: Highlight Table Row with Animate
That was exactly what I was looking for. Thanks for the quick response
and easy to follow information.
On Jun 20, 1:52 pm, Richard D. Worth [EMAIL PROTECTED] wrote:
Color animations are not in core jQuery but are in jQuery UI Effects. If
color animations is all you want (from UI Effects), you just need one file:
effects.core.js, which you can get from the UI download build page:
http://ui.jquery.com/download_builder/(select Effects Core)
or directly here:
http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js
Here's the documentation:
http://docs.jquery.com/UI/Effects/ColorAnimations
- Richard
Richard D. Worthhttp://rdworth.org/
On Fri, Jun 20, 2008 at 11:18 AM, briandichiara [EMAIL PROTECTED]
wrote:
At the end of my Ajax request, I'd like to highlight a table row, so
to speak. Why doesn't this work:
id = 5
success: function(e){
$(#address+id).css(background-color,#F9FFCF);
$(#address+id).animate({backgroundColor:'#FFF'}, 800);
}
The first line will work, but the 2nd line does not. Any ideas?
[jQuery] Highlight Table Row with Animate
At the end of my Ajax request, I'd like to highlight a table row, so
to speak. Why doesn't this work:
id = 5
success: function(e){
$(#address+id).css(background-color,#F9FFCF);
$(#address+id).animate({backgroundColor:'#FFF'}, 800);
}
The first line will work, but the 2nd line does not. Any ideas?
[jQuery] Re: Getting Parent Element using this
Thanks for the tip hj. Is that a cross-browser solution? I tested it
in FF and got the absolute URL, but in IE it returns the relative
URL.
I used
var formAction = $(elm.form).attr(action);
and that will return the same in both browsers, however I'd still like
to know how reliable that is. Thanks.
Brian.
On May 9, 10:37 am, hj [EMAIL PROTECTED] wrote:
Could you possibly just give your form an id attribute? Then onchange you
could just return $(#myformid).attr(action) and not have to mess with
any traversing.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 1:58 PM
Subject: [jQuery] Re: Getting Parent Element using this
Ok, I tried this:
$(elm).parents().map(function () {
alert(this.tagName);
});
but the FORM never shows up. Reason is because the source looks like
this:
There's no need for any of this; elements of a form (input, select,
textarea) has a form property, so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
function changeAction(elm){
var formAction = elm.form.action;
...
}
And, as others have suggested, it's a better practice to do this all
in JavaScript, so that becomes:
form action=something
select id=some_select name=some_name
!-- some options --
/select
/form
jQuery(document).ready(function() {
jQuery('select#some_select').change(function() {
var formAction = this.form.action;
...
});
});
--
hj
[jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
what if the parent element is not a form. like:
form
label
select
/select
/label
/form
On May 8, 2:30 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
Also, i'd rather not commit anything i.e. using name=blah in case
the name gets changed. without me knowing.
On May 8, 2:30 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
I don't know why my reply's aren't showing up, but:
What if the first parent is not a form (like it could be a label or
div)? and also, I would like to avoid using the name=something just
because the name could change without me knowing it.
Thanks for the help.
On May 8, 2:30 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
Ok, I tried this:
$(elm).parents().map(function () {
alert(this.tagName);
});
but the FORM never shows up. Reason is because the source looks like
this:
table width=460 border=0 cellspacing=0 cellpadding=0
tr valign=top
td
table width=100% border=0 cellpadding=0
cellspacing=0
tr
td valign=top colspan=2
table border=0
cellspacing=1 cellpadding=3 width=100%
form Method=Post
Action=phoenix.zhtml?c=69181p=OL-
homet=SwitchQuote
tr
class=modBgQuoteShrtTicker
td
colspan=4 nowrap=nowrap
span class=modQuoteShrtTicker
Select name=control_Symbol
ONCHANGE=updateQuote(this);
option value=1 SELECTED=opt 1/option
option value=2opt 2/option
/Select
/span
/td
/tr
/form
I won't be able to alter the source, for it is nothing i have much
control over. So, how would i get the ACTION from the FORM above on
the SELECT menu's ONCHANGE event using jQuery?
On May 8, 2:30 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
ok, i'm not sure if this is the easiest way, however, this is how I
got the form action in the following HTML:
table width=460 border=0 cellspacing=0 cellpadding=0
tr valign=top
td
table width=100% border=0 cellpadding=0
cellspacing=0
tr
td valign=top colspan=2
table border=0
cellspacing=1 cellpadding=3 width=100%
form Method=Post
Action=phoenix.zhtml?c=69181p=IROL-
irhomet=SwitchQuote
tr
class=modBgQuoteShrtTicker
td
colspan=4 nowrap=nowrap
span class=modQuoteShrtTicker
Select name=control_Symbol
ONCHANGE=updateQuote(this);
option value=1 SELECTED=opt 1/option
option value=2opt 2/option
/Select
/span
/td
/tr
/form
I used:
var formAction = $
(elm).parents('table:first').children(form:first).attr(action);
For some reason, it misses the form object on the way back using
parents so i move forward after hitting the FORM's parent to get the
form. Not sure if this is browser specific, but definitely a
headache. (and the terrible HTML syntax doesn't help either)
Thanks
On May 8, 4:20 pm, Michael Geary [EMAIL PROTECTED] wrote:
I don't know why my reply's aren't showing up, but:
What if the first parent is not a form (like it could be a
label or div)? and also, I would like to avoid using the
name=something just because the name could change without
me knowing it.
Assuming you have a DOM element in 'this', you can get its parent form with:
$(this).parents('form:first')
Since forms can't be nested, you don't actually need the :first part, but
it's a good habit to get into if you use this technique for other element
types that can be nested.
BTW, nesting a select element inside a label element only works in some
browsers (IIRC, it doesn't work in IE). Use the for=id attribute in your
label for cross-browser compatibility.
-Mike
