Jump to content

jquery

etsted

By etsted
in JavaScript

 Share

Recommended Posts

etsted Member

etsted

Posted
Posted (edited)

I think i have been using jquery wrong, or maybe not the best way. I want to wrap jquery outside javascript functions, to make sure that the page i fully loaded, so that i wont have any cached files, when i make a request with ajax.

<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script>$(document).ready(function(){  $("#statusBtn").click(function(){    function heidi(hilsen="heidi"){     return hilsen;    }document.write(heidi());  });});</script></head><body><button id="statusBtn" onclick="heidi('lars')">klikk</button></body></html>

Now i have tried this an it works, except not the way i want, the parameter "lars" is not being set, and this returns "heidi" instead

Edited by etsted
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Another problem is that the function heidi() isn't global, it's not accessible from the element's onclick scope. Put the function declaration outside of the .ready() handler.

 

The hilsen="heidi" syntax doesn't work in Javascript, that's a C++ / Java / PHP thing. If you want to give a default value then you'll have to set it inside the function:

function heidi(hilsen) {    if(typeof hilsen == "undefined") {        hilsen = "heidi";    }
Link to comment
Share on other sites
Hadien Member

Hadien

Posted
Posted (edited)

There are a number of things wrong in this code. let us start with the jquery onclick handler you wrote.

  $("#statusBtn").click(function(){    function heidi(hilsen="heidi"){     return hilsen;    }document.write(heidi());  });

1) you don't need to define another function "heidi" inside your onclick handler, unless the handler your writing is very complex and would have to do a section of code numerous times. in this case you're not. 2) in Javascript, (Hilsen="heidi") is not how you define a default value. Javascript is type-insensitive and you can't overload a function by simply enforcing the number of specific datatypes a function will have, like you can in other languages. You generally have to resort to prototypes and use "shadowing" to mimic this effect. Don't worry about prototypes, you don't need to learn it here. if you want to set a default variable in a function you should run a typeof check to see if it's undefined, from within the function

function heidi(hilsen ){      //checks if hilsen was a passed varible, if so it uses that variable      // otherwise hilsen will default to "heidi"      return (typeof hilsen !== 'undefined')             ? hilsen             : "heidi";)$(document).ready(function(){  $("#statusBtn").click(function(){     var text =  $(this).data("text");     document.write(heidi(text));  });});

I moved the function heidi outside the onclick handler (and even outside the onready handler, though I didn't need to as it has no real impact on the code). this way everyone can access it. In fact I don't even need the heidi function at all, but one step at a time. Notice I wrote $(this).data("text"). This is an answer to the HTML part of your problems, so read on...Now lets look at that HTML:

<button id="statusBtn" onclick="heidi("lars")">klikk</button>

here you have a couple more problems.

1) you can't use double quotes to define lars. Your browser will see the double quotes and think, "oh, this is the end of the onclick handler" and not, "oh, you're telling me about a string". you would want to use single quotes in this case like:

<button id="statusBtn" onclick="heidi('lars')">klikk</button>

HOWEVER, I should say that you shouldn't do this anyway for your particular case as explained in...

 

2) you've already defined a click handler in jQuery. and since that handler is defined inside an onready handler... then jquery will simply overwrite and ultimately ignore the onlick you wrote in the html. Even if it didn't it would have had no idea what heidi() was anyway. only way the HTML's handler would run is if somehow the Jquery script wasn't loaded.

 

Now... Jquery is already taking care of the click handler for you but you still want to be able to pass parameters into it on a per-element basis, right? Enter the data-xxx attribute. when you want to store special data for jquery or some other library to parse you would add an attribute with "data-" prepended to the name of the variable. in this case I use "data-text", but I could have easily gone "data-heidi" or "data-blahblah". Jquery already has a function that properly parses these custom attributes via .data(""). data-xxx attribute validate under the HTML5 specification and won't break earlier specs so you can use it with out fear. Combined with the Jquery code I posted earlier, your button should look like this:

<button id="statusBtn" data-text="lars">klikk</button>

That's all you need and the code should work.

 

edit: oh wow, I've been typing this post for so long you already got a number of replys and you've updated your post a bit

Edited by Hadien
Link to comment
Share on other sites
etsted Member

etsted

Posted
  • Author
Posted

 

Another problem is that the function heidi() isn't global, it's not accessible from the element's onclick scope. Put the function declaration outside of the .ready() handler.

 

The hilsen="heidi" syntax doesn't work in Javascript, that's a C++ / Java / PHP thing. If you want to give a default value then you'll have to set it inside the function:

function heidi(hilsen) {    if(typeof hilsen == "undefined") {        hilsen = "heidi";    }

But if i would to call that function, would it still wait for the page to load, before running whats inside the jquery function, since the jquery ready function is set?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

A function declaration doesn't ever execute, it's safe to have it outside of the ready() handler. The only reason you need ready() is to access HTML elements that would not have loaded yet.

Link to comment
Share on other sites
  • 2 weeks later...
thescientist w3schools Guru

thescientist

Posted
Posted

Are you only using jQuery for the ready function? I don't remember jQuery in your other code.

he's also using it for the event handling

 

$("#statusBtn").click(function(){  function heidi(hilsen="heidi"){  return hilsen;  }  document.write(heidi());});
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

I can't stress enough that we should be discouraging new developers from using document.write.

 

Please learn to use your console. you should be looking there for errors anyway so it should already be open.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

Right, but that doesn't change the fact that it's still not a practical way to debug. I could understand you using it because you read it, but I would still be remiss if I didn't tell you there was a better way.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...