I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.
Related
Maybe I am so noob with jQuery but cant reach my objective. I need to add the attribute target="_blank to all the links inside certain divs. But anything I do works.
I have checked for jquery loaded with:
if(wp_script_is('jquery')==false) {
wp_enqueue_script("jquery");
}
Using the the following code nothing happens:
jQuery("#adagal").html("<p>asdf*</p>");
The #adagal element remains with previous content. I have checked in the source if my javascript file was correctly added, and it is.
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/AdManagerAdagal/js/ads/show_ad.js?ver=4.3.1'></script>
So, what is the problem¿?
Use that:
jQuery(document).ready(function($)
{
$(".your_class a").attr("target", "_blank");
});
Don't forget $ in ready(function to use jquery in your js
I'm looking to use this code in JS Fiddle http://jsfiddle.net/syE7s/ to load some content into a div.
It's exactly what I need but I want link A to auto load when the page loads. My knowledge of Javascript is fairly minimal so if someone could get it working in jsfiddle I would be very greatful.
I've tried googling everything but I just can't seem to make it work.
It is essential I use the HTML as the links I use parse tokens that use {} to identify them as tokens but it obviously gets confused with Javascript when they are sat together.
enter code here
thanks
Here is a working JS Fiddle, I added a function to load the first link :
function launch() {
var link = $('#A').attr("href");
$('#target').load(link);
}
launch();
http://jsfiddle.net/dhmLjme6/
You can add just one line to your javascript.
It will look like this (line 3):
$(document).ready(function(){
$('#target').load($('.trigger').attr("href"));
$('.trigger').click(function(e){
e.preventDefault();
var link = $(this).attr("href");
$('#target').load(link);
});
});
I have this fiddle:
http://jsfiddle.net/6HKJZ/3/
This is the part of CSS that causes troubles:
.r .rp{
max-width:50%;
}
.r .r2{
padding:5px;
max-height:60px;
background-color:#292929;
}
And this is the Javascript code:
$(".rp, .r2").dotdotdot();
I get informations from an external page, everything worked before, but now it does not.
This is what I get on my site:
Everything is correct but it's not working...
P.S. Sorry about bad formatting
when you call dotdotdot() it is to early stage to calculate domElements. I wired thing to a button click and it is working.
http://jsfiddle.net/6HKJZ/5/
I don't know when you call it exactly but try jquery dom ready event
$(function(){
//Your code
});
if this does not work try to call it little bit later with a setTimeout
AS I understand it you are trying to use a jQuery plugin that adds the method "dotdotdot". Your fiddle only includes jQuery, not the dotdotdot library.
If you check your console, running your project, does it give an "undefined" on the line it runs "dotdotdot"? It does on the fiddle.
I included the lib on this updated fiddle: http://jsfiddle.net/6HKJZ/4/. And it works.
$(".rp, .r2").dotdotdot();
I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class
New to posting on stackoverflow here, so my apologies in advance if I messed anything up here.
I'm using Twitter Bootstrap's popovers. My popovers seem to be working for elements that I manually type into my HTML document - but NOT the elements that I dynamically generate via Javascript / Ajax.
For example, the popover seems to work if I manually add this directly to my HTML document:
<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>
But what I really need is for my dynamically generated elements to have popovers. I use an XMLHttpRequest to send a request to a PHP file, and then grab the responseText and display it. When I add this line of code to my aforementioned PHP file:
echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";
... surely enough, the words "hover for popover" appear - but the popover itself doesn't work!
This has been driving me nuts for some time and it would be incredible if someone could lend me a helping hand! I've also added the JQuery function I'm using to enable Bootstrap's popovers below, for what that's worth.
$(function (){
$("[rel=popover]").popover({placement:'left'});
});
I've done a thorough search of similar problems and the best I could find was this link. But that link doesn't seem to have any solutions either. Thanks in advance again!
UPDATE:
Fixed! Many thanks to everyone who helped out. My problem was that the function was being called BEFORE the elements were added into the Document Object Model. There are multiple possible fixes - I simply tested out the solution by shifting the popover function to the END of the Ajax function and it worked!
You need to call $("[rel=popover]").popover({placement:'left'}); AFTER the elements are in the DOM.
UPDATE
If you are using jQuery
$(element_selector)
// load results into HTML of element_selector
.load('your/php/file')
// when done, initialize popovers
.done(function(){
$("[rel=popover]").popover({placement:'left'});
});
OR a catch all for jQuery ajax requests
$.ajaxComplete(function(){
$("[rel=popover]").popover({placement:'left'});
});
In the success function of the ajax you need to call the popover. Something like this
success:function(){
$("[rel=popover]").popover({placement:'left'});
}
This Function will work properly in the selector you have to specify the location on the page where you have to search "rel=popover" like I put *
$(function ()
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});