why is this simple fiddle not working - javascript

This fiddle is not working-
http://jsfiddle.net/RcfNL/1/
I just want to add a text field in a div onchange in drop down. What's the problem?

You can also alternatively change the options in the Frameworks and Extensions to onLoad options so it waits the entire DOM to be ready.Check Your fiddle

You need to wrap your code in a document ready function.
$(document).ready(function() {
...
});
JSFiddle demo.
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Related

How to trigger "ready" only once in JQuery?

My way like below does not work. Is there other way to trigger ready event only once? Thanks
$("#id").one("ready", function (){
// do somthing
});
I really recommend you read the jQuery documentation because I'm sure that you will find other way to solve your issue. document ready is not for this purpose.
http://learn.jquery.com/using-jquery-core/document-ready/
I will summarize those concepts:
The js file must have just one $( document ).ready() function, because this function is only for make sure that the code inside it will only run after the "document is ready" (Document Object Model (DOM) is ready for JavaScript code to execute - jQuery documentation). It means that, once all of the HTML as loaded, then your js wil run.
Ok, after know that you can write your focus function inside the document ready to make sure it will work correctly.
See this example that I did: https://jsfiddle.net/hf60asgo/1/
We have the HTML (DOM):
<input id="inputTest" placeholder="Test"/>
<span id="spanTest">Write something</span>
And the JavaScript (jQuery):
$(document).ready(function(){
$("#inputTest").focus(function() {
$("#spanTest").fadeOut(1000);
});
});
After the document is ready (the input and the span was loaded) the jQuery code will run, but only if you focus (click) in the input.
I hope I could give some light to you.
If you want to do something with #id when the document is ready, here is what you have to do:
$(function() {
// do something
$('#id').css('background', 'red);
// do other things
});
There should be only one ready function in your code and it should brace all you jQuery code.
As said above, read the documentation, you won't lose your time.

Can't target elements within jQuery datepicker

I am having trouble targeting elements within jQuery ui-datepicker with the plugin WooCommerce Bookings.
Every time I target it using JavaScript it returns null, so the EventListener can't be executed.
However, if I target anything outside the jQuery ui-datepicker I can actually execute the events created with the JS and jQuery.
This is the first time I have encountered something like this and I'm finding it very unusual.
There are the two snippets I have used to test whether or not it can identify the element:
jQuery('.hasDatepicker').on('click', function() {
alert('hi');
});
function showVolunteers() {
alert("hi");
}
document.querySelector(".hasDatepicker").addEventListener('click', showVolunteers);
Here is a JS fiddle with the HTML for the datepicker: https://jsfiddle.net/e5dnru0e/3/
The datepicker is nested within a fieldset, which I can target so I thought maybe I could try use jQuery('fieldset div.ui-datepicker') but that did not work either.
To triple check I was using the correct selector I tried using some CSS and the CSS works perfectly, so there isn't something wrong with my selector.
Is it possible that it has somehow restricted jQuery to be used within this datepicker.
Any help or suggestions will be greatly appreciated.
When your are registering an event for any DOM element then it should be present in DOM at the time of registering.
In case of dynamic controls (which are injected to DOM after DOM ready event) you can use following syntax of jquery for registering an event.
$(document).on('click','.ui-datepicker', function() {
alert('hi');
});
Above code attaching click event on document (which is always present on Document ready). Second parameter of on function is [selector] ie. .ui-datepicker
Instead of document, you can attach click event on any other DOM element which is going to
present while registering an event.
i.e
$('.datepicker-container').on('click','.ui-datepicker', function() {
alert('hi');
});

JQuery ClueTip with ColdFusion - Javascript $(document).ready() misfire [duplicate]

Yesterday I had an issue where a .on('click') event handler I was assigning wasn't working right. Turns out it's because I was was trying to apply that .on('click') before that element existed in the DOM, because it was being loaded via AJAX, and therefore didn't exist yet when the document.ready() got to that point.
I solved it with an awkward workaround, but my question is, if I were to put a <script> tag IN the ajax loaded content and another document.ready() within that, would that second document.ready() be parsed ONLY once that ajax content is done being loaded? In other words, does it consider that separately loaded ajax content to be another document, and if so, does having another document.ready() within that ajax-loaded HTML work the way I think it does?
Alternatively; what would be a better way to handle this situation? (needing to attach an event listener to a DOM element that doesn't yet exist on document.ready())
To answer your question: No, document.ready will not fire again once a ajax request is completed. (The content in the ajax is loaded into your document, so there isn't a second document for the ajax content).
To solve your problem just add the event listener to the Element where you load the ajax content into it.
For example:
$( "div.ajaxcontent-container" ).on( "click", "#id-of-the-element-in-the-ajax-content", function() {
console.log($( this ));
});
For #id-of-the-element-in-the-ajax-content you can use any selector you would use in $("selector"). The only difference is, only elements under div.ajaxcontent-container will be selected.
How it works:
As long as div.ajaxcontent-container exists all elements (if they exist now or only in the future) that match the selector #id-of-the-element-in-the-ajax-content will trigger this click-event.
Javascript in the resulting ajax call will not be excecuted (by default) due to safety. Also, you can't directly bind event to non-existing elements.
You can bind an event to some parent that does exist, and tell it to check it's children:
$(document).ready(function(){
$(document).on('eventName', '#nonExistingElement', function(){ alert(1); }
// or:
$('#existingParent').on('eventName', '#nonExistingElement', function(){ alert(1); }
});
Always try to get as close to the triggering element as you can, this will prevent unnessesary bubbling through the DOM
If you have some weird functions going on, you could do something like this:
function bindAllDocReadyThings(){
$('#nonExistingElement').off().on('eventName', function(){ alert(1); }
// Note the .off() this time, it removes all other events to set them again
}
$(document).ready(function(){
bindAllDocReadyThings();
});
$.ajaxComplete(function(){
bindAllDocReadyThings();
});
try this, that is not working because your control is not yet created and you are trying to attach a event, if you use on event it will work fine. let me know if you face any issues.
$(document).ready(function(){
$(document).on('click', '#element', function (evt) {
alert($(this).val());
});
});
The answer here is a delegated event:
JSFiddle
JSFiddle - Truly dynamic
jQuery
$(document).ready(function(){
// Listen for a button within .container to get clicked because .container is not dynamic
$('.container').on('click', 'input[type="button"]', function(){
alert($(this).val());
});
// we bound the click listener to .container child elements so any buttons inside of it get noticed
$('.container').append('<input type="button" class="dynamically_added" value="button2">');
$('.container').append('<input type="button" class="dynamically_added" value="button3">');
$('.container').append('<input type="button" class="dynamically_added" value="button4">');
$('.container').append('<input type="button" class="dynamically_added" value="button5">');
});
HTML
<div class="container">
<input type="button" class="dynamically_added" value="button1">
</div>
I'm working on a code-base with a friend that has a similar requirement. The delegated event handler option is definitely best if all you want is to attach event handlers. An alternative, especially if you need to do other DOM processing in your $(document).ready function, is to put the code you want run into a script element at the end of your code. Basically, instead of:
<script type="text/javascript">
$(document).ready(function() {
// Your code here
});
</script>
<!-- rest of dynamically loaded HTML -->
Try swapping the script and the rest of the HTML around so you have:
<!-- rest of dynamically loaded HTML -->
<script type="text/javascript">
// Your code here
</script>
This forces the browser to only process your code once it has loaded every other DOM element in the dynamically loaded HTML. Of course this means you'll have to make sure the inserted HTML does not have unintended UI consequences by using CSS/HTML instead of JS. Its an old Javascript trick from years gone by. As a bonus, you don't need jQuery for this anymore.
I should mention that in Chromium v34, putting a second $(document).ready call inside a <script> tag in the dynamically loaded HTML seems to wait for dynamically loaded DOM to load and then runs the function as you described. I'm not sure this behaviour is standard though as it has caused me great grief when trying to automate tests with this kind of code in it.
JQuery AJAX .load() has a built-in feature for handling this.
Instead of simply $('div#content').load('such_a_such.url'); you should include a callback function. JQuery .load() provides room for the following:
$('div#content').load('such_a_such.url',
{ data1: "First Data Parameter",
data2: 2,
data3: "etc" },
function(){ $('#span1').text("This function is the equivalent of");
$('#span2').text("the $(document).ready function.");
}
);
However, you do not need to include the data argument.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
http://api.jquery.com/load/

how to use jquery in included html?

sorry for the title...
so i separated the index.html into divs then i called the contant using :
<script>$(function(){$("#work_bunch").load("wb.html"); });</script>
and it works fine but i wont to use jquery on the elements in wb.html
i used this in index :
<script type="text/javascript" src="java_scripts/wb_op.js"></script>
what ever i write in the .js file it seems to work fine in the index
but i can't select any element in wb.html
for example (if img5 is an element wb.html) :
$("#img5").mouseover(function(){
$(img5).fadeOut(2000);
});
You need to use event delegation:
$(document).on('mouseover', '#element_in_wb_page', function() {
// your function
});
In your case:
$(document).on('mouseover', '#img5', function() {
$(this).fadeOut(2000);
});
Delegate the event:
$("#work_bunch").on("mouseover", "#img5", function(){
$(this).fadeOut(2000);
});
When DOM was ready your elements were not there they come into view afterwards so at the time of DOM ready all the events were bound to existing elements. If any element is generated dynamically or put into the view via ajax any event will not be bound to them.
So the solution to cater this issue is to try to delegate the event to the closest static parent whenever possible, although you can delegate to document also but that is way expensive in lookup of that dom elements.
explaining syntax:
$(parentToDelegate).on(event, selector, callbackFn);
If you are including .js in head tag, then you need to make use document.ready()
$(document).ready(function() {
$("#img5").mouseover(function(){
$(this).fadeOut(2000);
});
});
here is what i found to be more general solution
use
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
});
instead of
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
});
because:
- The document ready event executes already when the HTML-Document is loaded.
- The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images.
use delegate method on if content added dynamically
$("#work_bunch").on("mouseover", "#img5", (function(){
$(this).fadeOut(2000);
});
and typo issue $(img5) to $("#img5")

Copy DIV content to another DIV

How do i copy the contents of DIV1 to DIV2 on load of the page using jquery? I've tried
$('.buffer').html($("#beskeder_vis").html());
However i wasn't able to make it work out
Assuming your selectors are correct, you should put your code in the .ready() Event.
http://api.jquery.com/ready/
So something like:
jQuery(document).ready(function() {
jQuery('.buffer').html(jQuery("#beskeder_vis").html());
}
Otherwise jQuery won't be able to find your elements, since the DOM isn't loaded, when your function is executed.
You should bind event handler on ready event. See documentation: ready funciton
$(document).ready(function () {
$('.buffer').html($("#beskeder_vis").html());
});
$('#two').html($('#one').html());
See this live example
It works for me. It may have something to do with the jquery version your using
Proof jsfiddle

Categories