jQuery Forum

I'm using jquery file upload - when each file has uploaded, the name of the file appears, and I've added a check button:

<td colspan="2"><span class="ui-icon ui-icon-check"></span></td>

What I'd like to do is make jplayer fire off a "ding" sound as soon as each file is up.

For example (just to test)

1. $('.ui-icon-check').live('click', function() {
2.        $(this).css("background-color","yellow");
3.     });

needs an action, like a click or a mouseover or something. For each file that arrives, and therefore adds another instance of ui-icon-check, I'd like to fire an event. A weekend of googling has really only turned up  Live Query from 2007, which works perfectly with

1. $('.ui-icon-check').livequery(function(){
2.        $(this).css("background-color","yellow");
3.     });

 but shouldn't "live" be able to handle this now?

But when I try

1. $('.ui-icon-check').live(function() {
2.        $(this).css("background-color","yellow");
3.     });

it just throws

1. TypeError: (a || "").split is not a function
2. http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
3. Line 17

So am I totally mis-understanding the point of live, or just mis-using it?

I'm doing it this way rather than mess with the uploader code as he's updating the code all the time, and the more I can stay away from code code the better I think. Thanks!

Malsup's most excellent and comprehensive Form plugin has me completely stuck on just one thing.
Take a look at this: http://jquery.malsup.com/form/#ajaxForm

At the bottom are a variety of submit buttons, and when you click one, it knows which one has been clicked.
And I've been through the js and the source and the examples and I can't figure out how the bleep it's done!

I'll tell you why I'm asking, then perhaps you can probably tell me I'm doing it wrong anyway!
Let's say a blind person logs in, and want to edit their presets.
I don't want the form to be too complex or clever or ajaxy, as screenreaders don't like that, so it just iterates through as many presets as they have, and populates a form with edit boxes.
But there's no point "pushing back" 29 unchanged items just to edit one row.

So my idea was I'd just "fieldSerialize()" the details of the row that was currently being edited and submit that to my little php routine that updates the db. Then they can do a refresh just to hear the list again.

The js looks like:

1. $(document).ready(function() {
2.     $('#myForm').ajaxForm(function() {
3.       var queryString = $('#myForm').formSerialize();
4.      $('div.thequery').text(queryString);
5.      $.post('scorewriter.php', queryString); 
6.     });
7. });

All works fine like that. But if I change line 3 to:
var queryString = $('#myForm :button').fieldSerialize();
it doesn't work. I've also tried:

'#myForm :button' 
'#myForm .button'  
':button'  
'button'  
'#myForm :input' 
'#myForm .input'

and even though the DOM inspector tells me that the button is called "input", Firefox complains of "unknown name or pseudo-class".

BTW, the html looks like this

1.   <form id="myForm" action="scorewriter.php" method="post">
2.   Preset 1  <input type="text" size="30" id="preset1" name="preset1" value="Easy Listening" />
3.   <input type="text" name="url1" size="50" value="http://www.example.com" />
4.   <input type="submit"  name="submitButton" value="Submit1" /><br />
5.   Preset 2  <input type="text" size="30" id="preset2" name="preset2" value="Smooth Jazz" />
6.     <input type="text" name="url2" size="50" value="http://www.somethingelse" />
7.     <input type="submit"  name="submitButton" value="Submit2" /><br />
8.   <input type="submit" value="Submit Comment" />
9. (etc etc up to however many they have)
10.   </form>                      
11.   <div class = "thequery">query
12.   </div>

(that last bit is just so I can test what I think I've just done).

Maybe I should just generate as many separate forms as there are presets, but then I'm going to need as many ready(function)'s as there are rows, which is going to be very messy.

I'm using a jquery plugin called jplayer. I need to "bookmark" the current track.

The only way to know the current file playing is to look at the div called jplayer_playlist_current.

<li class="jplayer_playlist_current">
<a href="#" id="jplayer_playlist_item_1" class="jplayer_playlist_current">Introduction and guidance on usage</a></li>

What I want to get from it is the id, ie:
jplayer_playlist_item_1

I thought that this might cover it:

http://api.jquery.com/attr/

But nothing I do, no amount of googling or plugins, is getting me this result.
Help appreciated - been at it for over half a day now.

I want to hide a map until it's needed, then when a button is clicked, load the map then scroll to it.

Here's my experiment/dev site: http://coventry.vip-news.co.uk/

Here's what I'm using:

1.  <div id="themap" class="themap c2">
2.     <br />
3.     <script type="text/javascript">
4.       $("button").click(function () {
5.       $("div.c2").fadeIn(1000).delay(1000);
6.       load();searchLocations();
7.       $("div.themap").delay(1000).animate({scrollTop:10}, 'slow'); return false;
8.       });
9. </script>

I've read lots of threads with similar problems, and none of their solutions seem to work.

I've tried:
$("themap")
$("div.c2")
$("dc2")
$('themap')
$('#themap')
in fact, every combination you can think of!

What DOES work is
$('html, body').delay(1000).animate({scrollTop:3000}, 'slow').delay(500);

But this isn't what I want, because the length of the page depends on the length of the playlist, so 3000 isn't the "right place".

I've also tried
$('html, themap').delay(1000).animate({scrollTop:3000}, 'slow').delay(500);

etc ad nauseum.

Where am I going wrong please?

Short, quick version: Is there a way of simulating a mouseclick in a div from a keypress?

In other words, if I press 2, I want it to simulate me actually having clicked in the div
<div id="jplayer_next2"><a href="#">next</div>

Long version (for anyone wondering "WHY?")

Using the jplayer jquery plugin:

For some reason (and after 2 days I've given up trying to find out) I can't seem to directly call the function which is defined right there on the page:

1. function playListNext() {
   
2.       var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
   
3.       if( index > 0 ) {
   
4.             playListChange( index );
   
5. }

I've tried $("#jquery_jplayer").jPlayer("playListNext"); and playListNext() and playListNext; - about 50 different variants through the night!

So I've settled for copying the div it is defined in:

As it appears that once you've clicked one element, you can't click 
the same named element further down, to get the tabindex keypresses 
going, I've done the following: 

        $("#jplayer_previous").click( function() { 
                playListPrev(); 
                return false; 
        }); 

        $("#jplayer_next").click( function() { 
                playListNext(); 
                return false; 
        }); 

        $("#jplayer_previous2").click( function() { 
                playListPrev(); 
                return false; 
        }); 

        $("#jplayer_next2").click( function() { 
                playListNext(); 
                return false; 
        }); 

So now, I have the player further down the page, and at the top, I 
have 
<div id="jplayer_previous2" ><a href="#">previous</a></div> 
<div id="jplayer_next2"><a href="#">next</div> 

All good so far for clickable links BUT... there MUST be a way of 
simulating a mouse click in a div, so I can carry on with the 
accesskeys (the only thing holding up going live). 

I've had my head buried in various docs about jquery "click" and 
javascript "onclick" etc, but nothing seems to suit.  So what I need 
is a function that will simulate having clicked in<div 
id="jplayer_next2"><a href="#">next</div>, which then calls 
playListNext()

They keypress code (works fine for 1 and 2)

1.    $(document).keypress(function(evt)
2.          {
3.                 var keyCode = 0;
4.                 if (evt)
5.                 {
6.                         keyCode = evt.keyCode || evt.which;
7.                 }
8.                 else
9.                 {
10.                         // For IE
11.                         keyCode = window.event.keyCode;
12.                 }
13.                 switch (keyCode)
14.                 {
15.                         case 49 : $("#jquery_jplayer").jPlayer("play");break;   //1
16.                         case 50 : $("#jquery_jplayer").jPlayer("pause");break; //2
17.                         case 51 : $("#jquery_jplayer").playListNext;break;  //3
18.                                        
19.                 }
20.       });

So as line 17 in the above code doesn't work, how am I going to get it to do something like:

case 51 : <simulate a click on #jplayer_next2>;break;

Any ideas are hugely appreciated - this has been a long few nights and many grey hairs!

I've been googling around for a really simple way of making what is, in effect, nothing more than an enhanced phpMySql interface.

In a mysql database, I have:
Name, address, phone, website etc, plus 2 or 3 custom fields. This data is pulled out to make a website.

All I want is to be able to make a freeform form, a bit like Access, but for the web, and the only thing I want to do over and above normal field editing would be to have a list of when I contact them, what was said, and perhaps a reminder when the next action is due.

I've looked at so many CRMs my mind is boggling, and they all do WAY more than I need. I don't have leads or accounts, all I have is the need to make sure than when I update the person's details, and for that data to be in the same DB as my site is generate from.

I'm happy to learn if I can get pointed in the right direction, and I have a feeling that something like what I want might lie in the direction of jquery. It's just that there's so much good jquery stuff about, I can't see the wood for the trees!

Thanks.