Assign a function to a single letter within jQuery - javascript

I need to make the letter "x" clickable and ad a function that removes the text that this line below creates.
$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");
$(document).ready(function() {
$("#hello").click(function() {
$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");
$("#webpage").prepend("<li>Why hello there!!</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
$("#goodbye").click(function() {
$("#user").prepend("<li>Goodbye!</li>");
$("#webpage").prepend("<li>Goodbye, dear user!</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
$("#stop").click(function() {
$("#user").prepend("<li>Stop copying me!</li>");
$("#webpage").prepend("<li>Sorry, i meant no offense.</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="CSS/bootstrap.css" rel="stylesheet" type="text/css">
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
<script src="jQuery/jQuery.js"></script>
<script src="talk.js"></script>
<title>Talk to the web page</title>
</head>
<body>
<div class="container">
<h1>Talk to the web page</h1>
<p>Click a button to say something to the web page. See what it says back!</p>
<button class="btn btn-primary" id="hello">Say "hello"</button>
<button class="btn btn-inverse" id="goodbye">Say "goodbye"</button>
<button class="btn btn-danger" id="stop">Say "stop copying me!"</button>
<div class="row">
<div class="col-md-6">
<h2>You said:</h2>
<ul class="unstyled" id="user">
</ul>
</div>
<div class="col-md-6">
<h2>The web page said back:</h2>
<ul class="unstyled" id="webpage">
</ul>
</div>
</div>
</div>
</body>
</html>
a clickable letter that removes the text this line above creates.


Create one click event that uses .on (since dynamic content and what not) and remove the parent li element:
$("#user").on("click", "span.clickable", function() {
$(this).parent("li").remove();
});
Also use the class clickable and not the ID (I assume you have more than 1);

Related

Add a JS click event on a CoreUI element on .c-class-toggler

Question
How can I add an additional click event on a CoreUI element.
As far as my debugging goes, the main problem is that CoreUI a lot of event.stopPropagation(); uses. This seems to destroy any further added click event.
Workaround
A hack I found was to comment out line 2293 in the coreui.js.
It's interesting, as this seams to be changed with Version 3.3.0. Even more confusing is, that version "3.2" (really 3.2.2) on https://unpkg.com has already this changes (s. code snippet below).
Example
In the code snippet you can see that the menu opens/closes correctly but the additional click event doesn't get trigger.
$(document).ready(function () {
// Trigger when sidebar change, only works with hack of coreui.js
$(document).on('click', '.c-class-toggler', function (event) {
console.log('hello world!');
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://unpkg.com/#coreui/coreui#3.2/dist/css/coreui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/css/perfect-scrollbar.min.css" rel="stylesheet"/>
<body class="c-app">
<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">
<div class="c-sidebar-brand d-md-down-none">
<a class="c-sidebar-brand-full h4" href="#">
Example
</a>
</div>
<ul class="c-sidebar-nav ps m-4">
<li class="c-sidebar-nav-item"><h3>Menu<h3></li>
</ul>
</div>
<div id="app" class="c-wrapper">
<header class="c-header c-header-fixed px-3">
<button class="c-header-toggler c-class-toggler d-lg-none" type="button" data-target="#sidebar" data-class="c-sidebar-show">
Menu
</button> <pre class="ml-2 mt-4"><- additional click event is not working</pre>
<button id="test" class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">
Menu
</button>
<ul class="c-header-nav ml-auto">
</ul>
</header>
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h2>Content</h2>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script>
<script src="https://unpkg.com/#coreui/coreui#3.2/dist/js/coreui.min.js"></script>
</body>
Note: It seems like I'm not the only one with this issue: https://github.com/coreui/coreui/issues/155

I just run again over my question, the whole thing works also without my described hack.
The trick is to hook on existing JS events.
The debugger console normal show you the exciting events, eg. in case of the sitebar there is a classtoggle event you can hook on (s. example in jsfiddle or below).
One issue withe coreui is that the events have often different names to the normal bootstrap events.
$(document).ready(function () {
// Triggers when existing sidebar events are called
$('#sidebar').on('classtoggle', function (event) {
console.log('hello world!');
$('.working').append('!');
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://unpkg.com/#coreui/coreui#3.2/dist/css/coreui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/css/perfect-scrollbar.min.css" rel="stylesheet"/>
<body class="c-app">
<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">
<div class="c-sidebar-brand d-md-down-none">
<a class="c-sidebar-brand-full h4" href="#">
Example
</a>
</div>
<ul class="c-sidebar-nav ps m-4">
<li class="c-sidebar-nav-item"><h3>Menu<h3></li>
</ul>
</div>
<div id="app" class="c-wrapper">
<header class="c-header c-header-fixed px-3">
<button id="test" class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true"> Menu
</button>
<button class="c-header-toggler c-class-toggler d-lg-none" type="button" data-target="#sidebar" data-class="c-sidebar-show">
Menu
</button> <pre class="working ml-2 mt-4"><- additional click event works when hooked to existing events</pre>
</header>
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h2>Content</h2>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script>
<script src="https://unpkg.com/#coreui/coreui#3.2/dist/js/coreui.min.js"></script>
</body>

Add and remove rows in a form with unique id's that returns an object as an array

I already have my own solution for this problem, but then I don't know if I'm using the best techniques/practices to solve this particular scenario, which involves removing and adding DOM elements with unique id's.
I have just used jQuery, the requirements where only a button to add any amount of rows, once another row is added be able to delete that row too, the first row is always mandatory, here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>Simple form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
label{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="row inputRows">
<div class="col-sm-12" id="newRow-1">
<label>Some label over input</label>
<input type="text" name="txt">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button id="addRow"><span class="fa fa-plus"></span> Add </button>
<button id="viewInfo"><span class="fa fa-plus"></span> Info </button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p id="result">
</p>
</div>
</div>
</div>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
$('.inputRows').on('click', 'button' ,function(){
$(this).parent().remove();
});
$('#addRow').click(function(){
var $newRow = $('div[id^="newRow"]:first').clone(),
newId = Number($('div[id^="newRow"]:last').attr('id').split('-')[1]) + 1;
$newRow.append('<button><span class="fa fa-trash-o"></span></button>');
$newRow.find('input').val('');
$newRow.attr('id','newRow-' + newId);
$('.inputRows').append($newRow);
});
$('#viewInfo').click(function(){
$('#result').text(JSON.stringify(objectifyForm($('div[id^="newRow"]'))));
});
function objectifyForm(formArray) {
var resultArray = {},
inputValue = '';
for (var i = 0; i < formArray.length; i++){
inputValue = $(formArray[i]).find('input').val();
if(inputValue){
resultArray[$(formArray[i]).attr('id')] = inputValue;
}
}
return resultArray;
}
</script>
</body>
</html>
So the code works, the only problem I see is that the numeration of the id's, can sometimes be 1,5,8,7,6,12 depending on which ones you delete, but then it's fine because in the end, it doesn't even matter (joke, RIP Chester, but kind of true). My main concern or question is, is there any other way of achieving this more efficiently using jQuery? Am I doing something wrong by cloning the first element multiple times? If you can share some knowledge on DOM manipulation that would be great.
Thanks in advance,
Leo.

How to detect which button is clicked in Jquery

i have code like this :
#foreach(....)
<div class="col-md-3">
<div class="thumbnail">
<!-- content --!>
<button class="btn btn-success btnEdit">Edit</button>
</div>
</div>
#endforeach
and i tried like this in my jquery
$(".btnEdit").on("click", function(){
alert("clicked");
});
but if i clicked the button, the alert never showed up, how to solve my case??
*note : sorry if question like this was discuss before
thanks

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="col-md-3">
<div class="thumbnail">
<button class="btn btn-success btnEdit">Edit</button>
</div>
</div>
</body>
<script>
$(".btnEdit").on("click", function(){
alert("clicked");
});
</script>
The alert works fine.Have you added jquery plugins to your code?

Have you included jquery? Try to wrap it using $(document).ready(function(){})
$(document).ready(function(){
$(".btnEdit").on("click", function(){
alert("clicked");
});
});

Answer for headline question:
How to detect which button is clicked in jQuery
<tr><td>...<button class="btn btn-success btnEdit">Edit</button>...</td></tr>
<tr><td>...<button class="btn btn-success btnEdit">Edit</button>...</td></tr>
<tr><td>...<button class="btn btn-success btnEdit">Edit</button>...</td></tr>
$(document).ready(function(){
$(".btnEdit").on("click", function(){
var $button = $(this);
});
});
Can be used for handling listed parts (rows ...)

add content to page from form input - jquery

I'm trying to create a simple "to do" app that is built via jquery.
The idea is to have a form input that will accept a string, have that string become a variable that will then be added to a "list" as a new "item." The problem is that these new items (that should appear as new HTML p elements) are not showing up once the Submit button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron">
<h1>To Do List</h1>
<form role="form">
<div class="form-group">
<input type="text" class="form-control" id="listInput" placeholder="add items here">
</div>
<div class="button">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
<br/>
<p class="list">
</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JQUERY:
$(document).ready(function(){
$(".button").click(function(){
var add = $('input[name=listInput]').val();
$('.list').append('<p class="item">' + add + '</p>');
});
$(document).on('click','.item', function() {
$(this).remove();
});
});
THE JSFIDDLE IS HERE: http://jsfiddle.net/EUq8P/2/

The problem is the button is a submit button which causes the pages to refresh on click by the default action of the button
Also there is problem with the input field selector, your selector will not work because the input field does not have the name listInput, it has the id listInput, so you need to use id-selector
One solution is to prevent the default action of the button by calling the preventDefault() method of the event
$(document).ready(function () {
$(".button").click(function (e) {
e.preventDefault()
var add = $('#listInput').val();
$('.list').append('<p class="item">' + add + '</p>');
});
$(document).on('click', '.item', function () {
$(this).remove();
});
});
Demo: Fiddle
Another is to change the type of the button from submit to button
Demo: Fiddle

Working demo http://jsfiddle.net/8XfQT/
culprit was: var add = $('input[name=listInput]').val();
it should be var add = $('input[id=listInput]').val();
Hope rest help you out :)
code
$(document).ready(function () {
$(".button").click(function () {
var add = $('input[id=listInput]').val();
$('.list').append('<p class="item">' + add + '</p>');
});
$(document).on('click', '.item', function () {
$(this).remove();
});
});

Countdown script not starting countdown

Can someone please tell me why the countdown function is not working properly (the countdown is not starting in the div with the I.D. "countdown"). Probably something real simple, but Javascript isn't my forte. This is the countdown plugin I am using: http://keith-wood.name/countdown.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/web-style-second.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="chrome://mozbar/skin/css/injected.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="content">
<div class="center">
<center>
<div></div>
</center>
</div>
<script type="text/javascript">
$(function() {
$('#countdown').countdown({
until: '14min+20sec',
format: 'MS',
layout: '{mnn}min ' + '{snn}sec ',
onExpiry: function() {
$(".hidden").css("display", "block");
}
});
});
</script>
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 class="hasCountdown" id="countdown">14min 20sec </h4>
</div>
<form name="signupFrm" id="signupFrm" action="#" method="post" class="hidden">
<div>
<div class="yellow_red">
<h1></h1>
</div>
<div class="center">
<a href="https://www.testing.com" class="btn_buy_now">
Get Started</a>
</div>
<input name="submit" value="submit" type="hidden">
<p class="mb_5"> </p>
</div>
</form>
<div class="fnote justify">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

You should put the $(function () ...) script into the <head> tag of your HTML page. This way, the countdown will be initiated once the DOM has fully loaded.

I think that the problem is that you are missing the reference to the "jQuery Countdown CSS". In the usage instructions of the plugin it says:
Download and include the jQuery Countdown CSS and JavaScript in the
head section of your page. #import
"jquery.countdown.css";
But you can still make it work without the "jQuery Countdown CSS" if you remove the class attribute from the <h4> element with the id "countdown", like this:
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 id="countdown">14min 20sec </h4>
</div>
​JSFiddle Example

The countdown plugin uses the class hasCountdown to test whether the countdown has already been instantiated, so you should use a different class name.
From jquery.countdown.js:
/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'

Categories