Here is the HTML:
<html>
<head>
<Script type = "text/javascript" src = "CprMdlrSrch.js"></Script>
<link type="text/css"rel="stylesheet"href="CprMdlrSrch.css"/>
</head>
<body>
<div id="main_box">
<p id="instructions"><strong>Please enter a part number to search.</strong></p>
<input id="part_num_search" type="text" name="searchPhrase">
<button id="search_button" type="button" value="button"> <strong>Search</strong></button>
<div id="results"></div>
<script type="text/javascript">
</div>
</body>
</html>
Here is the Javascript:
$(document).ready(function(){
$("#search_button").toggle(function() {
$("#part_num_search").fadeIn("slow");
},
$("#part_num_search").fadeOut("slow");
});
});
I am just unsure what I am doing wrong. I am really just trying to out the button to make sure I am on the right track.
thanks!
-Dustin
I'm not sure you understand how to use the toggle command. Please check out the API documentation: http://api.jquery.com/toggle/
For fade toggling, try .fadeToggle(), which started becoming available since JQuery 1.4.4.
http://api.jquery.com/fadeToggle/
Try something like this:
$(document).ready(function(){
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
});
You'll be better served using http://api.jquery.com/fadetoggle/.
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
Related
I'm trying to refresh the div, but it's duplicating everything else.
Before I do anything, the page looks like this: initial page
The second button is supposed to refresh the div, but when I do, this is what I get:after trying to refresh, it refreshes it, but duplicates everything else
How do I make it so it only refreshes the div?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br/>
<div id='ff'>something</div>
<input id='input'/>
<button id='btn1'>first</button>
<button id='btn2'>second</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
$('#ff').load('thing2.html');
});
});
</script>
</body>
In this line
$('#ff').load('thing2.html');
You are only updating your div with id="ff", but you are loading into the entire contents of thing2.html.
Is this what you were looking for? If not, can you explain a bit more?
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
$('#input').val('');
});
});
<div id='ff'>something</div>
<input id='input'/>
<button id='btn1'>first</button>
<button id='btn2'>second</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
You are loading the things2.html again, hence its duplicating.
I have used location.reload() to refresh and its working fine. Is this you are looking for??
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
// $('#ff').load('things.html');
location.reload();
});
});
Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes.
After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
This is a simple example to call a JS function when a button is clicked. In this code I used the onclick method, but I want to learn how to call the same method using jQuery instead.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#but").click(
doubleSize($("#inpt").val()); // **maybe not correct here**
);
});
function doubleSize(x)
{
//some code make a number double size
}
</script>
</head>
<body>
<input id="inpt" type="text">
<button id="but" type="button" onclick="doubleSize(document.getElementById('inpt').value)" >click me !!</button>
<div><span id="result"></span>
</div>
</body>
</html>
Replace
$("#but").click(
doubleSize($("#inpt").val()); // **maybe not correct here**
);
with
$("#but").click(function() {
doubleSize($("#inpt").val());
});
Now it should work. The trick is that .click function has callback function which controlls doings after click, and you now learned to use it.
Check my fiddle.
Find more on api.jquery.com/click.
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!
i have a form and when i append another field to it i cant use this in my other function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".registerNums").click(function(){
$("#hello").append('<input type="button" value="register" class="inputMems">');
});
$(".inputMems").click(function(){
alert("hi")
});
});
</script>
</head>
<body>
<div>
<form>
<div id="hello"></div>
<input type="button" value="register mems" class="registerNums">
</form>
</div>
</body>
</html>
look my inputMems button doesnt work : http://jsfiddle.net/Yelesee/3uecqLxn/
To bind events in dynamic content you need to use
$(parent_selector).on(event, selector, callback);
So, essentially it adds the event to the parent element and checks the e.target and fires the event if it matches your selector.
So, in your case you can use,
$('#hello').on('click', '.inputMems', function(){
///do here
});
One more thing you can do is attaching the event listener AFTER the new dom has been created.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".registerNums").click(function(){
$("#hello").append('<input type="button" value="register" class="inputMems">');
});
$("#hello").on('click','.inputMems',function(){console.log("hi");});
});
</script>
</head>
<body>
<div>
<form>
<div id="hello"></div>
<input type="button" value="register mems" class="registerNums">
</form>
</div>
</body>
</html>
Since you are dynamically adding the DOM element with reference to id = hello,
The click() wont work. It will work for the elements that already exist. It won't get bound to elements created dynamically. To do that, you'll have to create a "delegated" binding by using on().
Replace your click event
$(".inputMems").click(function(){
alert("hi")
});
to this!
$("#hello").on("click", "input.inputMems", function(){
alert("Here u go!");
});
JSFIDDLE
As an alternative to the other answers you can define the click handler when you create the element. Although i do recommend to use .on('click', function(){});
$(document).ready(function() {
$(".registerNums").click(function() {
var newInput = $('<input type="button" value="register" class="inputMems">');
newInput.click(function() {
alert("hi")
});
$("#hello").append(newInput);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<div id="hello"></div>
<input type="button" value="register mems" class="registerNums">
</form>
</div>
You have insert
$(".inputMems").click(function(){
alert("hi")
});
inside $(".registerNums").click(function(){
$("#hello").append('<input type="button" value="register" class="inputMems">');
});
.
It should be like this
$(document).ready(function(){
$(".registerNums").click(function(){
$("#hello").html('<input type="button" value="register" class="inputMems">');
$(".inputMems").click(function(){
alert("hi");
});
});
});