I'm trying to make a list that allows a user to submit issues. Im using knockout and i can get it to do exactly what i wanted it to do but when i try to debug in microsoft visual studios it does not work they way I want it to. When I debug, the page opens the same as in the fiddle except the "test issue" is missing from the issue list. Also you can type in the add issue text box but when you hit submit it clears and does not add to the issue list
I was told I needed to add an onready, but im still new to learning how to code and am unsure of
A.How to do it
B. Where to put it
Here is my fiddle
http://jsfiddle.net/grahamwalsh/rCB9V/
and here is my code
IssueList ( html )
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Issue List</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />
</head>
<body>
<div class='issuelist'>
<form data-bind="submit:addIssue">
Add Issue: <input type="text" data-bind='value:issueToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: issueToAdd().length > 0">Add</button>
</form>
<p>Your Issues:</p>
<select multiple="multiple" height="5" data-bind="options:allIssues, selectedOptions:selectedIssues"> </select>
<div>
<button data-bind="click: removeSelected, enable: selectedIssues().length > 0">Remove</button>
<button data-bind="click: sortIssues, enable: allIssues().length > 1">Sort</button>
</div>
</div>
</body>
</html>
Css
body { font-family: arial; font-size: 14px; }
.issuelist { padding: 1em; background-color: #87CEEB; border: 1px solid #CCC; max-width: 655px; }
.issuelist input { font-family: Arial; }
.issuelist b { font-weight: bold; }
.issuelist p { margin-top: 0.9em; margin-bottom: 0.9em; }
.issuelist select[multiple] { width: 100%; height: 8em; }
.issuelist h2 { margin-top: 0.4em; }
js
var Issuelist = function () {
this.issueToAdd = ko.observable("");
this.allIssues = ko.observableArray(["test"]);
this.selectedIssues = ko.observableArray(["test"]);
this.addIssue = function () {
if ((this.issueToAdd() != "") && (this.allIssues.indexOf(this.issueToAdd()) < 0))
this.allIssues.push(this.issueToAdd());
this.issueToAdd("");
};
this.removeSelected = function () {
this.allIssues.removeAll(this.selectedIssues());
this.selectedIssues([]);
};
this.sortIssues = function () {
this.allIssues.sort();
};
};
ko.applyBindings(new Issuelist());
To run a function when the page is ready using jQuery:
$(document).ready(function(){
//Code goes here
}
Related
so here is the thing i have a block of html code that needs to be replaced when a button is clicked. Its no big deal using
$('div.myCustomReplacer').replaceWith(newHTML);
but i also need to render a django-form {{ form }} in the new HTML
when i simply use
<div class="NewDiv"> {{ form }} </div? the html is rendered as "{{ form }}" because of those quotes the form is not rendered.
So how i do remove those ?
sorry just new to JavaScript.
I don't think you can achieve it like that. Remember that the form is added when html is rendered in the server, so basically {{form}} doesn't exist in client.
No worries, there are several simple ways to reach you goal just using simple JavaScript. One way is to simple let server inject the form, and just make it visible when user click button. Take a look at the example I made for you.
document.getElementById('showBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'block';
});
document.getElementById('hideBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'none';
});
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
button {
margin: 1rem;
}
section {
margin: 1rem;
}
section span {
background-color: lightcoral;
font-size: small;
padding: .5rem;
}
<!doctype html>
<html lang="en">
<head>
<title>Hide Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<button id="showBtn">Show Form</button>
<button id="hideBtn">Hide Form</button>
<section>
<div id="targetDiv" style="display: none;">
<h2>Form <span> (a moment ago I was just hidden)</span></h2>
<form>
<label for="someInput">Bla bla</label>
<input id="someInput" type="text"/>
</form>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>
I give. I can't seem to get the jsfiddle code to work when I transfer it to dreamweaver? I must be missing something simple?? It works fine in jsfiddle. I added the ready function as opposed to the onload, but it still is not working.
$("document").ready(function() {
var h1 = $('div#greeting h1');
h1.hide().contents().each(function() {
var words;
if (this.nodeType === 3) {
words = this.data.split(/\s+/).map(function(w) {
return '<span>' + w + '</span>';
}).join('');
$(this).replaceWith(words);
} else if (this.nodeType === 1) {
$(this).html($(this).html().split(/\s+/).map(function(w) {
return '<span>' + w + '</span>';
}).join(''));
}
});
h1.find('span').hide().each(function() {
if (!$.trim(this.innerHTML)) {
$(this).remove();
}
});
$('#start').on('click', function() {
h1.show().find('span').each(function(i, e) {
h1.queue(function(next) {
$.when($(e).fadeIn(150).fadeOut(150)).done(next);
});
});
});
$('#stop').on('click', function() {
h1.finish();
});
$('#reset').on('click', function() {
h1.finish();
});
.box {
border: 1px solid #E38E34;
background-color: #FFE7BF;
height: 150px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
#title {
margin: 5px;
border-bottom: 1px solid #E38E34;
color: #C46908;
font-weight: bold;
}
#message {
margin: 5px;
}
h1 {
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
<title>TedsCode</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="speedread.js"></script>
</head>
<body>
<div class="box" />
<div id="title"><span id="name">Title</span>
</div>
<div id="message" />
<div id="greeting" />
<input type="button" value="Read" id="start" />
<input type="button" value="Stop" id="stop" />
<input type="button" value="Reset" id="reset" />
<h1><center>This is a test to see if this script displays one word at a time and functions correctly.</center></h1>
</body>
</html>
You hava a syntax error in js.
I comment on something: add "});" to js, and remove redundant reference of jquery.
Code snippet works now
I can see two things:
1-Why are you using two version of jquery at the same time 1.9.1 and 2.1.0?
2-In the code you paste, the $("document").ready(function() {
isn't properly closed
Are you receiving any error in the console or the network ?
I take a script from jsfiddle, and obviously it work, but when i try to run it locally, it stops to work. I read in another question that to use jsfiddle code, I need to put my script into:
$(document).ready(function() {
});
I do it for the following code, but it doesn't work even. Can someone please help me?
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
$('#btnName').click(function(){
var text = $('#inputName').val() + '<button>x</button>';
if(text.length){
$('<li />', {html: text}).appendTo('ul.justList')
}
});
$('ul').on('click','button' , function(el){
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>
Two reasons:
Because you haven't included jQuery on the page. You need
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
somewhere before your script (with that path or some other valid path to jQuery).
The quotes here
<script type=”text/javascript”>
are fancy quotes. They must be normal quotes. Or, best practice, just don't include the type at all; JavaScript is the default.
It's also worth formatting your code in a reasonable, consistent way.
E.g.:
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {
$('#btnName').click(function() {
var text = $('#inputName').val() + '<button>x</button>';
if (text.length) {
$('<li />', {
html: text
}).appendTo('ul.justList')
}
});
$('ul').on('click', 'button', function(el) {
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>
The Goal:
A button which displays an alert with "Hello world!" and some radio buttons which display a warning when the third one is selected.
The HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>hello world</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="">
</head>
<body>
<div id="main">
<p>text</p>
link
<button>button</button>
<form>
<fieldset>
<legend>Legend</legend>
<label for="radio1">Option 1</label>
<input type="radio" name="radio-buttons" value="option-1" id="radio1"/>
<label for="radio2">Option 2</label>
<input type="radio" name="radio-buttons" value="option-2" id="radio2"/>
<label for="radio3">Option 3</label>
<input type="radio" name="radio-buttons" value="option-3" id="radio3"/>
<p id="warn">No, pick another one.</p>
</fieldset>
</form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The CSS:
Most of this really doesn't matter. The important thing is #warn which is supposed to only show when the third option is selected.
a,
button {
display: block;
margin-bottom: 1em;
}
fieldset {
width: 245px;
height: 75px;
background: #dfe;
position: relative;
}
legend {
background: white;
}
#warn {
display: none;
background: #d33;
color: #fff;
font-family: helvetica;
padding: 10px 15px 10px;
margin: 0 -12px;
position: absolute;
top: 52px;
width: 239px;
}
The JavaScript:
I think the problem is in my event handlers, but I don't know for sure. BTW yes I know there's some extraneous stuff here; like I said I'm just screwing around.
// variables
var p = document.getElementsByTagName("p");
var a = document.getElementsByTagName("a");
var button = document.getElementsByTagName("button");
var fieldset = document.getElementsByTagName("fieldset");
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var radio3 = document.getElementById("radio3");
var warn = document.getElementById("warn");
// functions
function prepareEventHandlers() {
button.onclick = function() {
alert("Hello world!")
};
radio3.onfocus = function() {
warn.setAttribute("display","inherit")
}
}
// window onload
window.onload = function() {
prepareEventHandlers();
}
Notice the name of the function:
document.getElementsByTagName()
// ^ That's an "s", so the function
// returns an array of elements.
button.onclick won't work because button is an array of buttons (I would name it buttons), so you have to iterate:
for (var i = 0; i < button.length; i++) {
button[i].onclick = ...
}
Since you have only one button, I would just give it an id and use document.getElementById() to fetch the single button and attach the onclick handler.
First, go fo button like this,
var button = document.getElementsByTagName("button")[0];
getElementsByTagName returns the array of matched elements...
For radio button
Try this
display is a CSS property. Using display as an HTML attribute will not hide or show content. You have to access CSS properties using style attribute. like,
radio3.onclick = function() {
warn.style.display = "inherit";
}
HTML Code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.msg_body
{
display: none;
}
</style>
<script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".msg_head").click(function () {
$(this).next(".msg_body").slideToggle();
})
$(".msg_headRoot").click(function () {
$(this).next(".msg_bodyRoot").slideToggle();
})
.toggle(function () {
$(this).children("span").text("[+]");
}, function () {
$(this).children("span").text("[-]");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="msg_headRoot" style="cursor: pointer;">
<p class="msg_headRoot" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
<span>[+] </span>Root
</p>
<div class="msg_bodyRoot">
<div class="msg_head" style="cursor: pointer;">
<p class="msg_head" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
<span>[+] </span>Hello
</p>
<div class="msg_body">
Div text
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Query
Right now it is keeping the div opened. I want to keep the div closed by default and user should click the plus to open it.
EDIT
Forgot to mention the root div. I have actually one nested div. I meant on click the plus of outer dive should open the inner div
CSS:
.msg_body, .msg_bodyRoot {display: none;}
Updated JS:
$(document).ready(function() {
var toggler = function(elem) {
elem.slideToggle(500, function() {
if (elem.is(':visible')) {
elem.parent().find("p:first > span").text("[-]");
} else {
elem.parent().find("p:first > span").text("[+]");
}
});
};
$('div.msg_headRoot').click(function(e) {
toggler($(this).children(".msg_bodyRoot"));
e.preventDefault();
return false;
});
$("div.msg_head").click(function(e) {
toggler($(this).children(".msg_body"));
e.preventDefault();
return false;
});
});
Working fiddle: http://jsfiddle.net/N9E9b/2/
Add some CSS to your markup:
.msg_body { display: none; }
You are missing a semi-colon, and no toggle on the inner part. I made some assumptions on my part that the root should work with its child and the inner with its child. I surely hope I have not made an oversimplification of what you want here.
EDIT: REMOVED BAD CODE THAT HAD BUGS
Just to follow up with the simpler: (and fix a minor issue with +/- text in prior version)
$(document).ready(function() {
$(".msg_head,.msg_headRoot").click(function() {
$(this).next(".msg_body").slideToggle();
var clickp = $(this).children("span:contains('+')");
var clickm = $(this).children("span:contains('-')");
clickp.text("[-]");
clickm.text("[+]");
});
});
<div>
<p class="msg_headRoot"><span>[-] </span>Root</p>
<div class="msg_body">
<p class="msg_head"><span>[+] </span>Hello</p>
<div class="msg_body">Div text</div>
</div>
</div>
.msg_headRoot,.msg_head{margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold; cursor:pointer;}
.msg_body div.msg_body{display:none;}
Example here: http://jsfiddle.net/ykRaY/3/