Any ideas why this doesnt work in my php document?
When i tested this on jsfiddle, everything worked fine.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
</head>
<body>
<div class="shipping-container">
Show UPS info
Show Fedex info
<div class="ups info" style="display:none">the info for ups</div>
<div class="fedex info" style="display:none">Who let the dogs out</div>
</div>
</body>
You missed the document ready handler, try this:
<script type="text/javascript">
$(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
Alternatively, leave your script tag as it is, but put it at the end of the document, before the </body> tag.
You should make sure that your JQuery code is only loaded AFTER your DOM has fully loaded by doing:
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
You are running the script before the link element exists.
In jsfiddle the code is by default placed in an event that runs after the document is loaded. Use the ready event to do this in your code:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
I think you should do this in your header:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
This will ensure that all of the DOM objects (especially the a elements) are loaded before you try to attach any event handler.
Related
I have a few queries that are quite big, i only want queries to run them once the page has finished loading.
This is what i have tried.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#query").load("sql-query.php");
});
</script>
</head>
<div id="query">Loading...</div>
sql-query.php
$data = DB::table('tapplicant')->limit(5000)->get();
var_dump($data);
The idea is to return the query data once the page has loaded.
Version mismatch "Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
/*
$( window ).load(function() {
$("#query").load("sql-query.php");
});
*/
$(window).on('load', function(){
$("#query").load("sql-query.php");
});
</script>
</head>
<div id="query">Loading...</div>
Suggest you to use document ready function (i.e $(function()) instead of window onload document.ready vs window
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#query").load("sql-query.php");
});
</script>
</head>
<div id="query">Loading...</div>
I recommend using jQuery.get() after the document.ready()
$( document ).ready(function() {
$.get( "sql-query.php", function( data ) {
$( "#query" ).html( data );
});
});
This is due to some changes made in this JQuery version ..
Just change
$(window).load(function() {});
to
$(window).on("load", function (e) {}); and keep the rest as it is.
Please refer to this for more details.
I have a (simple) question : is it possible to do 2 differents actions when I click on a picture on an html page? Are there examples to explain that?
Thanks in advance
Sure that's easy.
document.getElementById("myPic").addEventListener("click", function(e){
doActionOne();
doActionTwo();
});
You can do simultaneous actions within an onclick event attached to your picture, using jQuery or plain javaScript.
In jQuery for instance, where #myImg is the id of the image:
HTML image tag:
<img id ="myImg" alt="image" src="someImg.png">
jQuery code:
https://api.jquery.com/click/
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
(function ($) {
$(window).load(function () {
$("#myImg").click(function () {
//Change source of the image
$(this).attr( "src", "anotherimage.png" );
// Do something else here...
});
});
})(jQuery);
</script>
Using plain javaScript:
<script type="text/javascript">
window.onload = function() {
document.getElementById('myImg').addEventListener('click', function (e) {
//Change source of the image
this.setAttribute('src', 'anotherimage.png');
// Do something else here...
});
};
</script>
I trying to attach a click event for the newly added anchor tag(.he) after the #foo anchor tag. But the click event is not happening. I have used (.on). Can you guys help me in this ?*
<!DOCTYPE html>
<html>
<head>
<title>Attaching event</title>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="js/jquery.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs</button>
<a id="foo" href="#" style="display:block">Testing the bind and unbind</a>
<script>
$("button").on('click',function () {
$("#foo").after("<a class='he' href='#'>asdfasdf</a>");
});
$(".he").on('click', function(){
alert("test");
});
</script>
</body>
You have to delegate to a static parent element like this
$(document).on('click','.he',function(){
//code here
});
Use event delegation
$("body").on("click", ".he", function() {
alert("test");
});
Instead of body you can use any static parent element of .he.
use .live. and don't forget to add your code inner jquery clousure
<script>
$(function(){
$("button").on('click',function () {
$("#foo").after("<a class='he' href='#'>asdfasdf</a>");
});
$(".he").live('click', function(){
alert("test");
});
});
<script>
you will have to put the below code inside $("button").click block.
$(".he").on('click', function(){
alert("test");
});
Link for jsfiddle http://jsfiddle.net/wbWLE/
You can instead bind the click event to the anchor before appending it to the DOM like this:
var $he = $("<a class='he' href='#'>asdfasdf</a>").on('click', function(){
alert("test");
})
$("#foo").after($he);
You can either attach a handler to the anchor directly before it is appended into the document:
$("button").on('click',function () {
$("<a class='he' href='#'>asdfasdf</a>")
.on('click', function(){
alert("test");
})
.insertAfter("#foo");
});
or bind a delegate handler on the document that will catch all clicks on anchors with he as their class:
$(document).on('click', 'a.he', function() {
alert("test");
});
$("button").on('click',function () {
$("<a class='he' href='#'>asdfasdf</a>").insertAfter("#foo");
});
I want to toggle element that id's pg when click link.
header:
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
</script>
Elements:
<p id="pg">deneme deneme 123 deneme</p>
toggle
close click function by adding });:
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
});
You're missing the final }); for the statement
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
)}; //<-- Missing close bracket
</script>
Also, if you're using Firefox, check out Firebug. Its an invaluable debugger tool and will show you where errors are happening.
Chrome has a Developer Tools enabled, not sure about IE.
I have the following code:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
Which doesn't work. As you could probably tell, it's supposed to expand the .webPanel div to 350px on mouseover, but nothing happens.
How can I get this thing to work? I don't understand why it isn't working!
Thank you
You need a separate script inclusion for jquery:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
//you script
</script>
And how about hover function
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(function() {
$('.webPanel').hover(
function(){
$('.webPanel').animate({'width': '350px'}, 100);
},
function (){
$('.webPanel').animate({'width': '500px'}, 100);
}
});
});
</script>
I wrote your script in jsfiddle and it works great.
Please, see the code here.
I think that your problem is due to the code you wrote between the script tags.
Regards.
your function need to be in separate script tag:
<script type="text/javascript"> // this missing
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script> // this missing