Jquery code werkt wel Lokaal, maar niet op webserver.

[DutchHammer]

Ik ben net begonnen met Jquery, mijn probleem zal dus wel simpel te fixen zijn .

Onderstaande code werkt lokaal op m'n pc wel, echter zodra ik hem upload naar Tomcat werkt het niet meer. Alle andere stukjes Jquery code doen wel gewoon hun werk .

code:

    $('.hmenu li').hover(
        function () {
        
        $(this).css('background-color', 'black');
            
        },
        function() {
            
            $(this).css('background-color', 'white);
            
        });

[-LA-]

Met deze beperkte informatie kan ik alleen concluderen dat er met het bovenstaande stukje code in ieder geval niets mis is.

Dus waarschijnlijk speelt er iets ander een rol.

[DutchHammer]

Ik snap ook niet echt waarom het niet werkt, aangezien het lokaal werkt en andere stukjes Jquery het via de server wel gewoon doen.

Dit is overigens het gehele stukje Jquery.

Het lijkt trouwens sterk op dat dit stukje "$('.hmenuclass li').hover" niet werkt, op de een of andere manier lijkt de browser niet door te hebben dat ik met de muis op die css class zit

code:

$(document).ready(function() {

    var loc = location.protocol + "//" + location.host + "/dashboard/";     
    
    

    
    
    $("#hmenu").load(loc + "includes/hmenu.html");

    
    $('.hmenuclass li').hover(
        function () {
        
        $(this).css('background-color', 'black);
        
            
        },
        function() {
            
            $(this).css('background-color', 'white);
            
        });

        
});

[ Voor 15% gewijzigd door DutchHammer op 16-05-2012 10:37 ]

[PeterSelie]

En wat verschilt er tussen de live en lokale HTML? Zie je Javascript errors in je console verschijnen?

Heb je een online demo? Dat debugged wat makkelijker...

[DutchHammer]

Ik kan vanavond de code even uploaden naar mijn eigen webserver. En de html is exact hetzelfde . En krijg ook geen JavaScript errors.

[ Voor 26% gewijzigd door DutchHammer op 16-05-2012 10:37 ]

[Afvalzak]

Misschien kan de file waar de jquery instaat niet gevonden worden of is JQuery niet goed geinclude?

[DutchHammer]

Dat is het niet, want

code:

$("#hmenu").load(loc + "includes/hmenu.html");

werkt bijv wel .

[Shakespeare2000]

Zit het element met de .hmenuclass in de HTML die je met jQuery inlaadt?
Zou het dan niet zo kunnen zijn dat het inladen online net te lang duurt, waardoor het te hoveren element dus nog niet in de DOM zit?

[Sneezydevil]

Ik heb even een paar aannames gedaan, 1 van die aannames is dat de content, die je wil gebruiken, via de ajax call geladen wordt.

Als je dit vaker doet zou ik zeker de volgende Jquery pagina eens lezen:

http://api.jquery.com/live/

Als mijn aanname klopt, zou je het volgende eens moeten proberen:

code:

$('.hmenuclass li').live('hover', function(event) {

  if (event.type == 'mouseenter') {

    $(this).css('background-color', 'black);

  } else {

    $(this).css('background-color', 'white);
  }

});

Ik wist niet eens dat dat lokaal dan wel werkte, of heb je die ajax call er ook nu pas bij gezet?

[DutchHammer]

Sneezydevil schreef op woensdag 16 mei 2012 @ 11:32:
Ik heb even een paar aannames gedaan, 1 van die aannames is dat de content, die je wil gebruiken, via de ajax call geladen wordt.

Als je dit vaker doet zou ik zeker de volgende Jquery pagina eens lezen:

http://api.jquery.com/live/

Als mijn aanname klopt, zou je het volgende eens moeten proberen:

code:

$('.hmenuclass li').live('hover', function(event) {

  if (event.type == 'mouseenter') {

    $(this).css('background-color', 'black);

  } else {

    $(this).css('background-color', 'white);
  }

});

Ik wist niet eens dat dat lokaal dan wel werkte, of heb je die ajax call er ook nu pas bij gezet?

Thnx! Dit was hem .

[Wiethoofd]

WTF, zo'n stapel jQuery wat met een simpele :hover en default CSS op te lossen is (en anders gooi je d'r een !important tegenaan), maar om dit nou via javascript op te lossen.....

Verder zou je voor snelheidswinst (als je het toch met JS wilt blijven doen) de $('.hmenuclass li') kunnen wijzigen naar een $('.hmenuclass').find('li'). (info)

[DutchHammer]

Wiethoofd schreef op woensdag 16 mei 2012 @ 12:53:
WTF, zo'n stapel jQuery wat met een simpele :hover en default CSS op te lossen is (en anders gooi je d'r een !important tegenaan), maar om dit nou via javascript op te lossen.....

Verder zou je voor snelheidswinst (als je het toch met JS wilt blijven doen) de $('.hmenuclass li') kunnen wijzigen naar een $('.hmenuclass').find('li'). (info)

Ik had wat comments uit de code gesloopt, maar dit staat er dus ook in .
// Using Jquery... (can also be done via native CSS..)

De bedoeling was dat dit stukje code veel meer deed dan dit alleen en is dit een soort van left over. En aangezien ik me ook wat wilde verdiepen in Jquery had ik er dit ingelaten om te zien of het ook werkte op de webserver .

De grap is namelijk dat de tekst color gewoon wel via :hover met CSS aangepast wordt . Dit was dus echt ook een beetje spelen met Jquery .

[C0rnelis]

Sneezydevil schreef op woensdag 16 mei 2012 @ 11:32:
Ik heb even een paar aannames gedaan, 1 van die aannames is dat de content, die je wil gebruiken, via de ajax call geladen wordt.

Als je dit vaker doet zou ik zeker de volgende Jquery pagina eens lezen:

http://api.jquery.com/live/

Als mijn aanname klopt, zou je het volgende eens moeten proberen:
[..]
Ik wist niet eens dat dat lokaal dan wel werkte, of heb je die ajax call er ook nu pas bij gezet?

Als je zelf de documentatie ook even leest, dan zie je dat live() een aantal drawbacks heeft en inmiddels deprecated is. http://api.jquery.com/on/ is de aanbevolen manier voor jQuery 1.7+

@OP:
Los van het feit dat dit inderdaad voor bijna alle browsers met CSS werkt, heb je blijkbaar ook niet gekeken naar de functie hover() van jQuery zelf: http://api.jquery.com/hover/ Het is niet de bedoeling dat je zelf gaat controleren op het type event (mouseenter en mouseleave).

Wiethoofd schreef op woensdag 16 mei 2012 @ 12:53:
WTF, zo'n stapel jQuery wat met een simpele :hover en default CSS op te lossen is (en anders gooi je d'r een !important tegenaan), maar om dit nou via javascript op te lossen.....

Verder zou je voor snelheidswinst (als je het toch met JS wilt blijven doen) de $('.hmenuclass li') kunnen wijzigen naar een $('.hmenuclass').find('li'). (info)

Hmm, staat er juist niet dat de enige performance winst die je eventueel kunt behalen alleen kunt krijgen door de context te verkleinen? En dat dat juist niet gebeurt door $('#myContainer').find('a'); ?

When jQuery encounters another selector for the context it actually converts it to say the following instead.

JavaScript:

$('#myContainer').find('a');

This conversion also happens the same way if you pass a jQuery collection as the context.

Now lets actually look at how we can change the context for the jQuery collection.

JavaScript:

// get the node for the context
var context = $('#myContainer')[0];

// pass the context as the second argument
$('a', context).context; // => <div id="myContainer">

[ Voor 50% gewijzigd door C0rnelis op 16-05-2012 23:43 ]

[R4gnax]

C0rnelis schreef op woensdag 16 mei 2012 @ 23:33:
Hmm, staat er juist niet dat de enige performance winst die je eventueel kunt behalen alleen kunt krijgen door de context te verkleinen? En dat dat juist niet gebeurt door $('#myContainer').find('a'); ?

De jQuery.fn.find functie is v.z.i.w. nog steeds gewoon syntactic sugar voor een context-gebonden query als je dieper in de selector engine gaat kijken. Het zou in dat geval wel degelijk de context verkleinen.

[ Voor 7% gewijzigd door R4gnax op 18-05-2012 09:38 ]

[Sneezydevil]

C0rnelis schreef op woensdag 16 mei 2012 @ 23:33:
[...]


Als je zelf de documentatie ook even leest, dan zie je dat live() een aantal drawbacks heeft en inmiddels deprecated is. http://api.jquery.com/on/ is de aanbevolen manier voor jQuery 1.7+

Wist ik wel, als je bij mijn projecten kijkt die 1.7+ gebruiken, dan gebruik ik daar ook .on(), ik had het er misschien beter even bij vermeld.

Ik linkte eigenlijk naar de .live() pagina omdat daar live(), delegate() en on() allemaal vernoemd staan, en ik er niet vanuit wou gaan dat een recente jquery versie gebruikt werd.

[DutchHammer]

Sneezydevil schreef op maandag 21 mei 2012 @ 12:30:
[...]


Wist ik wel, als je bij mijn projecten kijkt die 1.7+ gebruiken, dan gebruik ik daar ook .on(), ik had het er misschien beter even bij vermeld.

Ik linkte eigenlijk naar de .live() pagina omdat daar live(), delegate() en on() allemaal vernoemd staan, en ik er niet vanuit wou gaan dat een recente jquery versie gebruikt werd.

Ik gebruik de laatste versie van Jquery . Ben geen totale n00b, wel een hobby scripter. Had overigens het stukje over dat .live() outdated ging raken. Wilde alleen snel zien of dit m'n probleem fixte.

Thnx allen!