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>
Related
I need to display a dialog box based on user input, and I'm implementing the Zebra dialog plug-in to help with this.
I can get a generic dialog to show up when the user clicks a button, but no matter what I do, I can't get the Javascript to see the HTML text box, let alone the data inside it.
I have created a test page for this. See below.
Here is the HTML/PHP code (index.php):
<head>
<!-- Style for Zebra Dialog boxes -->
<link rel="stylesheet" href="zebra/zebra_dialog.css" type="text/css">
</head>
<header>
<h1>Testing My Dialogs and Alerts</h1>
</header>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$myTyping = trim($_POST["myTyping"]);
// Display what the user typed in a dialog. Is there some code that needs to go here?
}
?>
<form id="form_to_submit" action="index.php" method="POST">
<fieldset>
<label>Type anything you want:</label>
<input type="text" name="myTyping" id="myTyping">
<button type="submit" id="click">Click Here to show alert and see what you typed.</button>
</fieldset>
</form>
<!-- Link to jQuery file so any plug-ins can work
Including the production version here. Can also download one for better debugging. -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<!-- Link to Zebra Dialog box code -->
<script type="text/javascript" src="zebra_dialog.js"></script>
<!-- Link to My Javascript code -->
<script type="text/javascript" src="myTestScripts.js"></script>
</body>
And here is the Javascript code (myTestScripts.js). I have tried 3 different ways to get the user's input and display it, but "getElementById" never works. Is it not rendered yet? I tried putting in prevent default code, but that makes no difference.
/* javascripts */
// FIRST TRY
$(document).ready(function() {
// show a dialog box when clicking on a button
$("#click").bind('click', function(e) {
//e.preventDefault();
$.Zebra_Dialog('The link was clicked!');
**var myInputElement = document.getElementById("myTyping"), // This doesn't get the element, always is null**
myInput = myInputElement.innerText;
console.log("myInputElement: " + myInputElement);
console.log("myInput: " + myInput);
$.Zebra_Dialog('Here is what you typed:', myInput);
});
});
// SECOND TRY
$('#form_to_submit').submit(function(e) {
console.log("inside form_to_submit");
**var myInputElement = document.getElementById("myTyping"), // also returns null**
myInput = myInputElement.innerText;
console.log("myInputElement: " + myInputElement);
console.log("myInput: " + myInput);
$.Zebra_Dialog('Here is what you typed:', myInput);
console.log("leaving form_to_submit");
});
// THIRD TRY
window.onsubmit = function (e) {
console.log("inside window.onsubmit, preventing default");
//e.preventDefault();
**var myInputElement = document.getElementById("myTyping"), // also returns null**
myInput = myInputElement.innerText;
console.log("myInputElement: " + myInputElement);
console.log("myInput: " + myInput);
$.Zebra_Dialog('Here is what you typed:', myInput);
console.log("leaving window.onsubmit");
}
You element is a input so innerText will not work.
Instead of
var myInputElement = document.getElementById("myTyping"),
myInput = myInputElement.innerText;
try
var myInputElement = document.getElementById("myTyping"),
myInput = myInputElement.value;
or simply
var myInput = document.getElementById("myTyping").value;
Take a look at input text object properties here
Use jQuery:
$(document).ready(function() {
// show a dialog box when clicking on a button
$("#click").bind('click', function(e) {
e.preventDefault();
$.Zebra_Dialog('Here is what you typed: '+$("#myTyping").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<!-- Style for Zebra Dialog boxes -->
<link rel="stylesheet" href="http://dynabitlab.it/extensions/demo_virtuemart/modules/mod_vavmm/admin/zebra/css/flat/zebra_dialog.css" type="text/css">
</head>
<header>
<h1>Testing My Dialogs and Alerts</h1>
</header>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$myTyping = trim($_POST["myTyping"]);
// Display what the user typed in a dialog. Is there some code that needs to go here?
}
?>
<form id="form_to_submit" action="index.php" method="POST">
<fieldset>
<label>Type anything you want:</label>
<input type="text" name="myTyping" id="myTyping">
<button type="submit" id="click">Click Here to show alert and see what you typed.</button>
</fieldset>
</form>
<!-- Link to jQuery file so any plug-ins can work
Including the production version here. Can also download one for better debugging. -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<!-- Link to Zebra Dialog box code -->
<script type="text/javascript" src="zebra_dialog.js"></script>
<!-- Link to My Javascript code -->
<script type="text/javascript" src="http://dynabitlab.it/extensions/demo_virtuemart/modules/mod_vavmm/admin/zebra/javascript/zebra_dialog.js"></script>
</body>
I tried to do a simple slider but that did not work, so i am copying one of code cademy, but it still qont work.
I have used 4 different browsers all have the same problem, i can type in the box but wont post, and show below.
PLEASE HELP?
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link type='text/css' href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
AMMENDED
script.js
$(document).ready() {
$('.btn').click(function() {
var post = $('.status-box').val()
$('<li>').text(post).prependTo('posts');
});
};
THANK YOU ALL, this has been corrected and it now works :)
val is a jQuery function ... you need () to invoke it so it returns the value of element. As your code stands now you are trying to set a function object as text.
You are also using incorrect selectors $('btn') and $('status-box') which are looking for non existent tags <btn> and <status-box>.
Add dot prefix for both to represent class:
$('.btn') and $('.status-box')
As well as what's been mentioned in the other answer, I don't believe your main method is ever called. If it isn't called then the event handler isn't going to be attached.
The main method would be easier set up via jquery, so instead of:
var main = function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
}
Just do:
$(function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
});
Alternatively you could adjust your body tag as follows:
<body onload="main()">
I am trying to test for the filling out of an HTML form and the subsequent change of an HTML elements Text. I need to create some form of event using jasmine-jquery...
HTML
<div class="response" id="text-response">Unknown</div>
<div class="form-holder">
<form>
<input id="input-text" type="text" name="user-input" placeholder="Test Your Text" value="">
<input id="submit-button" type="submit" value="Submit">
</form>
</div>
I am trying to test drive id='text-response' changing to 'Correct' based on some script logic.
describe('Interface logic', function(){
it('Will return correct if logic applies', function(){
expect('#emotion').toContainText('Correct');
});
});
Any help would be much appreciated
You might just need to trigger an event, for example:
$('#submit-button').click();
That should fire the click event. Then you can check for whatever condition this event changes on the page.
$('#submit-button').click();
Was the solution for me but the spec runner constant refresh is because you're hitting http://localhost:3000/specs/ rather than http://localhost:3000/SpecRunner.html
If you have your form html in a separate template in a file named for example
templates/form.tmpl.html
and your jquery in a separate file also named for example
js/validation.js
And containing validation code like
$(".form-holder").on("submit", function() {
event.preventDefault();
var userInput = $('#input-text').val();
if (userInput === 'the correct text') {
$('#text-response').text('Correct');
return;
}
$('#text-response').text('Incorrect');
});
Then your test spec can be something similar to this
describe('Interface logic', function() {
jasmine.getFixtures().fixturesPath = '';
beforeEach(function() {
loadFixtures('templates/form.tmpl.html');
appendSetFixtures('<script src="js/validation.js"></script>')
});
it('Will return correct if logic applies', function(){
$('#input-text').val('the correct text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Correct');
});
it('Will return incorrect if logic applies', function(){
$('#input-text').val('the incorrect text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Incorrect');
});
});
And the spec runner html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Spec Runner</title>
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.3/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine-html.js"></script>
<script src="lib/jasmine-2.2/boot.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="lib/jasmine-jquery.js"></script>
<script type="text/javascript" src="specs/form.spec.js"></script>
</head>
<body>
</body>
</html>
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!
Why could the same action when turned into a function stop working? are there any general rules? here is a very concrete and clear example of this issue.
jQuery Mobile, http://jsbin.com/osovoh/2/edit
in this version, js works well. the label of radio button gets changed instantly.
var radio_elem = $('#edit-new-amount-no-cost');
$("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
but if you remove the /* s and thus turn the same action into a function triggered by the other button,
function go() {
var radio_elem = $('#edit-new-amount-no-cost');
$("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
}
the the same code messes formatting of the destination. what's wrong?
If it is inside of the function, the markup change happens AFTER jQuery Mobile renders the page. You'll have to cause jQuery Mobile to re-render the page or element you are modifying.
here is the answer:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="WORKING: replace text in radiobutton" />
<meta charset=utf-8 />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body style="text-align:center">
<div class="form-radios">
<div class="form-item" id="edit-new-amount-no-cost-wrapper">
<label class="option" for="edit-new-amount-no-cost" >
<input type="radio" id="edit-new-amount-no-cost" name="new_amount" value="no_cost" class="form-radio"/>
original label
</label>
</div>
</div>
<input name="click to change the label" type="button" onClick="go()">
<script>
function go(){
$("label[for='edit-new-amount-no-cost'] .ui-btn-text").html("label changed");
}
</script>
</body>
</html>