When I write the following code, whether Im using Aptana, Dreamweaver or Eclipse, I can never see functions in the onready block in the outline view:
$(document).ready(function(){
function myFunction(){
}
function myFunction2(){
}
});
Basically the only thing I see in outline is the onready and I have to remove the onready if I want to see all my functions. What technique or way of handling this situation can I try to both see all the functions in outline view and still use onready?
What technique or way of handling this situation can I try to both see
all the functions in outline view and still use onready?
Just don't define your own functions inside like you demostrated. It's unnecessary. Have your functions defined outside like so:
function myFunction(){
}
function myFunction2(){
}
$(document).ready(function() {
myFunction();
myFunction2();
});
A simpler way to do the onready is:
$(function(){
... code here ...
})
Maybe this will solve your problem...
Related
I have used the jQuery.click() function in the past with buttons and have had nothing but success, but I tried to use it to click on a <span> and it doesn't work.
Also I noticed that it automatically executed my function without listening to the click.
Judging how I used it on buttons, this would be the syntax:
<p><span id="example">Click Here</span></p>
$("#example").click(exampleFunction(p1, p2));
But it does not seem to work. Again it just executes it without the click even taking place. I even tried:
$(document).on("click", "#example", exampleFunction(p1, p2));
Still no luck, same results.
I am making a weather app and my goal with this is to toggle the temperature between Fahrenheit and Celsius by clicking on the unit. I made a copy of the code for the app on codepen.io here:
Codepen Weather App
I appreciate the help!
Looks like you should try something like this:
$(document).on("click", "#example", function() {
console.log('Hello World');
});
Using the function() definition alone give me Uncaught SyntaxError: Unexpected token (.
What you're doing is binding an anonymous function to the click. If you were doing this somewhat differently, like MyFunction(), then it would only execute the function.
If you had MyFunction you could still trigger it using click like so:
function MyFunction() {
console.log('Hurra!')
}
$('#example').click(MyFunction)
Notice that I didn't use the parentheses otherwise it will actually run the function instead of binding it.
Try it like this:
$('#example').click(bleepme);
function bleepme(){
alert('hi');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><span id="example">Click Here</span></p>
Note that the on-click call to the bleepme function does not have parens -- if you put parens there, it will run the function at document.ready, but not upon click.
Example - no parens on click
Example 2 - parens on click
Well you should supply a body to the function :)
$("#example").click(function() {
alert('clicked');
});
I don't think that you really want to pass parameters into into the function. By the time someone is clicking on the temperature to toggle the units, the document.ready function has finished executing. You actually want to read the values for temp and units from the DOM or from local storage. So, you don't need to pass parameters into your function, which should make things a bit easier.
I think you code need to work like this way
$(document).ready(function(){
$('#example').on('click',function(){
// Some of your logic here
});
});
Just starting out with front end development here, but despite my assuredly poor practices I've been enjoying things a lot. Basically I'm trying to add an onclick function to an element when the page loads. It was working fine as:
$("li a:contains('Search')").ready(function(){
$("li a:contains('Search')").on("click", function(){
$("li a:contains('Search)").text("test")});
});
But my programmer spidey-senses were strongly activated by the quite frankly gross state of this code, so I tried to refactor and my thought for the easiest first-step refactoring was this:
function replaceWithSearch(element){
element.text("test");
}
$("li a:contains('Search')").ready(function(){
$("li a:contains('Search')").on("click", replaceWithSearch($("li a:contains('Search')")));
});
However, when I changed to that, the onclick function now launches immediately. Is there a way to force the function to only be evaluated when called as a callback? I would prefer to have the function be reusable, also if you have any other comments on refactoring my code or best practices I would be very glad to hear them. Again, just starting out with Javascript and I would love to build some good practices.
Optimized code:
$(document).ready(function() {
$("li a:contains('Search')").bind("click", function() {
$(this).text("test");
});
});
If you prefer to use a function, proper way is:
$(document).ready(function() {
$("li a:contains('Search')").bind("click", replaceWithSearch);
});
And in the function you don't have to use argument:
function replaceWithSearch(){
$(this).text("test");
}
Live test case.
If your elements are created after page load, use the .on() like this:
$(document).on("click", "li a:contains('Search')", replaceWithSearch);
Updated fiddle.
Wrap the handler in a function like:
$("li a:contains('Search')").ready(function(){
$("li a:contains('Search')").on("click", function() {replaceWithSearch($("li a:contains('Search')"))});
});
That way, the handler is defined and associated with the click event, rather than executing immediately.
Quick question for people familiar with jsFiddle: why doesn't this run the function when the button is clicked?
I'm sure I'm missing something obvious, but can't get it working.
You need to select the "no wrap (head)" option in the sidebar. Otherwise, your f() function gets wrapped up in some $(function() { /*...*/ }); stuff and is not visible to be set in an onclick attribute:
http://jsfiddle.net/ambiguous/a6rQX/
Under Framework select "no wrap (head)
Click the Run button.
It should now work.
It is because the function with name f() local to the onReady function, so it is not available in the global context.
onReady(){
function f(){
xyz
}
}
I have a somewhat odd situation. I understand the premise of the live() and bind() functions, yet in a situation where i believe i dont need them, i seemingly do. I will explain.
I made an autosuggest in jquery. I included autosuggest.js at the top of my page. I then have an input field.
The basis of the JS works around:
$(".autosuggest").keyup(function()
{
}
This works - on keyup, my function executes etc as expected - i dont need to use live() or bind() as the input field is on the page from the get go...
Now.. I have also made a 'star rater' esque script.
I have various elements (which are styled), and on hover they are restyled...
$('.rating li').mouseover(function() {
}
does NOT work, YET
$('.rating li').live('mouseover',function() {
}
DOES.
Why do i need to use 'live' in this situation, when i dont in the case of the autosuggest?
Thanks
The only thing I can imagine that would cause this is a lack of a domready event. This should work:
$(function () {
$('.rating li').mouseover(function() {
}
});
the .ratings li isn't parsed yet when you have .mouseover() not working.
You can wrap it in $(document).ready(function() {...}); or use .live() (which creates the binding for any currently parsed at that point in the script and any elements added in the future).
Did you put $('.rating li').mouseover(function() {
}
in $(document).ready(function() {....} ?
Even if you include a .js file, if the elements in the page ('rating li') are not loaded, the bind will not be made.
Without seeing more of you code, it's difficult to say for sure. But my guess would be that your script is running before the pageload completes. try wrapping your bindings (and anything else that depends on particular dom elements to exist) with a call to $(document).ready(...).
something like this:
$(document).ready( function() {
$('.rating li').mouseover(function() {
// whatever
});
$(".autosuggest").keyup(function() {
// whatever else
});
});
If that's not it, then post more of your code, and we'll dig in further.
good luck.
I'm doing this over and over, and I'm not sure if it is the best way to do so in JavaScript/jQuery. I have a function that acts as an event handler, but also I need to call it on page initialization. Thus I have been using the following code:
<script type="text/javascript">
$(function() {
function doToggle() {
$("#toggle-fields").toggle(!$('#checkToggle').is(':checked'));
}
doToggle();
$('#checkToggle').click(doToggle);
});
</script>
How do you tackle this repetitious situation? Are there any best practices that you can point me toward?
One way to do it is :)
$('#checkToggle').click(doToggle).click();
like this...
$(function() {
$('#checkToggle').bind('click.toggle',function(){
$("#toggle-fields").toggle(!this.checked);
}).trigger('click.toggle');
});
Your code will not work because this will be window in the first call.
Change it to
doToggle.call(document.getElementByID('checkToggle'));