understand me
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$('.deleteMe').live('click', function(){
$(this).parent().remove();
$('#contributionList').listview('refresh');
});
$( document ).ready(function() {
$('#addContribution').click(function () {
var newAmount = $('#contributionAmount').val();
if (newAmount) {
$('#contributionList').append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>').listview('refresh');
$('#contributionAmount').val('');
} else {
alert('Nothing to add');
}
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview" id="contributionList" data-split-icon="delete" data-split-theme="d">
<li id="l1"><a>5.00</a><a id="1" class="deleteMe"></a></li>
<li><a>10.00</a><a class="deleteMe"></a></li>
<li><a>15.00</a><a class="deleteMe"></a></li>
<li><a>20.00</a><a class="deleteMe"></a></li>
<li><a>25.00</a><a class="deleteMe"></a></li>
<li><a>50.00</a><a class="deleteMe"></a></li>
<li><a>100.00</a><a class="deleteMe"></a></li>
</ul>
<br />
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="text" placeholder="Add new Amount" id="contributionAmount" />
</div>
<div class="ui-block-b">
<input type="button" value="Add" id="addContribution"/>
</div>
</fieldset>
</div>
</div>
</body>
</html>
^ this code is work in website but when i add it to HTML like this is never work .. i don't know why !
look at the last answer in down someone sent me a link is work !
but when i add it in HTML not work
------- >< >< ><
some people say u don't use $(document).ready(function() {});
and some people say you can use $('ID').on('click',function(){})
^ i did that in my computer it ain't work ! but i didn't test it in website
<><><----------
the problem maybe in my laptop Mac Os X if the code is work then it
should work when i add it in HTML is not work
basically code work in website but in HTML inside not work !
<script>
$( document ).ready(function() {
$('#addContribution').click(function () {
var newAmount = $('#contributionAmount').val();
if (newAmount) {
$('#contributionList')
.append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>')
.listview('refresh');
$('#contributionAmount').val('');
} else {
alert('Nothing to add');
});
});
</script>
The script didn't work because the dom element that you are binding ie;'#contributionAmount' is not available when the script is parsed by browser. document.ready event would be compiled by browser once the html dom is ready.
You have to register your click event inside document.ready event. document.ready event call after DOM is loaded. So when your older script executed DOM is not ready so you can't register your event.
If you don't want to do this jQuery ready event, you can bind a function to an event using on, Event Handler Attachment jQuery .on()
<script>
$('#addContribution').on('click',function() {
var newAmount = $('#contributionAmount').val();
</script>
This code will help as it works fine
$( document ).ready(function() {
$('#addContribution').click(function () {
var newAmount = $('#contributionAmount').val();
if (newAmount) {
$('#contributionList').append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>').listview('refresh');
$('#contributionAmount').val('');
} else {
alert('Nothing to add');
}
});
});
check out this fiddle http://jsfiddle.net/uiupdates/NXrRp/492/
Related
I am trying to reproduce some thing that works on codecademy: https://www.codecademy.com/en/courses/web-beginner-en-v6phg/2/5?curriculum_id=50a3fad8c7a770b5fd0007a1
However, when I copied down the html, css, and js files and ran it with google chrome, nothing was working. I noticed the missing <script> link to Jquery and added it, and fixed the 'add' function; however the 'remove part' never worked.
Ps. I made sure the script is correctly linked by adding an alert, which fired.
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Checklist</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
</body>
</html>
and jquery (js) file:
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(document.body).on('click', '.item', function(event) {
$(this).remove();
});
});
I just found out the issue to be using old version of jQuery. You are using 1.4.2, which doesn't have the .on() function.
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<!-------------------------------------------------------^^^^^
Solution: Use the latest version of jQuery 1.x, which is 1.12.
From the manual:
I would really suggest you to check the console first before posting something here.
If you sticky with old library then use .live() instead of .on(). Hope this will work for you.
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(".item").live('click', function() {
$(this).remove();
});
});
Demo: https://jsfiddle.net/8s19ehh8/5/
Do anyone has similar experience? I would like to load an external file into current page by using .load("...") function. After loading, how can I trigger the click on an image in the <div id="tab-3-list">?
The script
$("#tab-3-list img.coupon_list").on("click", function (e) {}
doesn't function. If I embed the content of list.html into the current body, the above script works.
<html lang="en" class="ui-mobile">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<section id="home" data-role="page">
<article data-role="content">
<div id="home-content"></div>
</article>
<!-- content -->
</section>
<!-- home -->
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
</script>
</body>
</html>
External file list.html
<div id="tab-3-list">
<div class="ui-grid-a">
<div class="ui-block-a">
<img id="c01" class="coupon_list" src="/images/coupon/c01.png">
</div>
</div>
<!-- /ui-grid-a -->
</div>
<!-- /tab-3-list -->
Try to use event-delegation at this context since you are loading the DOM elements at runtime,
$("#home-content").on("click","#tab-3-list img.coupon_list",function (e) {
e.preventDefault();
alert(this.id);
});
try this..
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html", function(){
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
});
</script>
load uses ajax and thus takes sometime to load data from external page. When you are attaching click event to img.coupon_list, it's not even present in DOM ( in page ).
Try this,
$("#home-content").load("list.html", function () {
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
This is attaching click only when data from load is returned and added to the DOM.
Use event delegation - .on(), and to trigger click event use .trigger()
$(document).ready(function() {
$("#home-content").load("list.html",
function(){
$('#tab-3-list img.coupon_list').trigger('click');
});
$("#home-content").on("click","#tab-3-list img.coupon_list", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
-just put event in live mode , it's work after reload :
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#home-content").one("load",function(){
// everytime an image finishes loading
}).each(function () {
if (this.complete) {
// manually trigger load event in
// event of a cache pull
$(this).trigger("click");
}
});
$("#home-content #tab-3-list img.coupon_list").live("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
}); </script>
I have a document called "info.html".
it have 5 pages:
food
toys
entertainment
smartphones
electronics
I want that once a page loads, jquery send a request to the server for information about this item.
I all need to know is how to trigger this function?
Tried:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CoCouppn!</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript">
$(document).on("pageshow", function() {
alert($(this).attr('id'));
});
</script>
</head>
<body>
<div data-role="page" class="pge" id="food">
food
</div>
<div data-role="page" class="pge" id="toys">
toys
</div>
<div data-role="page" class="pge" id="entertainment">
entertainment
</div>
<div data-role="page" class="pge" id="smartphones">
smartphones
</div>
<div data-role="page" clsas="pge" id="electronics">
electronics
</div>
</body>
</html>
It alerts "undifined" instead of page ID.
What is the problem?
Note that pageshow is deprecated in jQuery Mobile 1.4: http://api.jquerymobile.com/pageshow/
Note also that $.mobile.activePage is deprecated.
If you want to get the active page ID, you can do:
$.mobile.pageContainer.pagecontainer( 'getActivePage' ).attr( 'id' );
or
$('body').pagecontainer( 'getActivePage' ).attr( 'id' );
or
$(':mobile-pagecontainer').pagecontainer( 'getActivePage' ).attr( 'id' );
I do not personally recommend the latter two, as you are free to set a different pagecontainer, which in fact I do in Jasmine tests.
Note that the page must really be active first (it is not active yet in pagecreate, for instance).
pagechange event and retrieve page's id from data object.
$(document).on("pagechange", function (e, data) {
var page = data.toPage[0].id;
});
Demo
pageshow:
$(document).on("pageshow", function (e, data) {
var page = $(this)[0].activeElement.id;
});
Demo
You can get the current page information in a shorter and clearer way:
$(".ui-page-active").attr("id")
This is just a variation from the code shown here: http://demos.jquerymobile.com/1.4.5/toolbar-fixed-persistent/#&ui-state=dialog
Try $(document).ready( function ), $(document).ready allows you to execute a code in jQuery only when the page is loaded.
If you want to use pagecreate event, use this.id
$(document).on(
"pagecreate",
'#page_1, #page_2',
function(event) {
var pageId = this.id;
...
}
);
My HTML file:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>
Login
</title>
</head>
<body>
<div class=loginForm>
<p>Worker-ID:<input type=text id=workerID name=workerID /></p>
<p>Password:<input type=password id=workerPassword name=workerPassword /></p>
<input type=submit id=submitLogin name=submitLogin value="Log in"/>
</div>
</body>
</html>
My scripts.js:
$('#workerID').keyup(function() {
alert('key up');
);
It doesn't work at all. I tried everything space,one letter, numbers. The alert doesn't show up. Where is the mistake?
Apart from a typo around your missing }, when your script.js file runs (in the <head> section), the rest of your document does not exist. The easiest way to work around this is to wrap your script in a document ready handler, eg
jQuery(function($) {
$('#workerID').on('keyup', function() {
alert('key up');
});
});
Alternatively, you could move your script to the bottom of the document, eg
<script src="js/scripts.js"></script>
</body>
</html>
or use event delegation which allows you to bind events to a parent element (or the document), eg
$(document).on('keyup', '#workerID', function() {
alert('key up');
});
You're missing the curly bracket to close the function:
$('#workerID').keyup(function() {
alert('key up');
});
Errors like these are usually seen in the browser's JavaScript console.
in HTML
inser id, name,vale in " "
<div class="loginForm">
<p>Worker-ID:<input type="text" id="workerID" name="workerID" /></p>
<p>Password:<input type="password" id="workerPassword" name="workerPassword" /></p>
<input type="submit" id="submitLogin" name="submitLogin" value="Log in"/>
</div>
in js
$('#workerID').keyup(function() {
alert('key up');} // here you forget "}"
);
demo
Syntax is wrong see here
$( document ).ready(function() {
$( "#workerID" ).keyup(function() {
.....................
});
});
change ); to });
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!