Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > jquery ajax doesn't see javascript

Reply
Thread Tools

jquery ajax doesn't see javascript

 
 
SM
Guest
Posts: n/a
 
      06-11-2010
Using the selection on the left panel, I load the results on the right
panel using jQuery Ajax. So far it's working really good:

....
$.ajax({
url: "includes/content.php",
data: "letter=" + letter.substr(letter.lastIndexOf("=") + 1),

success: function(data) {
$('#wrapper').removeClass("loading");
$('#content').html(data).fadeIn(400);
}
});
....



After the results are loaded on the right panel, I click on an <a> tag
that is suppose to trigger some javascript but doesn't:

inside php file:
<a class="btn_play">Play</a>


javasscript to trigger:
$('a[class=btn_play]').click(function(event) {
event.preventDefault();

// get the A tag ref
var file = $(this).attr('href');

alert(file);
});

The same <a> tag also exists on the left panel and triggers correctly.
But, on the right panel, it doesn't trigger at all! I believe it's
because it doesn't see the javascript.

I'm sure this is come out already, but i can't find the solution.

Any hints?

Thanks
Marco
 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      06-11-2010
On Jun 11, 1:01*am, SM <(E-Mail Removed)> wrote:
> Using the selection on the left panel, I load the results on the right
> panel using jQuery Ajax. So far it's working really good:
>
> ...
> $.ajax({
> * *url: "includes/content.php",
> * *data: "letter=" + letter.substr(letter.lastIndexOf("=") + 1),
>
> * *success: function(data) {
> * * * $('#wrapper').removeClass("loading");
> * * * $('#content').html(data).fadeIn(400);
> * *}});
>
> ...
>
> After the results are loaded on the right panel, I click on an <a> tag
> that is suppose to trigger some javascript but doesn't:
>
> inside php file:
> <a class="btn_play">Play</a>
>
> javasscript to trigger:
> $('a[class=btn_play]').click(function(event) {
> * *event.preventDefault();
>
> * *// get the A tag ref
> * *var file = $(this).attr('href');
>
> * *alert(file);
>
> });
>
> The same <a> tag also exists on the left panel and triggers correctly.
> But, on the right panel, it doesn't trigger at all! I believe it's
> because it doesn't see the javascript.
>
> I'm sure this is come out already, but i can't find the solution.
>
> Any hints?
>


Yes. Stop using jQuery. Then you will find that you have to learn (a
lot) before you can script browsers. I know you don't want to hear
that, but it's reality. There are no magic scripts that can turn you
into a JS programmer overnight. This is particularly true of scripts
written by overconfident neophytes (e.g. jQuery).
 
Reply With Quote
 
 
 
 
SAM
Guest
Posts: n/a
 
      06-11-2010
Le 6/11/10 7:01 AM, SM a écrit :
> Using the selection on the left panel, I load the results on the right
> panel using jQuery Ajax. So far it's working really good:
>
> ...
> $.ajax({
> url: "includes/content.php",
> data: "letter=" + letter.substr(letter.lastIndexOf("=") + 1),
>
> success: function(data) {
> $('#wrapper').removeClass("loading");
> $('#content').html(data).fadeIn(400);
> }
> });
> ...
>
>
>
> After the results are loaded on the right panel, I click on an <a> tag
> that is suppose to trigger some javascript but doesn't:
>
> inside php file:
> <a class="btn_play">Play</a>
>
>
> javasscript to trigger:
> $('a[class=btn_play]').click(function(event) {
> event.preventDefault();
>
> // get the A tag ref
> var file = $(this).attr('href');
>
> alert(file);
> });


I don't know at all jquery ...

try in address bar
javascript:$('a[class=btn_play]').style.color='red';alert($('a[class=btn_play]').href)

if jquery finds the link it will be in red
if the link has an href you'll get a message with this href
and, if not, I hope you'll get 'undefined'

if no link(s) found --> nothing firing or error

> The same <a> tag also exists on the left panel and triggers correctly.
> But, on the right panel, it doesn't trigger at all! I believe it's
> because it doesn't see the javascript.


As that link on has no href, what do you expect to get ?
Then ... how do you reach the one or the other using :
$('a[class=btn_play]')
does that return a collection of all A with class btn_play ?
if yes, how do you catch one of them ?


> I'm sure this is come out already, but i can't find the solution.


function sayMe () {
if(this.href) alert(this.href);
else alert('no href !');
return false;
}
function triggerPlays() {
var play_btns = $('a[class=btn_play]'), n = play_btns.length;
if(n && n.length>0)
while(n--) play_btns[n].onclick = sayMe;
else play_btns.onclick = sayMe;
}

--
sm
 
Reply With Quote
 
SM
Guest
Posts: n/a
 
      06-11-2010
On Jun 11, 6:09*am, David Mark <(E-Mail Removed)> wrote:
> On Jun 11, 1:01*am, SM <(E-Mail Removed)> wrote:
>
>
>
> > Using the selection on the left panel, I load the results on the right
> > panel using jQuery Ajax. So far it's working really good:

>
> > ...
> > $.ajax({
> > * *url: "includes/content.php",
> > * *data: "letter=" + letter.substr(letter.lastIndexOf("=") + 1),

>
> > * *success: function(data) {
> > * * * $('#wrapper').removeClass("loading");
> > * * * $('#content').html(data).fadeIn(400);
> > * *}});

>
> > ...

>
> > After the results are loaded on the right panel, I click on an <a> tag
> > that is suppose to trigger some javascript but doesn't:

>
> > inside php file:
> > <a class="btn_play">Play</a>

>
> > javasscript to trigger:
> > $('a[class=btn_play]').click(function(event) {
> > * *event.preventDefault();

>
> > * *// get the A tag ref
> > * *var file = $(this).attr('href');

>
> > * *alert(file);

>
> > });

>
> > The same <a> tag also exists on the left panel and triggers correctly.
> > But, on the right panel, it doesn't trigger at all! I believe it's
> > because it doesn't see the javascript.

>
> > I'm sure this is come out already, but i can't find the solution.

>
> > Any hints?

>
> Yes. *Stop using jQuery. *Then you will find that you have to learn (a
> lot) before you can script browsers. *I know you don't want to hear
> that, but it's reality. *There are no magic scripts that can turn you
> into a JS programmer overnight. *This is particularly true of scripts
> written by overconfident neophytes (e.g. jQuery).


My mistake... wrong forum to write this post.
 
Reply With Quote
 
SM
Guest
Posts: n/a
 
      06-11-2010
On Jun 11, 6:40*am, SAM <(E-Mail Removed)>
wrote:
> Le 6/11/10 7:01 AM, SM a écrit :
>
>
>
> > Using the selection on the left panel, I load the results on the right
> > panel using jQuery Ajax. So far it's working really good:

>
> > ...
> > $.ajax({
> > * *url: "includes/content.php",
> > * *data: "letter=" + letter.substr(letter.lastIndexOf("=") + 1),

>
> > * *success: function(data) {
> > * * * $('#wrapper').removeClass("loading");
> > * * * $('#content').html(data).fadeIn(400);
> > * *}
> > });
> > ...

>
> > After the results are loaded on the right panel, I click on an <a> tag
> > that is suppose to trigger some javascript but doesn't:

>
> > inside php file:
> > <a class="btn_play">Play</a>

>
> > javasscript to trigger:
> > $('a[class=btn_play]').click(function(event) {
> > * *event.preventDefault();

>
> > * *// get the A tag ref
> > * *var file = $(this).attr('href');

>
> > * *alert(file);
> > });

>
> I don't know at all jquery ...
>
> try in address bar
> javascript:$('a[class=btn_play]').style.color='red';alert($('a[class=btn_play]').href)
>
> if jquery finds the link it will be in red
> if the link has an href you'll get a message with this href
> and, if not, I hope you'll get 'undefined'
>
> if no link(s) found --> nothing firing or error
>
> > The same <a> tag also exists on the left panel and triggers correctly.
> > But, on the right panel, it doesn't trigger at all! I believe it's
> > because it doesn't see the javascript.

>
> As that link on has no href, what do you expect to get ?
> Then ... how do you reach the one or the other using :
> * * $('a[class=btn_play]')
> does that return a collection of all A with class btn_play ?
> if yes, how do you catch one of them ?
>
> > I'm sure this is come out already, but i can't find the solution.

>
> function sayMe () {
> if(this.href) alert(this.href);
> else alert('no href !');
> return false;}
>
> function triggerPlays() {
> var play_btns = $('a[class=btn_play]'), n = play_btns.length;
> if(n && n.length>0)
> while(n--) play_btns[n].onclick = sayMe;
> else play_btns.onclick = sayMe;
>
> }
>
> --
> sm


it works! ...
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      06-11-2010
SM wrote:

> SAM wrote:
>> function sayMe () {
>> if(this.href) alert(this.href);
>> else alert('no href !');
>> return false;}
>>
>> function triggerPlays() {
>> var play_btns = $('a[class=btn_play]'), n = play_btns.length;
>> if(n && n.length>0)
>> while(n--) play_btns[n].onclick = sayMe;
>> else play_btns.onclick = sayMe;
>>
>> }

>
> it works! ...


It is still a bad idea, because you could have easily done without the loop
and 20K+ of jQuery needed for $(), thanks to built-in event bubbling:

document.body.onclick = function (e) {
if (!e)
{
e = window.event;
}

if (e)
{
var t = e.target || e.srcElement;
if (t && t.tagName.toUpperCase() == "A" && t.className == "btn_play")
{
window.alert(t.href || "no href");
}
}
};

(or wrappers that do more feature testing and prefer the standards-compliant
approach of adding the event listener)


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      06-11-2010
Thomas 'PointedEars' Lahn wrote:

> SM wrote:
>> SAM wrote:
>>> function sayMe () {
>>> if(this.href) alert(this.href);
>>> else alert('no href !');
>>> return false;}
>>>
>>> function triggerPlays() {
>>> var play_btns = $('a[class=btn_play]'), n = play_btns.length;
>>> if(n && n.length>0)
>>> while(n--) play_btns[n].onclick = sayMe;
>>> else play_btns.onclick = sayMe;
>>>
>>> }

>>
>> it works! ...

>
> It is still a bad idea, because you could have easily done without the
> loop and 20K+ of jQuery needed for $(), thanks to built-in event bubbling:
>
> document.body.onclick = function (e) {
> if (!e)
> {
> e = window.event;
> }
>
> if (e)
> {
> var t = e.target || e.srcElement;
> if (t && t.tagName.toUpperCase() == "A" && t.className ==
> "btn_play")
> {
> window.alert(t.href || "no href");
> }


I forgot the `return false' above, so insert here

if (typeof e.returnValue != "undefined")
{
e.returnValue = false;
}

if (/^\s*(function|object)\s*$/.test(typeof e.preventDefault)
&& e.preventDefault != null)
{
e.preventDefault();
}

(or statements to that effect)

> }
> };
>
> (or wrappers that do more feature testing and prefer the
> standards-compliant approach of adding the event listener)



PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      06-11-2010
On Jun 11, 9:12*am, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
wrote:
> SM wrote:
> > SAM wrote:
> >> function sayMe () {
> >> if(this.href) alert(this.href);
> >> else alert('no href !');
> >> return false;}

>
> >> function triggerPlays() {
> >> var play_btns = $('a[class=btn_play]'), n = play_btns.length;
> >> if(n && n.length>0)
> >> while(n--) play_btns[n].onclick = sayMe;
> >> else play_btns.onclick = sayMe;

>
> >> }

>
> > it works! ...

>
> It is still a bad idea, because you could have easily done without the loop
> and 20K+ of jQuery needed for $(), thanks to built-in event bubbling:


You mean 70K+. They claim 20K "compressed" for the "production"
version. Of course, that's not the size of the file that you put on
your server. The server may or may not zip it per request; but
regardless, it is decidedly inconvenient to try to compare zipped
sizes with other (normally unzipped) assets. In general, disingenuous
marketing has made it awkward to talk about the relative sizes of Web
page assets. Dojo likes to talk about "over the wire" sizes. That's
there way of saying they aren't going to tell you the size that
matters, but rather a number that makes their scripts sound smaller
(e.g. in comparison to HTML documents that sit next to them on the
server).
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      06-11-2010
On Jun 11, 8:27*am, SM <(E-Mail Removed)> wrote:
> On Jun 11, 6:09*am, David Mark <(E-Mail Removed)> wrote:
>
>
>
> > On Jun 11, 1:01*am, SM <(E-Mail Removed)> wrote:

>
> > > Using the selection on the left panel, I load the results on the right
> > > panel using jQuery Ajax. So far it's working really good:

>
> > > ...
> > > $.ajax({
> > > * *url: "includes/content.php",
> > > * *data: "letter=" + letter.substr(letter.lastIndexOf("=") + 1),

>
> > > * *success: function(data) {
> > > * * * $('#wrapper').removeClass("loading");
> > > * * * $('#content').html(data).fadeIn(400);
> > > * *}});

>
> > > ...

>
> > > After the results are loaded on the right panel, I click on an <a> tag
> > > that is suppose to trigger some javascript but doesn't:

>
> > > inside php file:
> > > <a class="btn_play">Play</a>

>
> > > javasscript to trigger:
> > > $('a[class=btn_play]').click(function(event) {
> > > * *event.preventDefault();

>
> > > * *// get the A tag ref
> > > * *var file = $(this).attr('href');

>
> > > * *alert(file);

>
> > > });

>
> > > The same <a> tag also exists on the left panel and triggers correctly..
> > > But, on the right panel, it doesn't trigger at all! I believe it's
> > > because it doesn't see the javascript.

>
> > > I'm sure this is come out already, but i can't find the solution.

>
> > > Any hints?

>
> > Yes. *Stop using jQuery. *Then you will find that you have to learn(a
> > lot) before you can script browsers. *I know you don't want to hear
> > that, but it's reality. *There are no magic scripts that can turn you
> > into a JS programmer overnight. *This is particularly true of scripts
> > written by overconfident neophytes (e.g. jQuery).

>
> My mistake... wrong forum to write this post.


No, it was the right forum to write this post. You have a shot at
learning something here. If you had posted it to StackOverflow or the
jQuery forum, you would have gotten a bunch of "try this" responses
from jQuery fans (and likely without a discouraging word about using a
dubious 70K script to do what you could accomplish in ten lines of
code). Programming and blind devotion just don't mix.
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      06-11-2010
David Mark wrote:

> Thomas 'PointedEars' Lahn:
>> It is still a bad idea, because you could have easily done without the
>> loop and 20K+ of jQuery needed for $(), thanks to built-in event
>> bubbling:

>
> You mean 70K+


ACK

> They claim 20K "compressed" for the "production" version. [...]


Last I checked, they claimed "24K", but given the real figure it does make
much of a difference.


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
jQuery ajax problem Michal Jedryka Javascript 2 02-14-2011 06:03 PM
JQuery Ajax bar Javascript 3 07-26-2010 01:53 AM
Microsoft expanding it use of jQuery & involvement with jQuery lorlarz Javascript 6 03-25-2010 10:14 PM
jQuery Query about comparing jQuery references Aaron Gray Javascript 20 07-27-2008 01:53 PM
ASP.NET Ajax vs jQuery NetWave ASP .Net 3 06-26-2008 06:48 AM



Advertisments