[jQuery] Combining ajaxForm and livequery
Can I use livequery on ajaxForm?
or is there another way to add event listeners to ajax produced form?
This page redirects to the example
http://reenie.org/test/hffc.php
If you click Login and add any name, the form submits and shows you
logged in.
If you don't add a name the form submits and mimics the situation
where the user is not found. It displays an error message and displays
the login form again
The close button works before and after the form is rewritten
because it uses livequery to bind it to the click function.
$(#loginclose) .livequery('click', function(event) {
//closes login box
}
However, after the form is submitted, the form's event listeners are
missing.and the form is will not be submitted via ajax again.
I'm using this code to bind the form to the options function.
$('#loginform').ajaxForm(options);
How do I bind the form again without reloading the page?
[jQuery] Re: What's wrong with my slideUp slideDown?
Hi,
I think your problem is because #result is empty first time through so
slideUp doesn't do anything - therefore slideDown doesn't either.
Try adding this as the first document ready item to populate #result
with a blank paragraph:
$(#result).html('pnbsp;/p');
Paul
[jQuery] Need help modifying this jQuery...
I'm trying to put my first Ajax to use by creating a login form.
To get there, I'm attempting to modify the first tutorial I've found which
I understand enough to understand what it's doing and how it's working
with a ColdFusion backend.
Anyway, my first question is: How do I modify the code below to
send an email address (form.email_address) and password (form.password)
to the url: request_processor.cfm?
The code below was just for a form with a select which, when the value
changed,
would cause an item in a db to be read and appear. I'm modifying it for
email_address
and password fields, with a submit button.
$(document).ready(function(){
$('#contentdiv').html('nbsp;');
$('#idm').change(function(){
var formval = {idm:$(this).val()};
$.ajax({
type: POST,
url: request_processor.cfm,
dataType: json,
data: formval,
success: function(response){
$('#contentdiv').empty().fadeIn(1000).append(response.main_dish);
}
});
});
});
So, I'd have:
$(document).ready(function(){
$('#contentdiv').html('nbsp;');
$('#login-button').click(function(){
var formval = {email address, password:$(this).val()};
--- (???)
$.ajax({
type:post,
url:request_processor.cfm,
dataType:json,
data:formval
success:function(response){
$('#contentdiv').empty().fadeIn(1000).append(response.login_message);
}
});
});
});
What changes need to be made?
Thanks for any help!
Rick
[jQuery] Re: bresenham algorithm
(sorry my english...)
Hi,
You are right about your explain. But you can see at
isabeladraw.sourceforge.net what I've been developing. In this implements
the app build 1px div per div. This is very slow!! But for the next version
(you can see at
http://calango.barquettenet.net/~dirceu/isabela/jquery.isabela_draw) on
mouseover the canvas builds div with dimensions choiced are draw in absolute
position. When you want to make a line the app uses bresenham algorithm.
In fact, canvas is the best way, but jQuery makes easy DOM manipulation and
you can make a valid html image for your websites. And the code is very
simple You can make funcionalities
like modules and merge it to the code. My wish is sharing this code with
all.
Thank you very much. Your opinion is very important!
Dirceu Barquette
2008/12/7 Richard D. Worth [EMAIL PROTECTED]
The best way is using canvas. It works in all modern browsers. Other than
that, if you really must do it with dom elements, the biggest single
improvement you can make to your code is to do DOM manipulation once, up
front. Add a bunch of divs (enough for the longest line you would draw) and
keep references to them in an array. Creating, appending, then removing so
many elements (as well as setting css classnames that are identical for all)
while the mouse is moving is going to be really really slow. Then after that
the next fastest improvement is to not use jQuery to modify their style
properties to reposition/resize them, but just the straight element style
property.
- Richard
On Sat, Dec 6, 2008 at 4:59 PM, Dirceu Barquette
[EMAIL PROTECTED] wrote:
Hi!
this function draw a line using bresenham algorithm.
I created a selected line to draw. when the user movemouse, the oldest
line is erased and a new selected line is created.
but the process spent a lot of time. I think the problem is in outstanding
line.
Is there best way?
thanks,
Dirceu Barquette
isabela_draw_line = function (s) {
$.fn.isabela_draw.new_set({in_action:true});
$('.isabela_draw_board')
.bind('mousemove',function(e){
relX = e.clientX - s.position.clientX;
relY = e.clientY - s.position.clientY;
absX = relX + s.position.clientX;
absY = relY + s.position.clientY;
Id = 'cel-'+relX+'-'+relY;
var unit = s.brush.length+s.brush.unit;
* $('.selected_to_draw').removeClass();**- empty oldest
positions*
var coords =
line(settings.click_position.clientX,settings.click_position.clientY,absX,absY);
*-Bresenham algorithm*
var str = '';
console.log(coords)
jQuery.each(coords,function(k,v){
str = 'cel-'+v.X+'-'+v.Y;
console.log(str);
if (!$('#'+str).hasClass('layer-1')) {
obj= map({id:str,X:v.X,Y:v.Y});
$('div/div')
.attr({id:str})
.css({position:'absolute',left:v.X,top:v.Y,width:unit,height:unit})
.addClass('layer-1 selected_to_draw')
.appendTo('.isabela_draw_board');
}
})
})
}
[jQuery] Re: click not triggering on safari (mac), chrome (windows)?
Hi Karl,
Thanks for the suggestion! I think that's me still thinking of
cancelling handelers manually, not sure if it was helping or not.
Anyway, it's made no difference - I'm wondering if anyone else has
come across a similar problem, and solved it, or can shed some insight
into what may be causing problems like this?
Dave
On Dec 6, 2:59 am, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi Dave,
It could be the return(false). Try removing that line and see what
happens. You already have the e.preventDefault() in there anyway.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Dec 5, 2008, at 6:47 PM, dave wrote:
Hi jQueriers,
Bumped into an oddity on Safari and Chrome. I have a HTML page and I
want to intercept all a links and feed them through an ajax request
instead. So I first do this
$(a).bind(click,handleAjaxifiedLink);
which routes clicks to
function handleAjaxifiedLink(e) {
e.preventDefault();
loadPage(e.target.href);
return(false);
}
This works under IE and Firefox, but Chrome and Safari just seem to
ignore it. Am I missing something really obvious? I don't run Safari
and the debugger in chrome is unhelpful, to say the least.
Examples of code athttp://dev.welovekaoru.client.tandot.co.uk/and
http://dev.welovekaoru.client.tandot.co.uk/static/wlk.js.
TIA to any smart cookies!- Hide quoted text -
- Show quoted text -
[jQuery] Re: bresenham algorithm
P.S: at w3schools.com: *Note:* The canvas tag is only a container for
graphics, you must use a script to actually paint graphics.
Thanks
2008/12/7 Dirceu Barquette [EMAIL PROTECTED]
(sorry my english...)
Hi,
You are right about your explain. But you can see at
isabeladraw.sourceforge.net what I've been developing. In this implements
the app build 1px div per div. This is very slow!! But for the next version
(you can see at
http://calango.barquettenet.net/~dirceu/isabela/jquery.isabela_drawhttp://calango.barquettenet.net/%7Edirceu/isabela/jquery.isabela_draw)
on mouseover the canvas builds div with dimensions choiced are draw in
absolute position. When you want to make a line the app uses bresenham
algorithm.
In fact, canvas is the best way, but jQuery makes easy DOM manipulation and
you can make a valid html image for your websites. And the code is very
simple You can make funcionalities
like modules and merge it to the code. My wish is sharing this code with
all.
Thank you very much. Your opinion is very important!
Dirceu Barquette
2008/12/7 Richard D. Worth [EMAIL PROTECTED]
The best way is using canvas. It works in all modern browsers. Other than
that, if you really must do it with dom elements, the biggest single
improvement you can make to your code is to do DOM manipulation once, up
front. Add a bunch of divs (enough for the longest line you would draw) and
keep references to them in an array. Creating, appending, then removing so
many elements (as well as setting css classnames that are identical for all)
while the mouse is moving is going to be really really slow. Then after that
the next fastest improvement is to not use jQuery to modify their style
properties to reposition/resize them, but just the straight element style
property.
- Richard
On Sat, Dec 6, 2008 at 4:59 PM, Dirceu Barquette
[EMAIL PROTECTED] wrote:
Hi!
this function draw a line using bresenham algorithm.
I created a selected line to draw. when the user movemouse, the oldest
line is erased and a new selected line is created.
but the process spent a lot of time. I think the problem is in
outstanding line.
Is there best way?
thanks,
Dirceu Barquette
isabela_draw_line = function (s) {
$.fn.isabela_draw.new_set({in_action:true});
$('.isabela_draw_board')
.bind('mousemove',function(e){
relX = e.clientX - s.position.clientX;
relY = e.clientY - s.position.clientY;
absX = relX + s.position.clientX;
absY = relY + s.position.clientY;
Id = 'cel-'+relX+'-'+relY;
var unit = s.brush.length+s.brush.unit;
* $('.selected_to_draw').removeClass();**- empty oldest
positions*
var coords =
line(settings.click_position.clientX,settings.click_position.clientY,absX,absY);
*-Bresenham algorithm*
var str = '';
console.log(coords)
jQuery.each(coords,function(k,v){
str = 'cel-'+v.X+'-'+v.Y;
console.log(str);
if (!$('#'+str).hasClass('layer-1')) {
obj= map({id:str,X:v.X,Y:v.Y});
$('div/div')
.attr({id:str})
.css({position:'absolute',left:v.X,top:v.Y,width:unit,height:unit})
.addClass('layer-1 selected_to_draw')
.appendTo('.isabela_draw_board');
}
})
})
}
[jQuery] SlideShow based on SQL Server
I am brand new to JQuery, but very excited over it. I have looked at s3Slider and similar packeges, but they all seem to get their images statically, either by referencing a folder or by just referring to them (1.jpg, 2.jpg, ). I have a database with image paths (images/woof1.jpg), for example. How do I use JQuery with an asp.net technology, like Linq, or even a Web Service to be able to feed a slideshow, or anything similar? Thanks to all, Paolo
[jQuery] Re: Nokia 95 AJAX problem
ah yeah! excellent! Cheers for Chiming in Alex!!!...
that's made me feel a little bit better :)
On Dec 6, 2:02 am, Alex Hempton-Smith [EMAIL PROTECTED]
wrote:
I have an iPhone 3G so I'd better chip-in here :P
The iPhone has iPhone Safari installed, which was forked somewhere
in-between Safari 2 and Safari 3 - meaning you have more CSS support that 2,
but less than 3.
The great Facebook web-app for the iPhone can be visited manually at
[http://iphone.facebook.com/], where you can see the extensive use of AJAX.
Therefore, AJAX does work on the iPhone and you can be pretty sure that if
it works in Safari it will *probably*, most likely, work on the iPhone. :)
Hope this helps,
Alex
On Fri, Dec 5, 2008 at 11:27 PM, nmiddleweek [EMAIL PROTECTED]wrote:
Hello guys!
I'm doing mobile web work and am using jQuery for AJAX callbacks...
It all works nicely on my Vista Box using Safari, IE7, FF3 and Chrome
and I've been testing it on my N95 browser which I think is Safari
version 2.0 -www.cyscape.com told me :)
I've hit a problem with the AJAX calls on the N95, I'm getting a
'success' on the textStatus when using $('#hidden').load
(url,,callback(data, textStatus)) but the data part is null.
On the other browsers it's returning the contents of the server
response but the N95 is giving me a null.
The contents of the $('#hidden').html() is not getting getting
updated.
I've also tried using jQuery.get(url,,callback(data)) but the data
value is null as well.
I'm thinking that my N95 doesn't support AJAX calls or the jQuery
implementation of it?
Is there any way I can test this further?
Does anyone know if AJAx works on the iPhone? I don't have one to
test :(
Thanks,
N
[jQuery] Re: Combining ajaxForm and livequery
I figured this out and I have fixed the example, so it will no longer
show the problem.
Basically, the solution is to wrap the call to ajaxForm ( including
the options parameter) in liveQuery
$('#loginform').livequery(function(){
var options = {
target: '#loginsection',
url:'login.php',
success:function() {
alert(success!);
}
};
$('#loginform').ajaxForm(options);
return false;
});
instead of this:
var options = {
target: '#loginsection',
url:'login.php',
/*
success:function() {
alert(success!);
}
*/
};
$('#loginform').ajaxForm(options);
On Dec 7, 4:34 am, rodeored [EMAIL PROTECTED] wrote:
Can I use livequery on ajaxForm?
or is there another way to add event listeners to ajax produced form?
This page redirects to the examplehttp://reenie.org/test/hffc.php
If you click Login and add any name, the form submits and shows you
logged in.
If you don't add a name the form submits and mimics the situation
where the user is not found. It displays an error message and displays
the login form again
The close button works before and after the form is rewritten
because it uses livequery to bind it to the click function.
$(#loginclose) .livequery('click', function(event) {
//closes login box}
However, after the form is submitted, the form's event listeners are
missing.and the form is will not be submitted via ajax again.
I'm using this code to bind the form to the options function.
$('#loginform').ajaxForm(options);
How do I bind the form again without reloading the page?
[jQuery] Re: if ($(#field).val() == '') or something more elegant?
Not sure but should be like this:
if($(#'text').val(''));
Try up this and let me know if it works.
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Costaud
Sent: Sunday, December 07, 2008 3:43 AM
To: jQuery (English)
Subject: [jQuery] if ($(#field).val() == '') or something more elegant?
Hello,
I'm wondering if this is the correct way of checking whether the
textbox is empty or not:
if ($(#text).val() == '')
Thanks.
[jQuery] [validate] Multiplying error messages
This is my first time trying to use the validate script. It looks
great, but something is wrong with my set up. I basically tried
copying the functionality of the simple demo.
script type=text/javascript src=/js/jquery-1.2.6.min.js/script
script type=text/javascript src=/js/jquery.validate.js /script
script type=text/javascript
$(document).ready( function(){
$('#regForm').validate();
});
/script
h2Register/h2
table cellspacing=4
form id=regForm action=/user/register method=post
tr
td class=formLabellabel for=first_nameFirst
Name:*/label/td
tdinput type=text name=first_name id=first_name
class=required/td
/tr
tr
td class=formLabellabel for=last_nameLast
Name:*/label/td
tdinput type=text name=last_name id=last_name
class=required/
td
/tr
tr
td class=formLabellabel for=emailEmail:*/label/td
tdinput type=text name=email id=email class=required
email/
td
/tr
tr
td colspan=2 align=centerinput class=toggleButton
id=formButton
type=submit value=Send Application/td
/tr
/form
/table
It validates when I hit the send button, and displays error messages
like I would expect. However, there are a couple of problems.
1. It only validates when I hit the submit button. If I go back and
try to fix the mistakes, they don't revalidate until I hit submit
again.
2. If I leave something blank or there is some other error, the
original error message doesn't go away. So for my email address, if I
put in an invalid email address after having left it blank on the
first go-round the error messages will stack up Please enter a valid
email addres.This field is required.
It seems pretty straightforward, but obviously I'm doing something
wrong. Can someone offer a bit of guidance?
-Sean
[jQuery] Re: Superfish: Can't make the shadow and animation work
Hi there, In my case i have the animation but no shadow and no arrow image. Instead of the arrow image I get a (raquo). Better than nothing as it works out of the box (love jquery for that) for animation and it's pretty easy to customize with CSS. Tough it would be perfect to have the arrow and shadow. Anybody know what could be wrong? concretiative, have you trying loading jquery with noConflict() ? On Nov 22, 4:36 am, conticreative [EMAIL PROTECTED] wrote: I am using Superfish vertical in aJoomlasite and while it is working quite well as a vertical menu, the animation and the drop shadow just don;t work.I have tried just about anything and I have used the initialization from several examples without anything ever changing. I modified the CSS quite a bit (could that be it?) but I left the JS intact. I did have to remap a few things to adapt it to theJoomla menu system, but the mapping of the images is correct (I map it absolute while in development so I can work with it in the dev toolbar). Beside the shadow, the menu animation just doesn't work and I have used the same code and initialization as in the examples. The URL of the staging site is here:http://www.lmag.us/staging15/ in case anyone is kind enough to take a look. By the time you look at it I may have changed the code again but at this point I doubt I'll be able to make it work, so fire away. Thanks.
[jQuery] Re: Superfish: Can't make the shadow and animation work
Hi there! Have you fixed your problem? I see your website has shadow and animation now. How did you do it? I've succesfully installed superfish on my joomla site, animation work out of the box The rest is pure css to customise. It's just great! The problem is that i don't get shadows and no arrows either. Instead of arrows i get something like (raquo) Better then nothing since I'm starting to love jquery and this is the best superfish solution imo. Anybody else has any idea of how the CMS could be taking away the arrow and shadow? Thanks! On Nov 22, 4:36 am, conticreative [EMAIL PROTECTED] wrote: I am usingSuperfishvertical in aJoomlasite and while it is working quite well as a vertical menu, the animation and the drop shadow just don;t work.I have tried just about anything and I have used the initialization from several examples without anything ever changing. I modified the CSS quite a bit (could that be it?) but I left the JS intact. I did have to remap a few things to adapt it to theJoomla menu system, but the mapping of the images is correct (I map it absolute while in development so I can work with it in the dev toolbar). Beside the shadow, the menu animation just doesn't work and I have used the same code and initialization as in the examples. The URL of the staging site is here:http://www.lmag.us/staging15/ in case anyone is kind enough to take a look. By the time you look at it I may have changed the code again but at this point I doubt I'll be able to make it work, so fire away. Thanks.
[jQuery] [tooltip] - Bug or something
Hello!
I have recently tried to install the tooltip and got it to work just
fine.
Now to the issue:
I have a website that has some small Ajax injections into it. The tool
tip should appear on each element of an Ajax injected list. The Ajax
injection used is $('.list').load(/ajax-list.php);
The problem is that if I apply the tooltip on an onpage HTML element,
it works fine but when I'm trying to have the tooltip on that Ajax
list, it won't appear... actually the title appears as a default
browser title of a HTML element.
In the tooltip I added an image that has a class, a link, some spans
and so on. And again: they work fine when they are manually written on
the page but when the dynamic list is filled with items, it just
breaks.. and no errors to.
Any idea about this issue? What am I doing wrong? How can it be fixed?
Best regards,
Dani
[jQuery] Re: How can I make a td clickable?
Hi,
If .menuitem is a class you use to contain each link, and .menu is the
class that exactly defines a link, you could use:
$('.menuitem').click(function(){ // the whole menu item can be clicked
$('a.menu', this).click(); // simulate a click on the link, which
should make the browser load the link's URL
});
Cheers.
On Dec 7, 5:10 pm, Costaud [EMAIL PROTECTED] wrote:
Hello,
I have something like this:
...
td class=menuitem width=100 align=center nowrapa
href=index.html class=menuHome/a/td
...
How can I make the whole td clickable leading to index.html not just
the text.
I searched Google but I couldn't find anything about this. Your help
would be greatly appreciated.
[jQuery] jQuery Plugin -- DOMisBetter
Hi All, DOM is Better is an useful free library to build client-side web design: http://riagallery.appspot.com/static/DOMisBetter/index.html This is the last web site made with jQuery and DOMisBetter: http://riagallery.appspot.com/KillIEbrowser Bye -- Davide
[jQuery] Traverse XML string
Hi,
I want to read the values from a simple xml string but can't get it to
work. Here's the code:
var xml = foodburgercheese/burger/food;
// example 1
var result = $(xml).find(food).find(burger).text();
// example 2
$(food, xml).each(function(i)
{
result = $(this).find(burger).text();
});
in both examples result is empty.
I tested that jquery is working by setting the body backgroud color.
Regards,
FatSlags2004
[jQuery] Re: if ($(#field).val() == '') or something more elegant?
On Sat, Dec 6, 2008 at 5:26 PM, Yuvraj Mathur [EMAIL PROTECTED] wrote:
Not sure but should be like this:
if($(#'text').val(''));
Actually, this would *set* the value to '' and would always evaluate to
true, because it returns the jQuery object for chaining (if you don't supply
an arg to .val() it will return the value, if you supply an arg it's a
setter and will return the chain). See
http://docs.jquery.com/Attributes/val
- Richard
[jQuery] Re: Traverse XML string
var xml = foodburgercheese/burger/food; var result = $(xml).find(food).find(burger).text(); The root node for your xml is food, so when you try to find a nested food node in that it fails. Try $(xml).find(burger).text();
[jQuery] Re: - Bug or something
Dani,
I believe you'll have to rebind tooltips after you load the ajax
$('.list').load(
{
url: /ajax-list.php),
callback: function(responseText, textStatus, XMLHttpRequest) {
// rebind tooltips
}
});
Andrew
On Dec 7, 7:58 am, [EMAIL PROTECTED] [EMAIL PROTECTED]
wrote:
Hello!
I have recently tried to install the tooltip and got it to work just
fine.
Now to the issue:
I have a website that has some small Ajax injections into it. The tool
tip should appear on each element of an Ajax injected list. The Ajax
injection used is $('.list').load(/ajax-list.php);
The problem is that if I apply the tooltip on an onpage HTML element,
it works fine but when I'm trying to have the tooltip on that Ajax
list, it won't appear... actually the title appears as a default
browser title of a HTML element.
In the tooltip I added an image that has a class, a link, some spans
and so on. And again: they work fine when they are manually written on
the page but when the dynamic list is filled with items, it just
breaks.. and no errors to.
Any idea about this issue? What am I doing wrong? How can it be fixed?
Best regards,
Dani
[jQuery] Re: - Bug or something
Sorry, the previous code was incorrect. The ) after the url needs to
be removed
$('.list').load(
{
url: /ajax-list.php,
callback: function(responseText, textStatus, XMLHttpRequest) {
// rebind tooltips
}
});
On Dec 7, 12:24 pm, aschmid [EMAIL PROTECTED] wrote:
Dani,
I believe you'll have to rebind tooltips after you load the ajax
$('.list').load(
{
url: /ajax-list.php),
callback: function(responseText, textStatus, XMLHttpRequest) {
// rebind tooltips
}
});
Andrew
On Dec 7, 7:58 am, [EMAIL PROTECTED] [EMAIL PROTECTED]
wrote:
Hello!
I have recently tried to install the tooltip and got it to work just
fine.
Now to the issue:
I have a website that has some small Ajax injections into it. The tool
tip should appear on each element of an Ajax injected list. The Ajax
injection used is $('.list').load(/ajax-list.php);
The problem is that if I apply the tooltip on an onpage HTML element,
it works fine but when I'm trying to have the tooltip on that Ajax
list, it won't appear... actually the title appears as a default
browser title of a HTML element.
In the tooltip I added an image that has a class, a link, some spans
and so on. And again: they work fine when they are manually written on
the page but when the dynamic list is filled with items, it just
breaks.. and no errors to.
Any idea about this issue? What am I doing wrong? How can it be fixed?
Best regards,
Dani
[jQuery] Re: SlideShow based on SQL Server
Paolo, I personally use the cycle plugin for slideshows, and it's worked nicely so far. If you don't want to use a server side repeater to build your list of images and would prefer to do it client side, I would use a technique like the one in this article http://encosia.com/2008/06/26/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/ Andrew On Dec 7, 9:32 am, PaoloTCS [EMAIL PROTECTED] wrote: I am brand new to JQuery, but very excited over it. I have looked at s3Slider and similar packeges, but they all seem to get their images statically, either by referencing a folder or by just referring to them (1.jpg, 2.jpg, ). I have a database with image paths (images/woof1.jpg), for example. How do I use JQuery with an asp.net technology, like Linq, or even a Web Service to be able to feed a slideshow, or anything similar? Thanks to all, Paolo
[jQuery] Simulate Link being clicked...
First off, I'm not sure this is even possible, but I thought I'd
ask...
Is it possible to use jQuery (or just plain JavaScript) to simulate a
link click?
Can something like this be done?
// Script
function doSomething()
{
// executes some code
}
$(document).ready(function()
{
$(#MyLink) // Some code that causes Link 1 to execute as if
it was clicked when Link 2 is clicked
}
// Markup
a href=# onclick=doSomething /Link 1/a // Link 1
a href=# id=MyLink /Link 2/a // Link 2
Also, I don't want Link 2 to call the function directly; I want it to
cause Link 1 to be clicked.
I've been trying to figure this out for a long time, and I'm pretty
stumped.
[jQuery] Re: Need help modifying this jQuery...
Rick,
You could try the form plugin as below
form id=myForm action=request_processor.cfm method=post
Email: input type=text name=email_address /
Password: input type=password name=password /
input type=submit value=Login /
/form
script type=text/javascript src=path/to/jquery.js/script
script type=text/javascript src=path/to/form.js/script
script type=text/javascript
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm( {
dataType: 'json',
success: function(data) {
$('#contentdiv').empty().fadeIn(1000).append
(data.login_message);
}
});
});
/script
Andrew
On Dec 7, 7:31 am, Rick Faircloth [EMAIL PROTECTED] wrote:
I'm trying to put my first Ajax to use by creating a login form.
To get there, I'm attempting to modify the first tutorial I've found which
I understand enough to understand what it's doing and how it's working
with a ColdFusion backend.
Anyway, my first question is: How do I modify the code below to
send an email address (form.email_address) and password (form.password)
to the url: request_processor.cfm?
The code below was just for a form with a select which, when the value
changed,
would cause an item in a db to be read and appear. I'm modifying it for
email_address
and password fields, with a submit button.
$(document).ready(function(){
$('#contentdiv').html('nbsp;');
$('#idm').change(function(){
var formval = {idm:$(this).val()};
$.ajax({
type: POST,
url: request_processor.cfm,
dataType: json,
data: formval,
success: function(response){
$('#contentdiv').empty().fadeIn(1000).append(response.main_dish);
}
});
});
});
So, I'd have:
$(document).ready(function(){
$('#contentdiv').html('nbsp;');
$('#login-button').click(function(){
var formval = {email address, password:$(this).val()};
--- (???)
$.ajax({
type:post,
url:request_processor.cfm,
dataType:json,
data:formval
success:function(response){
$('#contentdiv').empty().fadeIn(1000).append(response.login_message);
}
});
});
});
What changes need to be made?
Thanks for any help!
Rick
[jQuery] Re: MIT or GPL License
Thanks Karl! On Nov 25, 6:53 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Yes, you can use one or the other. --Karl Karl Swedbergwww.englishrules.comwww.learningjquery.com On Nov 25, 2008, at 9:13 AM, Jason Coudriet wrote: Hello, When using jQuery, do have we have the option to use just the MIT license? Thanks, Jason
[jQuery] Horizontal menu with slide down and hover bug with firefox
Hello,
I've been looking for a way to make my horizontal menu work with firefox
using jquery slideDown and Up animations instead of fadeout .
The problem is that with firefox if you move the mouse out of the sub
menu area and then in again before the animation had finished the sub
menu starts sliding up and down untill you move the mouse away again.
Here is how I've done my menu :
HTML :
div id=menu
dl
dtItem 1/dt
dd
ul
liItem 1.1/li
liItem 1.2/li
liItem 1.3/li
liItem 1.4/li
/ul
/dd
/dl
dl
dtItem 2/dt
dd
ul
liItem 2.1/li
liItem 2.2/li
liItem 2.3/li
liItem 2.4/li
/ul
/dd
/dl
/div
CSS :
#menu dd {
display: none;
}
Javascript :
function mnutoggle(){
$('#menu dl').each(function(){
var menu = $(this);
menu.hover(function(){$(' dd',this).slideDown('fast') } ,
function(){$(' dd',this).slideUp('fast') });
});
}
$(document).ready(function(){
mnutoggle();
});
To try and stop this problem I decided to try and delay the slidedown
unless slideup has finished and stop the slideup unless the slide down
has finished.
In order to do this I introduced a variable which says if the animation
has finished or not, this works in the sense that if you hover quickly
over an element it continues to finish the animation but for some reason
still has the same bug with firefox, here's the code (I used the
following code to do the delay of 300 ms :
animate({opacity: 1.0}, 300)
Here is the full code :
function mnutoggle(){
$('#menu dl').each(function(){
var state = 'up';
var menu = $(this);
menu.hover(function(){
if(state == 'up') {
$(' dd',this).slideDown(300, function(){ state =
'down' })
} else {
$(' dd',this).animate({opacity: 1.0},
300).slideDown(300, function(){state = 'down';});
}
} , function(){
if(state == 'down') {
$(' dd',this).slideUp(300, function(){state = 'up';})
} else {
$(' dd',this).animate({opacity: 1.0},
300).slideUp(300, function(){state = 'up';});
}
});
});
}
$(document).ready(function(){
mnutoggle();
});
This code makes the menu go right up and right down each time but
firefox seems to store the next thing to do and when you bring the mouse
over the sub menu before the animation has finished it goes up and then
down and then up continues untill you move the mouse away.
Is there a way to get around this problem ? FadeIn and out does not have
this problem but I prefer the slidedown and up animation ...
Thanks in advance for any suggestions ...
[jQuery] Re: Simulate Link being clicked...
Just bind doSomething() to the click event for the second link.
This looks like a usability nightmare, but whatever ...
On Sun, Dec 7, 2008 at 12:42 PM, SLR [EMAIL PROTECTED] wrote:
First off, I'm not sure this is even possible, but I thought I'd
ask...
Is it possible to use jQuery (or just plain JavaScript) to simulate a
link click?
Can something like this be done?
// Script
function doSomething()
{
// executes some code
}
$(document).ready(function()
{
$(#MyLink) // Some code that causes Link 1 to execute as if
it was clicked when Link 2 is clicked
}
// Markup
a href=# onclick=doSomething /Link 1/a // Link 1
a href=# id=MyLink /Link 2/a // Link 2
Also, I don't want Link 2 to call the function directly; I want it to
cause Link 1 to be clicked.
I've been trying to figure this out for a long time, and I'm pretty
stumped.
[jQuery] Re: Traverse XML string
I tried that but still get an empty result. I seached google and saw
examples like yours all over the place so maybe it's something else.
here's the full source:
html
head
title/title
script type=text/javascript language=javascript
src=jquery-1.2.6.min.js/script
script type=text/javascript language=javascript
$(document).ready(function()
{
$(body).css(background-color, yellow);
var xml = foodburgercheese/burger/food;
var result = $(xml).find(burger).text();
alert(result);
});
/script
/head
/html
On Dec 7, 5:44 pm, Dave Methvin [EMAIL PROTECTED] wrote:
var xml = foodburgercheese/burger/food;
var result = $(xml).find(food).find(burger).text();
The root node for your xml is food, so when you try to find a nested
food node in that it fails. Try $(xml).find(burger).text();
[jQuery] Dynamic Stylesheets
How do you dynamically add or remove stylesheets to a page? I've seen a lot of examples on how to add css styles or classes to an elment, but I haven't found anything on adding/removing entire stylesheets...
[jQuery] Re: jQuery Plugin -- DOMisBetter
I despise having to deal with IE as much as the next (reasonable) person but posting a link to a page that forces some users to kill their browser process is pretty juvenile. Sure, it's right there in the URL, but still ... The plugin seems alright, though I can't think of a compelling reason to build entire websites like that. On Sun, Dec 7, 2008 at 9:34 AM, KillIEbrowser [EMAIL PROTECTED] wrote: Hi All, DOM is Better is an useful free library to build client-side web design: http://riagallery.appspot.com/static/DOMisBetter/index.html This is the last web site made with jQuery and DOMisBetter: http://riagallery.appspot.com/KillIEbrowser Bye -- Davide
[jQuery] Re: Simulate Link being clicked...
Just bind doSomething() to the click event for the second link.
Can you expand on this? I apologize, I'm somewhat new to jQuery.
This looks like a usability nightmare, but whatever ...
Looking at my example, I can see why you say this. Let me try to
explain what I'm trying to do.
I have a list of thumbnails images that open in ShadowBox. Something
like this:
// CSS
#thumbnails
{
list-style-type: none;
}
#thumbnails li
{
float: left;
margin-right: 5 px;
height: 200px;
background: #33;
border: 1px solid #00;
}
#thumbnails li img
{
display: block;
}
ul id=thumbnails
lia href=image1 rel=shadowbox[gallery] /img
src=thumb1.jpg title=thumb1 alt=thumb1 /Thumbnail 1/a/li
lia href=image1 rel=shadowbox[gallery] /img
src=thumb1.jpg title=thumb1 alt=thumb1 /Thumbnail 2/a/li
lia href=image1 rel=shadowbox[gallery] /img
src=thumb1.jpg title=thumb1 alt=thumb1 /Thumbnail 3/a/li
/ul
Now the parent li tags for each thumbnail have a set height (say
200px) but not all the thumbnail images are that large. With that
being said, what ends up happening is that I have extra space left
over in the li element. What I want to do is make the li element
itself clickable and acts as if the nested link was clicked. This way,
clicking on the extra space acts the same as clicking the link
itself.
[jQuery] Setting source of a frame with jQuery
Hi,
I have two html pages that are consisting of frames. They are using
shared jQuery code, and I used the anchor click events to load pages
into frames (as target attibutes fails to work when jQuery is
present).
I used the click event of two anchor classes two create the same
funcionality and while the event of the first class works correctly,
the second just fails during execution.
Here are the jQuery codes (custom.js) - other jQuery is of jTree code:
$(document).ready(function()
{
$(a.contentLink).click(
function()
{
top.$(#content_frame).attr(src,$(this).attr(href)); //works
correctly in the first document
alert(success); //I get the message
return false;
});
$(a.collectionLink).click(
function()
{
top.$(#content_frame).attr(src,$(this).attr(href)); //
fails in the second document
//top.$(#doc_toc_frame).attr(src,$(this).attr(name));
alert(success); //never executed
return false;
});
});//doc ready
The pages are these:
(first one works)
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN
http://www.w3.org/TR/html4/frameset.dtd;
HTML
HEAD
TITLEDoc/TITLE
meta http-equiv='Content-type' content='text/html' charset='utf-8' /
link rel='stylesheet' type='text/css' href='../../Style/CSS/
styles.css' /
link rel='stylesheet' type='text/css' href='../../Style/CSS/
jquery_style.css' /
link rel='stylesheet' type='text/css' href='../../Style/CSS/
tree_component.css' /
script type='text/javascript' src='../../Style/Script/_all.js'/
script
script type='text/javascript' src='../../Style/Script/
tree_component.js'/script
script type='text/javascript' src='../../Style/Script/bubble.js'/
script
script type='text/javascript' src='../../Style/Script/custom.js'/
script
/HEAD
FRAMESET cols=20%, 80% id=main_frame name=main_frame
FRAMESET cols=100% id=toc_frame name=toc_frame
FRAME src=toc.html/
/FRAMESET
FRAME src=content.html name=content_frame id=content_frame/
NOFRAMES
PFrame error/P
/NOFRAMES
/FRAMESET
/HTML
Second page (doesn't work):
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN
http://www.w3.org/TR/html4/frameset.dtd;
HTML
HEAD
TITLEDoc coll./TITLE
meta http-equiv='Content-type' content='text/html' charset='utf-8' /
link rel='stylesheet' type='text/css' href='../../Style/CSS/
styles.css' /
link rel='stylesheet' type='text/css' href='../../Style/CSS/
jquery_style.css' /
link rel='stylesheet' type='text/css' href='../../Style/CSS/
tree_component.css' /
script type='text/javascript' src='../../Style/Script/_all.js'/
script
script type='text/javascript' src='../../Style/Script/
tree_component.js'/script
script type='text/javascript' src='../../Style/Script/bubble.js'/
script
script type='text/javascript' src='../../Style/Script/custom.js'/
script
/HEAD
FRAMESET cols=20%, 80% id=main_frame name=main_frame
FRAMESET rows=50%,50% id=toc_frame name=toc_frame
FRAME src=coll_toc.html/
FRAME src= name=doc_toc_frame id=doc_toc_frame/
/FRAMESET
FRAME src= name=content_frame id=content_frame/
NOFRAMES
PFrame error/P
/NOFRAMES
/FRAMESET
/HTML
I am not smart enough to see where the tiny difference is, please,
give me hints. I hope someone sees the mistake at firs glance.
I think that is why I never use Jscript, the page is loaded, no error
message, simply doesn't work...
[jQuery] Re: Simulate Link being clicked...
No need for scripting:
#thumbnails li a { display: block; height: 200px; }
On Sun, Dec 7, 2008 at 1:35 PM, SLR [EMAIL PROTECTED] wrote:
Just bind doSomething() to the click event for the second link.
Can you expand on this? I apologize, I'm somewhat new to jQuery.
This looks like a usability nightmare, but whatever ...
Looking at my example, I can see why you say this. Let me try to
explain what I'm trying to do.
I have a list of thumbnails images that open in ShadowBox. Something
like this:
// CSS
#thumbnails
{
list-style-type: none;
}
#thumbnails li
{
float: left;
margin-right: 5 px;
height: 200px;
background: #33;
border: 1px solid #00;
}
#thumbnails li img
{
display: block;
}
ul id=thumbnails
lia href=image1 rel=shadowbox[gallery] /img
src=thumb1.jpg title=thumb1 alt=thumb1 /Thumbnail 1/a/li
lia href=image1 rel=shadowbox[gallery] /img
src=thumb1.jpg title=thumb1 alt=thumb1 /Thumbnail 2/a/li
lia href=image1 rel=shadowbox[gallery] /img
src=thumb1.jpg title=thumb1 alt=thumb1 /Thumbnail 3/a/li
/ul
Now the parent li tags for each thumbnail have a set height (say
200px) but not all the thumbnail images are that large. With that
being said, what ends up happening is that I have extra space left
over in the li element. What I want to do is make the li element
itself clickable and acts as if the nested link was clicked. This way,
clicking on the extra space acts the same as clicking the link
itself.
[jQuery] Re: Traverse XML string
Your example works for me. Use firebug and make sure you are not getting errors from some other problem.
[jQuery] Re: Click event broken by AJAX - explain please?
Hmmm, yes it does.
I just did 'un-do' a zillion times, back to where I was at the
outset. Seems I had begun with
$('textarea').load()
Intending to load the textarea with data but it didn't work (FCKeditor
assigned to the textarea). I changed that to
$('textarea').get(url, {file: data}, function())
This is where I started screwing up. When I went with the setTimeout,
I then wrote the $.get() correctly so it worked. Backtracking and
doing the $.get() right and it works correctly without the setTimeout
().
Long story short - operator error.
thanks,
Don
On Dec 6, 8:16 pm, ricardobeat [EMAIL PROTECTED] wrote:
Doesn't this work?
$(a).click(function() {
var self = this;
$.get($(self).attr('href'),function(html){
// put the html into a textbox
});
return false;
};
On Dec 6, 5:00 pm, donb [EMAIL PROTECTED] wrote:
Having read the handful of mentions I could find, the underlying 'why'
is still a mystery to me. I tried stepping through the code with
Firebug but can't make out why it's not working, although I have MADE
it work in this manner:
$(a).click(
function() {
var self = this;
setTimeout(
function() {
$.get(
$(self).attr('href'),
function(html){
...put the html into a textbox...
}
)},
500
);
return false;
}
So what is the actual reason when the .get() executes, the return
false never happens, unless I do the setTimeout trick to effectively
move the get OUT of the click function?
If I just have in-line code, no AJAX action, the code proceeds merrily
along to the return and suppresses my event-bubbling nicely.
When I step through the code WITH an AJAX action in there (no
setTimeout), then execution never returns to the 'return'.
I concede that's just the way it is, but I would like to understand
why it's that way. Bug, design tradeoff, was overlooked by developer,
can't be done for some reason because of javascript architecture,
other?
[jQuery] Re: Simulate Link being clicked...
Try this:
$(#MyLink).click(function(){ $(#Link1).click(); return false; });
You'll need to add the id to the first link.
Is there a reason why you used an onclick attribute in html rather
than attaching the handler using jQuery?
[jQuery] Re: Dynamic Stylesheets
Have a look here: http://www.alistapart.com/articles/alternate/ On Sun, Dec 7, 2008 at 1:17 PM, SLR [EMAIL PROTECTED] wrote: How do you dynamically add or remove stylesheets to a page? I've seen a lot of examples on how to add css styles or classes to an elment, but I haven't found anything on adding/removing entire stylesheets...
[jQuery] Re: Dynamic Stylesheets
Check here: http://letmegooglethatforyou.com/?q=add+stylesheet+jquery
[jQuery] Re: Setting source of a frame with jQuery
top.$(#content_frame).attr(src,$(this).attr(href)); // fails in the second document //top.$(#doc_toc_frame).attr(src,$(this).attr(name)); alert(success); //never executed Is the toc frame in the same domain as this document and the content frame? Maybe you're running afoul of a cross-domain problem. Are there messages from Firebug?
[jQuery] Re: addClass with attrs
addClass is exactly what it says, it adds a class. Predefine the class
in your CSS pages with the attributes you require and use the addClass
function to add it to your target..addClass('newclass'); You can
also use removeClass to remove the class .removeClass('newclass');
If you want to define the CSS in the Jscript, then use the .css
function using an array of styles .css({'background-color':'red',
'color':'white'}); I find that it is easier to keep track of the CSS
if you keep it in the CSS pages, just make a comment in the file so
you know what the class is for.
On Dec 6, 5:50 pm, Dirceu Barquette [EMAIL PROTECTED]
wrote:
Hi!
How can I add a class with its attrs dynamically?
like this (not works, obvious ...)--- $('#div').addClass('blah
{background:#000}')
Thanks,
Dirceu Barquette
[jQuery] Re: Simulate Link being clicked...
No need for scripting:
#thumbnails li a { display: block; height: 200px; }
I think you are missing what I'm trying to do...
$(#MyLink).click(function(){ $(#Link1).click(); return false; });
You'll need to add the id to the first link.
Yeah, thats essentially what I want to do. Now how can I do that to
all the li elements without having to manually type that it for each
one?
Is there a reason why you used an onclick attribute in html rather
than attaching the handler using jQuery?
No reason at all, once again I just type that in here for simplicity's
sake...
[jQuery] Re: Setting source of a frame with jQuery
What do you mean by same domain? They are on the same drive, the collection index file is on directory upper to the content and the content's toc file. I tried FB, but I didn't get any message from it (I am not sure I used it properly). On dec. 7, 20:17, Dave Methvin [EMAIL PROTECTED] wrote: top.$(#content_frame).attr(src,$(this).attr(href)); // fails in the second document //top.$(#doc_toc_frame).attr(src,$(this).attr(name)); alert(success); //never executed Is the toc frame in the same domain as this document and the content frame? Maybe you're running afoul of a cross-domain problem. Are there messages from Firebug?
[jQuery] Cycle.js issues
Hello
I am trying to get cycle.js to work, and I have no idea why it isn't.
Here is my code:
script src=scripts/jquery.js type=text/javascript/script
script src=scripts/cycle.js type=text/javascript/script
script type='text/javascript'
$(document).ready(function(){
$('#s1').cycle('fade');
});
/script
And you can view the test site live here:
http://hbeckett.com/presentation/
A solution would be greatly appreciated. Thanks
[jQuery] ClueTip Custom Close Button
I am using a div content present in the same document to show up in cluetip. I want to use a custom button inside that div content to close the tip when clicked. I don't know how this can be achieved. Please guide me through this. This may be very trivial, I am not sure how to get this done. By the way, Cluetip rocks. Many thanks.
[jQuery] Cycle.js not behaving... Can't get it to work no matter what
Hello
I am trying to get cycle.js to work, and I have no idea why it isn't.
Here is my code:
script src=scripts/jquery.js type=text/javascript/script
script src=scripts/cycle.js type=text/javascript/script
script type='text/javascript'
$(document).ready(function(){
$('#s1').cycle('fade');
});
/script
And you can view the test site live here:
http://hbeckett.com/presentation/
A solution would be greatly appreciated. Thanks
[jQuery] Re: Traverse XML string
Hi Dave, I thought jquery is browser-independent but it seems the code works for firefox but not for IE, any idea why? On Dec 7, 8:00 pm, Dave Methvin [EMAIL PROTECTED] wrote: Your example works for me. Use firebug and make sure you are not getting errors from some other problem.
[jQuery] Re: Separate Functions for Events
Thanks Michael, the example you gave works great. I'm having some
problems with a droppable though, here is the sample code:
$(#dropper).droppable({
accept: #dragger,
drop: function(ev, ui) {$(this).append(brDropped!);}
});
The function that is called on the drop is likely to get very complex,
so I'd like it in a separate function.
However, my solution below doesn't work:
$(#dropper).droppable({
accept: #dragger,
drop: dropped()
});
function dropped() { $(this).append(dropped!) }
The dropped function is getting called as if I change it to:
function dropped() { alert(dropped!) }
The alert message does show. So I think that there must be a problem
with it accessing $(this).
Any ideas how I can get this to work?
documentation for droppables can be found here:
http://docs.jquery.com/UI/Droppable
Thanks,
DAZ
On Dec 6, 11:08 pm, Michael Geary [EMAIL PROTECTED] wrote:
Sure, you can do this, but it's less complicated than that.
Don't make your function a method of the jQuery object. Simply make it an
ordinary named function with *exactly* the same code as the anonymous
function.
So your code:
$(#test).click(function(){ $(this).css(color,pink) });
becomes:
$(#test).click(update_div);
function update_div(){ $(this).css(color,pink) }
The only caveat would be that if you move this named function to a different
location, it may lose access to variables declared in the outer function.
Suppose your code looked like this:
function test() {
var color = 'pink';
$(#test).click(function(){ $(this).css(color,color) });
}
This would work the same:
function test() {
var color = 'pink';
$(#test).click(setColor);
function setColor(){ $(this).css(color,color) }
}
But this would not work:
function test() {
var color = 'pink';
$(#test).click(setColor);
}
function setColor(){ $(this).css(color,color) }
because setColor has lost its access to the variable.
-Mike
-Original Message-
From: jquery-en@googlegroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of DAZ
Sent: Saturday, December 06, 2008 10:55 AM
To: jQuery (English)
Subject: [jQuery] Separate Functions for Events
Hi, I've just started using jQuery and have run into the
following problem that I'm sure has an easy answer.
I want a function to run after an event, for example, if I
click on a test div:
$(#test).click(function(){ $(this).css(color,pink) });
Instead of this, I want to have the effects of the click in a
separate function, like this:
$(#test).click(update_div)
jQuery.fn.update_div = function() {
this.css(color,pink);
};
I know the example is longer, but if I wanted to do more
complex stuff, I feel it would be better put in a separate function.
Is this possible?
thanks,
DAZ
[jQuery] Re: Simulate Link being clicked...
On Sun, Dec 7, 2008 at 2:40 PM, SLR [EMAIL PROTECTED] wrote:
No need for scripting:
#thumbnails li a { display: block; height: 200px; }
I think you are missing what I'm trying to do...
No offense meant, but I think you've misunderstood the CSS I posted.
As I understand it, you want the entire LI to be clickable. The CSS
rule I posted will do just that by causing the A to fill the LI. If
the width is also an issue, then set that, as well.
There's no need for the JQuery hammer here.
[jQuery] Re: Simulate Link being clicked...
Yeah, thats essentially what I want to do. Now how can I do that to
all the li elements without having to manually type that it for each
one?
Well, now that you posted the real html... :-)
$(#thumbnails li).click(function(){
$(this).find(a).click();
return false;
});
If the a element is clickable you may want to attach a handler that
prevents the bubbling to the parent li element. Otherwise it will
bubble up and do a second click.
[jQuery] Re: Setting source of a frame with jQuery
What do you mean by same domain? Google for iframe crossdomain. Basically you can't have a page on one domain (e.g., yourdomain.com) manipulate objects or run script from a frame in another domain They are on the same drive, the collection index file is on directory upper to the content and the content's toc file. Do you mean that you are loading the pages directly from disk rather than from a web server? Can you post a simple test page?
[jQuery] Re: Traverse XML string
Yeah, I see what you mean about IE now. The problem seems to be that IE can't tell whether the string is HTML or XML, and jQuery doesn't have a way to tell either. Mike Geary posted a parser that works for both that you can use to parse the string and pass that tree into jQuery. http://groups.google.com/group/jquery-en/browse_frm/thread/95718c9aab2c7483/af37adcb54b816c3?lnk=gstq=parsexml#af37adcb54b816c3
[jQuery] Re: Simulate Link being clicked...
No offense meant, but I think you've misunderstood the CSS I posted.
As I understand it, you want the entire LI to be clickable. The CSS
rule I posted will do just that by causing the A to fill the LI. If
the width is also an issue, then set that, as well.
There's no need for the JQuery hammer here.
On second glance, I see what you are trying to do, and it makes
perfect sense. Having the a tag fill the height of the li tag
would be the easiest and most effecient way. Thanks for the info...
again = )
Well, now that you posted the real html... :-)
$(#thumbnails li).click(function(){
$(this).find(a).click();
return false;
});
If the a element is clickable you may want to attach a handler that
prevents the bubbling to the parent li element. Otherwise it will
bubble up and do a second click.
I didn't think about the bubbling issue. Nevertheless, thank you for
your input.
[jQuery] Re: Setting source of a frame with jQuery
These pages are only for presenting data, and used as local files. I share the project's output html here: http://datastore.uw.hu/docs.zip You can see that index.html doesn't work, while doc_index.html works just fine. On dec. 7, 21:41, Dave Methvin [EMAIL PROTECTED] wrote: What do you mean by same domain? Google for iframe crossdomain. Basically you can't have a page on one domain (e.g., yourdomain.com) manipulate objects or run script from a frame in another domain They are on the same drive, the collection index file is on directory upper to the content and the content's toc file. Do you mean that you are loading the pages directly from disk rather than from a web server? Can you post a simple test page?
[jQuery] [tooltip] Strange behavior of tooltip plugin in IE7
-- Forwarded message -- From: Miquel [EMAIL PROTECTED] Date: 2008/12/1 Subject: Strange behavior of [tooltip] plugin in IE7 To: jQuery (English) jquery-en@googlegroups.com Hi all, May be some can help on this problem. When the tooltip plugin [http:// plugins.jquery.com/project/tooltip] is applied to an absolutely positioned box nested into a larger absolutely positioned box, all boxes flicker when the mouse is hovering and if the tooltip eventually displays is only because the boxes disappear. Playing with the overflow property makes to have different behavior such as just the background box to disappear and the inner box remain visible, but still providing a quite strange effect. I prepared a simple test page to show this problem, it will run ok in Firefox (at least version 3.04 in Linux) but will fail in Internet Explorer 7 in windows XP. You can find the test page at http://hitconsultants.com/Tooltips_failure/boxing_model.html Kind regards Miquel PS: I am resending this because I placed the wrong subject, apologies for duplication.
[jQuery] New to jquery. How to get the following component??
Hello, I am interested in the following component (as seen on the following page): http://ui.jquery.com/demos It must be some sort of flow component. Can anyone tell me where to get it from? Where it is documented? Best regards, Julien.
[jQuery] Re: Separate Functions for Events
On Sun, Dec 7, 2008 at 3:22 PM, DAZ [EMAIL PROTECTED] wrote:
The function that is called on the drop is likely to get very complex,
so I'd like it in a separate function.
However, my solution below doesn't work:
$(#dropper).droppable({
accept: #dragger,
drop: dropped()
});
change
drop: dropped()
to
drop: dropped
With the parens its executed as it's parsed and the return value is passed
as the value of drop, where you want to pass the name of the function so it
can be called by the plugin at the appropriate time, as many times as
needed.
- Richard
[jQuery] Re: New to jquery. How to get the following component??
See http://groups.google.com/group/jquery-ui/browse_thread/thread/b57bf99f2abf6079 Paul Bakaus writes: I programmed it from scratch just for the UI website, but since developing plugins for UI is so simple, it's a UI plugin ;) However, since there's quite some interest in it, expect it to be released quite soon. For now, please grab it directly from the page. - Richard On Sun, Dec 7, 2008 at 3:55 PM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hello, I am interested in the following component (as seen on the following page): http://ui.jquery.com/demos It must be some sort of flow component. Can anyone tell me where to get it from? Where it is documented? Best regards, Julien.
[jQuery] Re: Hot to remove or replace onclick function
let me explain more clear
if I want to cancel function in JavaScript, I can do something like
this, but how to do the same thing in jQuery?
input type=button name=btn id=btn value=btn /
input type=button name=setBtn id=setBtn value=setBtn /
input type=button name=cancel id=cancel value=cancel /
script language=javascript
!--
var btn = document.getElementById('btn');
var set = document.getElementById('setBtn');
var cancel = document.getElementById('cancel');
function test()
{
console.log('test');
}
window.onload = function()
{
set.onclick = function()
{
btn.onclick = function()
{
test();
}
}
cancel.onclick = function()
{
btn.onclick = null;
}
}
//--
/script
On Dec 7, 9:50 am, David .Wu [EMAIL PROTECTED] wrote:
HTML
-
div id=navBoxdiv/div/div
ul
liimg src=images/nav/nav_left.jpg //li
liimg src=images/nav/btn_nav1.jpg alt=�P於新�]和�I //li
liimg src=images/nav/btn_nav2.jpg alt=�a品展示 //li
liimg src=images/nav/btn_nav3.jpg alt=技能培��中心 //li
liimg src=images/nav/btn_nav4.jpg alt=服�� //li
liimg src=images/nav/btn_nav5.jpg alt=要�� //li
lia href=member/member_login.phpimg src=images/nav/
btn_nav6.jpg alt=���T���^ //a/li
liimg src=images/nav/btn_nav7.jpg alt=人才招聘 //li
liimg src=images/nav/nav_right.jpg //li
div class=clear/div
/ul
/div
script language=javascript
!--
$(document).ready(function()
{
/*navigation initial*/
navInitial();
});
//--
/script
CSS
-
#nav
{
position:relative;
cursor:pointer;}
#nav img
{
border:0px;}
#nav ul
{
margin:0px;
padding:0px;
list-style:none;}
#nav li
{
float:left;}
.clear
{
clear:both;}
#navBox
{
position:absolute;
width:120px;
height:44px;
border:1px solid #00;
overflow:hidden}
#navBox div
{
background-color:#F8965A;
width:120px;
height:44px;
}
Javascript
-
function navInitial()
{
var $nb = $('#navBox');
$('#navBox div').css('opacity',0.3);
$arr = {'b1':60,'b2':179,'b3':300,'b4':420,'b5':540,'b6':660,'b7':
780};
$('#nav li:gt(0):lt(7)').mouseover(function()
{
var index = $('#nav li').index(this);
var move = $arr['b'+index] + 'px';
$nb.stop().animate({left:move});
if(index == 6)
{
$nb.click(function()
{
window.location = 'member/member_login.php';
});
}
else
{
$nb.click(function()
{
window.location = '';
});
}
});
}
Hi, I use li and image for navigation button, and the script means,
when I mouse over any button, there will be a transparent div slide
above the button, but the div will cover the button, therefore, I
can't click the button to go to the page, so I write another code to
give the div a hyper link, here comes the question, some button do not
have hyper link, because it got sub menu, I will do another effect
when mouse over those button, that's mean I need to cancel if the div
move to the button which have hyper link, how to do that?
[jQuery] Re: Need help modifying this jQuery...
Hi, Andrew, and thanks for the code.
I've been *partially* successful and I don't quite understand why things are
happening the way they are...it could be some of the ColdFusion code
involved.
When I run the login.cfm page with the myForm form, I end up with my
message being displayed for a successful login, but it's in this format,
{login:Login Successful} which I think is the Json translation of
the data...
Also, the message is displayed on the login_processor.cfm page, instead
of the page with the form, login.cfm, which is where the message
should end
up in plain text.
Here are the files involved:
- login.cfm
- login_processor.cfm
- manager_data.cfc
- cfjson.cfc (running the code your way probably makes this
unecessary, at the very least,
since, I assume, form.js is handling the Json
translation...?)
Here's what each of these files looks like:
login.cfm
___
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
cfsetting showdebugoutput=no
head
script type=text/javascript src=jquery.js/script
script type=text/javascript src=jquery.form.js/script
script type=text/javascript
$(document).ready(function() {
//bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm( {
dataType: 'json',
success: function(data) {
$('#contentdiv').empty().fadeIn(1000).append(data.login_message);
}
});
});
/script
style type=text/css
body { font-family: Arial, Helvetica, sans-serif; }
#databox { border: 1px solid Gray;
margin:30px auto 0px auto;
padding: 10px;
width: 200px;}
#contentdiv { color:red; font-size: 30px; margin-top: 10px;}
/style
/head
body
form id=myForm action=login_processor.cfm method=post
Email: input type=text name=email_address /
Password: input type=password name=password /
input type=submit value=Login /
/form
p id=contentdiv /p
/body
/html
login_processor.cfm
_
cfsetting showdebugoutput=no
cfset mdata = createObject(component,manager_data)
cfset thedata = mdata.getmanagerData(form.email_address,
form.password)
cfset ojson = createObject(component,cfjson)
cfset results = ojson.encode(thedata)
cfoutput#results#/cfoutput
manager_data.cfc
___
cfcomponent displayname=manager_data hint=Contains manager database
query output=false
cffunction name = getmanagerData
cfargument name = email_address type=string required=yes
cfargument name = passwordtype=string required=yes
cfquery name=get_manager datasource=login
selectemail_address, password
fromsite_managers
whereemail_address = '#arguments.email_address#'
andpassword = '#arguments.password#'
/cfquery
cfset managerStruct = structNew()
cfif get_manager.recordcount gt 0
cfset managerStruct.login = Login Successful
cfelse
cfset managerStruct.login = Login Unsuccessful
/cfif
cfreturn managerStruct
/cffunction
/cfcomponent
And then there's cfjson.cfc, the content of which I won't post unless
you really
need to see it because there's a lot of code...
Is there some adjustment that's needed in my processing code/files since
I'm using the different jQuery code that you provided?
Any more help is appreciated!
Rick
aschmid wrote:
Rick,
You could try the form plugin as below
form id=myForm action=request_processor.cfm method=post
Email: input type=text name=email_address /
Password: input type=password name=password /
input type=submit value=Login /
/form
script type=text/javascript src=path/to/jquery.js/script
script type=text/javascript src=path/to/form.js/script
script type=text/javascript
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm( {
dataType: 'json',
success: function(data) {
$('#contentdiv').empty().fadeIn(1000).append
(data.login_message);
}
});
});
/script
Andrew
On Dec 7, 7:31 am, Rick Faircloth [EMAIL PROTECTED] wrote:
I'm trying to put my first Ajax to use by creating a login form.
To get there, I'm attempting to modify the first tutorial I've found which
I understand enough to understand
[jQuery] Re: Separate Functions for Events
From: DAZ
Thanks Michael, the example you gave works great. I'm having
some problems with a droppable though, here is the sample code:
$(#dropper).droppable({
accept: #dragger,
drop: function(ev, ui) {$(this).append(brDropped!);} });
The function that is called on the drop is likely to get very
complex, so I'd like it in a separate function.
However, my solution below doesn't work:
$(#dropper).droppable({
accept: #dragger,
drop: dropped()
});
function dropped() { $(this).append(dropped!) }
That isn't the same as your original code. Here's the problem:
drop: dropped()
That *calls* the dropped function immediately - not when the drag and drop
occurs, but when you call the .droppable() method initially.
Instad, you want to pass a *reference* to the dropped function, by omitting
the ():
drop: dropped
By just giving the function name with no parens, you obtain a reference to
the function instead of calling it immediately.
The dropped function is getting called as if I change it to:
function dropped() { alert(dropped!) }
The alert message does show.
Ah, but when does the alert show? If the code you listed is your actual
code, the alert shows up too soon, doesn't it?
So I think that there must be a
problem with it accessing $(this).
That is something you have to watch out for, but it's not the problem in
this particular case (pun unintended but unavoidable).
When you change an anonymous function to a named function that you call
through a reference to the function, 'this' works the same as before. So if
your anonymous function worked, then changing it to a reference to a named
function will work as intended - as long as you don't call the function
prematurely by appending () to the function name.
-Mike
[jQuery] Re: addClass with attrs
Thank you!!! I know this. But my question was how to create newclass
assigning its attrs at the same time.
2008/12/7 QuadCom [EMAIL PROTECTED]
addClass is exactly what it says, it adds a class. Predefine the class
in your CSS pages with the attributes you require and use the addClass
function to add it to your target..addClass('newclass'); You can
also use removeClass to remove the class .removeClass('newclass');
If you want to define the CSS in the Jscript, then use the .css
function using an array of styles .css({'background-color':'red',
'color':'white'}); I find that it is easier to keep track of the CSS
if you keep it in the CSS pages, just make a comment in the file so
you know what the class is for.
On Dec 6, 5:50 pm, Dirceu Barquette [EMAIL PROTECTED]
wrote:
Hi!
How can I add a class with its attrs dynamically?
like this (not works, obvious ...)--- $('#div').addClass('blah
{background:#000}')
Thanks,
Dirceu Barquette
[jQuery] Re: Cycle.js not behaving... Can't get it to work no matter what
remove the 'fade' from the function call. That's the default action,
but would be correctly specified as {fx: 'fade'} if you explicitly
define it.
On Dec 7, 2:42 pm, Heath [EMAIL PROTECTED] wrote:
Hello
I am trying to get cycle.js to work, and I have no idea why it isn't.
Here is my code:
script src=scripts/jquery.js type=text/javascript/script
script src=scripts/cycle.js type=text/javascript/script
script type='text/javascript'
$(document).ready(function(){
$('#s1').cycle('fade');});
/script
And you can view the test site live here:http://hbeckett.com/presentation/
A solution would be greatly appreciated. Thanks
[jQuery] Re: jQuery Plugin -- DOMisBetter
Useful in what way? I'm not going to the site, given the other person's experience. An explanation of the plugin here would be very useful. On Dec 7, 9:34 am, KillIEbrowser [EMAIL PROTECTED] wrote: Hi All, DOM is Better is an useful free library to build client-side web design:http://riagallery.appspot.com/static/DOMisBetter/index.html This is the last web site made with jQuery and DOMisBetter:http://riagallery.appspot.com/KillIEbrowser Bye -- Davide
[jQuery] Jquery Tablesorter not working
Hi All,
I have been trying to use the table sorter but not sure why this error
pops up :
jQuery(#myTable).tablesorter is not a function
script type=text/javascript
src=/scripts/jquery-1.2.6.pack.js/
script type=text/javascript
src=/scripts/jquery.tablesorter.js/
script language=javascript
!--
var $j = jQuery.noConflict();
jQuery(document).ready(function()
{
//alert('Hi');
jQuery(#myTable).tablesorter();
}
);
--
[jQuery] jquery.min.js is 54kb, not 15kb?
The front page of jquery.com says the production version is 15kb, but when I go to the download link, it shows up as 54kb. Is there something special that I need to do to convert that 54kb file into 15kb file?
[jQuery] Re: jquery.min.js is 54kb, not 15kb?
You need to enable gzip-ing to your web application (which is something that greatly varies on how to do based on what you use on the server side) On Dec 7, 6:54 pm, Matt Wilson [EMAIL PROTECTED] wrote: The front page of jquery.com says the production version is 15kb, but when I go to the download link, it shows up as 54kb. Is there something special that I need to do to convert that 54kb file into 15kb file?
[jQuery] Re: jquery.min.js is 54kb, not 15kb?
- Richard On Sun, Dec 7, 2008 at 6:54 PM, Matt Wilson [EMAIL PROTECTED] wrote: The front page of jquery.com says the production version is 15kb, but when I go to the download link, it shows up as 54kb. By the time you have the file saved your browser has unzipped it to it's full 54kb, but while it was being transmitted, it was only 15kb. Here are some related threads: http://groups.google.com/group/jquery-en/browse_thread/thread/563ebd5a961d401 http://groups.google.com/group/jquery-en/browse_thread/thread/3a5d4093f0c74a4a http://groups.google.com/group/jquery-en/browse_thread/thread/790dc1745f0816f8 Is there something special that I need to do to convert that 54kb file into 15kb file? You need to configure your web server/host to gzip the file when it's requested. Modern browsers will tell the server that they support that compression and things will work. If a client doesn't support gzip compression, the server will serve it not gzipped, but this would be a very very small percentage of cases. - Richard
[jQuery] Re: Jquery Tablesorter not working
i'd guess your file is not being loaded correctly
got a live page to see?
On Dec 7, 4:19 pm, Gowrishankar [EMAIL PROTECTED] wrote:
Hi All,
I have been trying to use the table sorter but not sure why this error
pops up :
jQuery(#myTable).tablesorter is not a function
script type=text/javascript
src=/scripts/jquery-1.2.6.pack.js/
script type=text/javascript
src=/scripts/jquery.tablesorter.js/
script language=javascript
!--
var $j = jQuery.noConflict();
jQuery(document).ready(function()
{
// alert('Hi');
jQuery(#myTable).tablesorter();
}
);
--
[jQuery] Validate does not work in IE7
Hello, I am using JQuery and Validate. It works fine in Firefox 3 but it does not work in IE7. Here is an example: http://www.27lamps.com/Beta/Form/Form.html Am I doing something wrong or is there a bug? Thanks, Miguel
[jQuery] Re: How to animate frameset properties?
Well, I tried, I really tried.
I have the following code:
function test(isExpanding)
{
var x=start+%,*;
if(isExpanding==1)
start++;
else
start--;
top.$(#main_frame).attr(cols,x);
alert(x);
if(isExpanding==1 start21)
setTimeout(test(isExpanding),500);
else if(isExpanding==0 start1)
setTimeout(test(isExpanding),500);
}
That code is called like this first time:
setTimeout(test(0),500);
This code immediately reaches var start=2, no transition, no
iterations ( I alerted it, and alert popped up once).
I just can't understand the logic that goes behind this. Each call
should increase or decrease var start with one then call itself
instead it goes...randomly, abnormally. The lack of debugging also
bothers me, it had become rough guessing of where the error could be.
God, I miss my C#
So, can you suggest anything else?
On dec. 4, 22:47, Jeffrey Kretz [EMAIL PROTECTED] wrote:
I'm going to toss this out there, though you may not want the effort.
You could sort of roll your own animation that uses the attribute, rather
than the CSS.
It would involve a setTimeout, and use the $(el).attr('cols',val);
Again, that's a lot of plumbing to tackle, but any attribute that can be set
by jQuery.attr can be animated.
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of andriscs
Sent: Thursday, December 04, 2008 1:35 PM
To: jQuery (English)
Subject: [jQuery] Re: How to animate frameset properties?
I tried it, believe me. :)
Yet I had to use frames due to close deadlines as divs that I used
were placed abnormally everwhere depending on which browser were
presented in.
I have to create a navigation side on the left and a content area on
the right. The menu should always be visible while the content should
be scrollable. The menu should become hidden on click and the
splitting between the sides should be adjustable. Tell me, is there
div-based jQuery code that accomplishes this? I use jTree for the
navigation menu and I tried jSplitter for creating the splitter but I
couldn't create an always visible yet scrollable layout :)
So I reverted back to frames and it works well in major browsers, I
can adjust splitter, I can scroll content, I just lost the possibility
of creating a smooth animation ( I animate the disappearing of the
navigation menu).
If you have better ideas, tell me.
On dec. 4, 02:28, ricardobeat [EMAIL PROTECTED] wrote:
You can only animate CSS properties, the col width is not one of them.
Get rid of the frames and use some clean code :)
On Dec 3, 9:40 pm, andriscs [EMAIL PROTECTED] wrote:
Hi,
I know it's kinda lame, but I should animate the setting of a
frameset'scolsproperty.
So far I managed to learn that html properties can be animated using
anime({prop:”value”},duration)
I created for example a font size changer using that code.
As I work now with frames, I tried to modify a frameset’s properties:
first I used the following code:
top.$(#main_frame).attr(cols,0%,*);
It worked fine, the leftframedisappeared. I just wanted to make it
with animation, so I tried the following:
top.$(#main_frame).animate({cols:0%,*},600);
but nothing happened. Is it because attribute ’cols’ cannot be
animated by jQuery’s inner mechanism? Honestly, I don’t feel much
difference between animating width property andcolsproperty. Do you
have any idea of how to animate that kind of operation?
If not possbile what else solution would you suggest me to hide a left
sided navigation menu that resides in aframe?
[jQuery] Re: Setting source of a frame with jQuery
There is a lot of code there, and I couldn't follow it all. Can you post a simple test page?
[jQuery] Re: Setting source of a frame with jQuery
What you mean by lot of code? The jTree code isn't altered, my code is in custom.js, and there are two pages (index.html and doc_index.html) to check. I can't put up a test page, I need to work with these simple pages. Another question: shared JS global variables have separate values between frames? Because my frame sets a shared JS variable and the other frame sees its default value. On dec. 8, 02:32, Dave Methvin [EMAIL PROTECTED] wrote: There is a lot of code there, and I couldn't follow it all. Can you post a simple test page?
[jQuery] Problem with Tablesorter Plugin
I just downloaded JQuery. For my first project, I'd like to make a table
with sortable columns and alternating row colors.
For the sortable columns, I downloaded the Tablesorter plugin, then followed
the tutorial at http://tablesorter.com/docs/
I don't know a lot about JavaScript, but I have implemented and tweaked many
pre-made JavaScripts. So I don't understand why I can't get this one to
work.
First, I tried it on a PHP page with a table displaying dynamic content.
When that didn't work, I made a very simple page, with nothing but a table,
in the same directory as the two JavaScripts I linked to in the head
section.
My table has head and body tags, along with the proper ID (myTable).
Here's the entire code for the page:
* * * * *
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8
titleUntitled Document/title
script src=jquery-1.2.6.min.js type=text/javascript
script src=tablesorter/jquery.tablesorter.js type=text/javascript
script src=tablesorter/jquery.tablesorter.min.js type=text/javascript
=JavaScript type=text/JavaScript
script language=JavaScript type=text/JavaScript
$(document).ready(function()
{
$(#myTable).tablesorter();
}
);
/script
/head
body
BODY
table width=100% ID=myTable
thead
tr
thN/th
thAnimal/th
thHome/th
/tr
/thead
tbody
tr
td1/td
tdaardvark/td
tdArizona/td
/tr
tr
td2/td
tdzebra/td
tdSouth Dakota/td
/tr
tr
td3/td
tdpenguin/td
tdTennessee/td
/tr
tr
td4/td
tdass/td
tdCalifornia/td
/tr
tr
td5/td
tdwarthog/td
tdDemocratic Republic of the Congo/td
/tr
tr
td6/td
tdgiraffe/td
tdChina/td
/tr
tr
td7/td
tdgorilla/td
tdTaiwan/td
/tr
tr
td8/td
tdSouth Dakota/td
tdTibet/td
/tr
tr
td9/td
tdaardwolf/td
tdAlbania/td
/tr
tr
td10/td
tdzorilla/td
tdGreece/td
/tr
/tbody
/table
/body
/html
* * * * *
I tried it with tablesorter.js, tablesorter.min.js and both at the same
time, with the same results. Nothing happens.
Can anyone tell me what I'm doing wrong? Thanks.
[jQuery] Having trouble thinking through the how: make node, append (w/o showing), then fade in ...
I'm having a hard time working through this in my mind (and a much
harder time in code.)
I am receiving a JSON array. I am then looping through each result,
and trying to create three text boxes within a list item for each line
of data.
The result should look like this: liinput type=text
value=something /.../li
Once that node is created, I want to append it to an unordered list,
but not visible, so that it can immediately slide open.
I can think of some sloppy ways to do this (and maybe they are right),
but I assume, like every time I use JQ, there is a more elegant
solution. Any tips or advice are greatly appreciated.
Here's my code, if it helps:
$(document).ready(function () {
$(#retrieveData).click(function() {
if($(#urlToGet).val() != undefined) {
$.getJSON(returnData.php, { url:
$(#urlToGet).val() },
function(data){
//alert(data.length);
$.each(data, function (i, item)
{
$(#myList).append(li id='i+i+' style='height:0;
overflow:hidden'
input type='text' value= + item.a + /
/li);
$(#i +
i).animate({height: 20px });
});
});
} else {
alert(You must enter a URL for this
feature to work.);
}
return false;
})
})
And then in the body there is ul id=myList/ul
[jQuery] Re: Having trouble thinking through the how: make node, append (w/o showing), then fade in ...
What about something like this?
$(liinput type='text' value= + item.a + //li).hide
().appendTo(#myList).slideDown(fast);
On Dec 7, 8:10 pm, nathanziarek [EMAIL PROTECTED] wrote:
I'm having a hard time working through this in my mind (and a much
harder time in code.)
I am receiving a JSON array. I am then looping through each result,
and trying to create three text boxes within a list item for each line
of data.
The result should look like this: liinput type=text
value=something /.../li
Once that node is created, I want to append it to an unordered list,
but not visible, so that it can immediately slide open.
I can think of some sloppy ways to do this (and maybe they are right),
but I assume, like every time I use JQ, there is a more elegant
solution. Any tips or advice are greatly appreciated.
Here's my code, if it helps:
$(document).ready(function () {
$(#retrieveData).click(function() {
if($(#urlToGet).val() != undefined) {
$.getJSON(returnData.php, { url:
$(#urlToGet).val() },
function(data){
//alert(data.length);
$.each(data, function (i,
item) {
$(#myList).append(li id='i+i+' style='height:0;
overflow:hidden'
input type='text' value= + item.a + /
/li);
$(#i +
i).animate({height: 20px });
});
});
} else {
alert(You must enter a URL for this
feature to work.);
}
return false;
})
})
And then in the body there is ul id=myList/ul
[jQuery] Re: Having trouble thinking through the how: make node, append (w/o showing), then fade in ...
Thanks Ryura -- That's exactly what I thought I could do, but could not get it to work. That's when I came up with my much less elegant solution that works OK, but I have the feeling has some serious shortcomings. The error I get with your solution is Value undefined (result of expression liinput type='text' value= + item.a + //li.hide) is not object. I tried removing everything but the li/li (and then removing the closing /li just in case) to verifying that it wasn't a problem generating the DOM elements, but that didn't change the nature of the error. Thanks! Nate
[jQuery] Problem with placement of image in tooltip
Hi all,
I'm trying to use the tooltip plugin and for some reason the image
tooltip is always showing up on the bottom left of the page. I've
created a very simple example illustrating the problem. I must be
doing something incredibly stupid. Anyone have any ideas? Thanks a
lot,
Russ
html
head
script type=text/javascript src=http://ajax.googleapis.com/
ajax/libs/jquery/1.2.6/jquery.min.js/script
script type=text/javascript src=http://jquery.bassistance.de/
tooltip/jquery.tooltip.js/script
script type=text/javascript
$(document).ready(
function()
{
$('.album_art').tooltip({
showURL : false,
track : true,
bodyHandler: function() {
return $(img/).attr(src, this.src);
}
});
}
);
/script
/head
body
div align=center
img class=album_art src=http://ecx.images-amazon.com/
images/I/4187ZuBtMdL._SS500_.jpg width=30 height=30 /
/div
/body
/html
[jQuery] Re: How can I make a td clickable?
On Dec 7, 2008, at 9:34 AM, Kayhadrin wrote:
Hi,
If .menuitem is a class you use to contain each link, and .menu is the
class that exactly defines a link, you could use:
$('.menuitem').click(function(){ // the whole menu item can be clicked
$('a.menu', this).click(); // simulate a click on the link, which
should make the browser load the link's URL
});
Actually, I don't think that is going to work. Instead, you'll have to
do something like this:
$('td.menuitem').click(function(event) {
window.location.href = $('a.menu', this).attr('href');
});
});
See my related blog entry (just posted 2 minutes ago) and scroll down
to the part about Other Elements:
http://www.learningjquery.com/2008/12/quick-tip-click-table-row-to-trigger-a-checkbox-click
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Resize textarea to fit all text (needing scrollHeight?)
I want to adjust a textarea to fit all of the text within. I tried toying with the dimensions plugin, but it doesn't offer the scrollHeight attribute, which is what I think I need. Before I go journeying off on a wild tangent to my actual project, I wanted to make sure that a) I'm barking up the right tree and b) jQuery doesn't already offer this in some function I'm unaware of. Thanks! Nate
[jQuery] Re: Need help modifying this jQuery...
Got it working!
I did go back to the first way of coding the jQuery, however.
The problem I had was in wrapping the input's with a form tag.
I guess when using jQuery the way this is written, the form tags
aren't necessary and actually keep the code from functioning properly.
It's a little strange to have form fields with a form tag, but whatever
works...
Thanks for your help!
Rick
Rick Faircloth wrote:
Hi, Andrew, and thanks for the code.
I've been *partially* successful and I don't quite understand why
things are
happening the way they are...it could be some of the ColdFusion code
involved.
When I run the login.cfm page with the myForm form, I end up with my
message being displayed for a successful login, but it's in this format,
{login:Login Successful} which I think is the Json translation of
the data...
Also, the message is displayed on the login_processor.cfm page, instead
of the page with the form, login.cfm, which is where the message
should end
up in plain text.
Here are the files involved:
- login.cfm
- login_processor.cfm
- manager_data.cfc
- cfjson.cfc (running the code your way probably makes this
unecessary, at the very least,
since, I assume, form.js is handling the Json
translation...?)
Here's what each of these files looks like:
login.cfm
___
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
cfsetting showdebugoutput=no
head
script type=text/javascript src=jquery.js/script
script type=text/javascript src=jquery.form.js/script
script type=text/javascript
$(document).ready(function() {
//bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm( {
dataType: 'json',
success: function(data) {
$('#contentdiv').empty().fadeIn(1000).append(data.login_message);
}
});
});
/script
style type=text/css
body { font-family: Arial, Helvetica, sans-serif; }
#databox { border: 1px solid Gray;
margin:30px auto 0px auto;
padding: 10px;
width: 200px;}
#contentdiv { color:red; font-size: 30px; margin-top: 10px;}
/style
/head
body
form id=myForm action=login_processor.cfm method=post
Email: input type=text name=email_address /
Password: input type=password name=password /
input type=submit value=Login /
/form
p id=contentdiv /p
/body
/html
login_processor.cfm
_
cfsetting showdebugoutput=no
cfset mdata = createObject(component,manager_data)
cfset thedata = mdata.getmanagerData(form.email_address,
form.password)
cfset ojson = createObject(component,cfjson)
cfset results = ojson.encode(thedata)
cfoutput#results#/cfoutput
manager_data.cfc
___
cfcomponent displayname=manager_data hint=Contains manager
database query output=false
cffunction name = getmanagerData
cfargument name = email_address type=string
required=yes
cfargument name = passwordtype=string required=yes
cfquery name=get_manager datasource=login
selectemail_address, password
fromsite_managers
whereemail_address = '#arguments.email_address#'
andpassword = '#arguments.password#'
/cfquery
cfset managerStruct = structNew()
cfif get_manager.recordcount gt 0
cfset managerStruct.login = Login Successful
cfelse
cfset managerStruct.login = Login Unsuccessful
/cfif
cfreturn managerStruct
/cffunction
/cfcomponent
And then there's cfjson.cfc, the content of which I won't post unless
you really
need to see it because there's a lot of code...
Is there some adjustment that's needed in my processing code/files since
I'm using the different jQuery code that you provided?
Any more help is appreciated!
Rick
aschmid wrote:
Rick,
You could try the form plugin as below
form id=myForm action=request_processor.cfm method=post
Email: input type=text name=email_address /
Password: input type=password name=password /
input type=submit value=Login /
/form
script type=text/javascript src=path/to/jquery.js/script
script type=text/javascript src=path/to/form.js/script
script type=text/javascript
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm( {
dataType: 'json',
success: function(data)
[jQuery] [jQuery]how to create a Firefox Extension using jquery
i , i was trying to replace my javascript statements with jquery statements by including the jquery file in *.xul file. the xul file line is as under: script type=application/x-javascript src=chrome://extensionname/content/jquery-1.2.6.min.js/ and i am trying to access the $/ jquery functions in the other js file of my plugin. but its not working. plz help.
[jQuery] Re: Setting source of a frame with jQuery
The zip you posted has 30 files in it. That's a lot of moving parts for a test case, and it doesn't look like most of them would be needed to demonstrate the problem.
[jQuery] Re: bind a function to another function
Yes you are correct, I mistakenly wrote wrong values. Thanks for informing me. I modified it. cheers, Prajwala On Sun, Dec 7, 2008 at 1:12 PM, Joe [EMAIL PROTECTED] wrote: I think I understand what you are trying to do, but the example is rather confusing. Can you use maybe more unique names? I got mixed up because of this: The variable called1 will have 'called1-fun1' and The variable called2 will have 'called1-fun2'. called1-fun1 should be class1-fun1 and called1-fun2 should be class1- fun2, right? Joe On Dec 6, 11:22 am, Prajwala Manchikatla [EMAIL PROTECTED] wrote: Hi all, I released my first jquery plugin. It is about binding or connecting a function to another function. It is just like binding a handler function to event. Please have a look at it and send me your comments. http://plugins.jquery.com/project/jqConnect cheers, Prajwala
[jQuery] how to image cache using jQuery?
hi, I'm new in jQuery... can someone help me to understand how to do Image caching from jQuery. thanks...
[jQuery] Re: Submit form using ajax
Hi,
Thanks for your response.
I am using a form plugin for submitting form.
http://plugins.jquery.com/project/form
i came to know that livequery can solve this issue, but i am not
understanding that how livequery will bind my form for ajax event.
On Dec 5, 11:34 pm, Mike Alsup [EMAIL PROTECTED] wrote:
Please let me know where i am wrong.
Move this line:
$('#add_prime_show_id').ajaxForm(options);
and put it right beneath this line:
$('#admin_ajax_new_content_id').html(html); //show the html
inside .content div
For background info on why:
http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_st...
[jQuery] Remote requests using $ajax
Hey all, I'm in need of making a remote request (i.e. to a different domain) using the $.ajax function. Doing some preliminary research on google and this group, it looks like the most popular workaround is to call a separate local script using $ajax; and then having the local script perform the actual remote request. However, for my current situation, I cannot utilize a local script. The documentation for $ajax seems to imply that jquery supports remote calls, unless I'm misinterpreting this line: All remote (not on the same domain) POST requests are converted to GET when 'script' is the dataType (because it loads script using a DOM script tag). http://docs.jquery.com/Ajax/jQuery.ajax Can someone post an example of a remote request using $ajax? Please let me know if you'd me to clarify. Thanks! Dave
[jQuery] Re: Webdeveloper to WebDeveloper
Hi Well what you are doing is not legal ( you are allowed to summarize an article on your page and then link to the original article but not copy the whole content and link to the original article if you dont have the permission of each of the sites or article owners, that is not done the original authors spend time making these articles and you are ripping the whole content ( altho you link to the site you can read the full alrticle on yours so you are nenefiting from the original authors hard work since people read it on your site On Sat, Dec 6, 2008 at 3:43 AM, Pedram [EMAIL PROTECTED] wrote: Dear folk , If you're interested on web development Articles which is updated and has lots of new information.(Web developer to web developer) I have just started a Blog which contains (jQuery ,Css,html,Php,Mysql,json,Ajax) take a look at it http://www.pedramdev.com , this Blog gets the best articles out of the web and also at the end of the week it has some conclusions enjoy it . If any one is interested please let me know . [EMAIL PROTECTED] . Sincerely Pedram .
[jQuery] Re: Remote requests using $ajax
Try looking at the getJSON method: http://docs.jquery.com/Ajax/jQuery.getJSON It's the only way to do direct cross-domain communication from the client-side. (The other option is you use a proxy on your server and route requests through there.) Karl Rudd On Mon, Dec 8, 2008 at 4:52 PM, dave [EMAIL PROTECTED] wrote: Hey all, I'm in need of making a remote request (i.e. to a different domain) using the $.ajax function. Doing some preliminary research on google and this group, it looks like the most popular workaround is to call a separate local script using $ajax; and then having the local script perform the actual remote request. However, for my current situation, I cannot utilize a local script. The documentation for $ajax seems to imply that jquery supports remote calls, unless I'm misinterpreting this line: All remote (not on the same domain) POST requests are converted to GET when 'script' is the dataType (because it loads script using a DOM script tag). http://docs.jquery.com/Ajax/jQuery.ajax Can someone post an example of a remote request using $ajax? Please let me know if you'd me to clarify. Thanks! Dave
[jQuery] Re: jQuery.uploader released: Flash based jQuery uploader
One question. Your docs and examples don't ever mention, that I can tell, how the data is handed off to the backend script. Are the images just going to be in the $_FILES global (to give a PHP example)? Yes, i did not include any information about the backend script used, since each and every file upload example allready has this, for example; swfupload has it, but also fancyupload has some good examples. @Alexandre: Also, a question: does your plugin returns the created file name (in case of serverside rewriting, for example, to avoid file duplication ?) i personally never found an easy way to tackle this using flash to upload files. And it's my main gripe against them. Thanx for the mentioning of the 404!. As you can see in the second demo; - You select a file (which is uploaded automatically) - The server gets that file, and saves it as a NEW filename (so your backend can do whatever you want with the file) - And you can send the data back to flash, as i do by telling the location of the new image file. I hope this answers your questions.
