jquery function (.on) not working - javascript

Ive got some problem with my jquery function. First of all, this is my HTML head
<link href="css/bootstrap.css" media="screen" rel="stylesheet">
<link href="css/datepicker.css" media="screen" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js" type= 'text/javascript'></script>
<script src="js/bootstrap-tooltip.js" type= 'text/javascript'></script>
<script src="js/buttons.js"></script>
and here is the code from my button.js file
$(window).load(
function(){
...
$(document).on('click', '.popover a', function(){
alert("asd");
});
$('#button_nowtime').popover({
trigger: 'click',
html: 'true',
title: "<b>Čas</b>",
content:
function() {
var returnstring="",button;
for(var i=0; i<files.length; i++){
button = document.createElement("a");
button.innerText = "someText"
button.href="#";
returnstring+=button.outerHTML;
}
return returnstring;
}
});
}
);
html
<a href="#" id="button_nowtime" class="btn btn-lg btn-danger" data-placement="bottom" data-toggle="popover" title="" >N/A</a>
the problem is, the alert("asd") wont pop up when I click on any button in the tooltip

You should use $.ready instead of window.load, probabily your code doesn't work because window.load occurs before your objects exist. http://www.dotnetbull.com/2013/08/document-ready-vs-window-onload.html
This sample works http://jsfiddle.net/nWKqt/
[ignore this - just including a code block so stackoverflow will let me post the above JSFiddle link. Yeah, seriously.]
Also, you wrote a code that depends on a class that is defined not by you but from a jquery plugin, which you fire after you declared the events.
Try to put the click event after you declared the popover plugin, but better would be to define your cssClass and depend on it.

Why dont use this:
$(".popover a").click( function(){
alert("asd");
});
the old method works fine ..

Related

$(…).tagsinput is not a function

EDIT: I can only call tagsinput() if I do not use tagsinput() in a callback
This is still a problem, because I need to call tagsinput() in a callback.
ORIGINAL:
I have not been able to find an answer that solves my issue yet:
I am trying to use this library: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
my HTML file includes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<!-- Bootstrap CDN links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="script.js"></script>
<select id="el" data-role="tagsinput" name="el" multiple ></select>
in script.js (which is connected to multiple HTML files, but the one in question is included above):
function addTagToInput() {
$('#el').tagsinput('add', 'item2');
}
After trying to call addTagToInput(), I get $(…).tagsinput is not a function even though the CDN JS file was properly loaded.
The deciding question is still how exactly do you initialize your tagsinput()?
Also I think that you get some other errors like network problems or something else, so that the tagsinput or jQuery library will not load. The following code works correctly and I've created a button whose click event triggers the addTagToInput() function:
$(function() {
var $el = $('#el'),
$btnAddTag = $('#add-tag');
function initInput() {
$el.tagsinput({
// add a custom class which run with bootstrap v4
tagClass: 'badge-dark'
});
}
function addTagToInput() {
$('#el').tagsinput('add', 'item' + Math.floor(Math.random() * 100));
}
initInput();
addTagToInput();
$btnAddTag.on('click', addTagToInput);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<button type="button" class="btn btn-dark" id="add-tag">+</button>
<!-- because of adding the initInput() function in jQuery I've deleted the data-role="tagsinput"-->
<select id="el" name="el" multiple ></select>

Load & Unload Stylesheet on Key Press [duplicate]

What I'm working on is simple.
You click on a button (id="themes") and it opens up a div (id="themedrop") that slides down and lists the themes. (I only have two at this point)
<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>
Now when the site is loaded it loads with style1.css (main/original theme)
<link rel="stylesheet" type="text/css" href="style1.css">
Now what I'm trying to figure out is...
How can I have it that when the grayscale button is clicked to change the stylesheet from style1.css to style2.css (note: files are in the same directory)
Any help would be much appreciated.
$('#grayscale').click(function (){
$('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
$('link[href="style2.css"]').attr('href','style1.css');
});
Give this a try but not sure if it will work I have not tested it but gd luck.
I would suggest you give the link-tag an id such as theme. Put the name of the css file in a data-attribute on the buttons and use the same handler on them both:
Html:
<link id="theme" rel="stylesheet" href="style1.css">
<button id="grayscale" data-theme="style2.css">Gray Theme</button>
And js:
$("button[data-theme]").click(function() {
$("head link#theme").attr("href", $(this).data("theme"));
}
You can try to do that by this way:
<link id="original" rel="stylesheet" type="text/css" href="style1.css">
<script>
function turnGrey(){
//what ever your new css file is called
document.getElementById("original").href="grey.css";
}
</script>
<button id="grey" onclick="turnGrey">Turn Grey</button><br />
Use this :
<link href="Custom.css" rel="stylesheet" />
<link href="Blue.css" rel="stylesheet" />
<link href="Red.css" rel="stylesheet" />
<link href="Yellow.css" rel="stylesheet" />
<select id="changeCss"`enter code here`>
<option onclick="selectCss(this)" value="Blue">Blue</option>
<option onclick="selectCss(this)" value="Red">Red</option>
<option onclick="selectCss(this)" value="Yellow">Yellow</option>
</select>
<script type="text/javacript">
function selectCss() {
var link = $("link[rel=stylesheet]")[0].href;
var css = link.substring(link.lastIndexOf('/') + 1, link.length)
$('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css');
}
</script>
I had a dark theme by default on my webpage. To convert it to light theme, I had used the sun icon font by google. So in a simple way, the code to switch between the themes in jquery was:
$('.theme').click(function() {
if ($('.theme').children('img').attr('src') == 'images/lighttheme.png') {
**$('link').attr('href', 'css/styleslight.css');**
$('.theme').children('img').attr('src', 'images/darktheme.png')
} else if ($('.theme').children('img').attr('src') == 'images/darktheme.png') {
**$('link').attr('href', 'css/stylesdark.css');**
$('.theme').children('img').attr('src', 'images/lighttheme.png');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The first line of the if and else if statement is the full answer. The remaining text involves just changing the icon when clicked from moon to sun, or vice-versa.

How to capture resize event floatingpane JavaScript from declarative method?

I have seen the programmatic example here:
http://jsfiddle.net/8azsz/2/
var fp;
require(["dojo/ready", "dojo/parser", "dojo/on","dojox/layout/FloatingPane", "dijit/form/Button"], function(ready, parser, on, FloatingPane, Button) {
ready(function() {
parser.parse();
fp = new FloatingPane({
title: "Test",
resizable: true,
dockable: false,
style:"position:absolute;top:0;left:0;width:100px;height:100px;visibility:hidden;",
id: "fp"
}, dojo.byId("fp"));
fp.startup();
on(fp._resizeHandle, "resize", function(e) {
// Event handler
console.log("test");
});
});
});
The question is, how do i do this when i am using a declarative method of creating the floatingpane?
You can use dojo declarative scripting example.
See https://dojotoolkit.org/documentation/tutorials/1.10/declarative/
Specially section "Modifying Behavior"
You will need something like :
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/layout/resources/ResizeHandle.css">
<div id="floatingPane" data-dojo-type="dojox/layout/FloatingPane"
data-dojo-props="title: 'Hello World!',resizable:true,dockable: false">
<p>I am a floating pane. That makes me happy See browser console for the resize event.</p>
<script type="dojo/aspect" data-dojo-advice="after" data-dojo-event="resize">
console.log("resize is executed");
</script>
</div>

javascript dialog() option error in Asp.net MVC

I am trying to pop up a form on click of a button. I have included
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js">
The page .
and Using ->
<script type="text/javascript">
$(document).ready(function () {
$('#AddBook').click(function () {
$('#form').dialog({
height: 500,
width: 500,
"title": "Add Book "
}).html();
});
});
</script>
for the first time of click of "AddBook" button it is rendering the proper output.But ,when i click the button second time ,it shows an exception "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'.
you can do it more correctly as you're using MVC:
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css"/>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
Or you can use bundling:
In BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.*",
));
And usage in view:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
There is no need in callng .html() in your script.
Its seems Your script has not been properly included. You are missing End tag </script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js"></script>

Bootstrap Popover not working when code hosted locally, but working on jsbin

This is insane... I've been trying to figure out why my popover code won't when hosted locally, but working fine on jsbin. Let me know what you guys think, I going crazy over this. Thanks to you all!!
So here it is:
jsbin: http://jsbin.com/ocepaw/1/edit
/*///// Libraries jquery & bootstrap libraries ///////*/
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
/*///// relevant HTML: Targets (pop1,2,3) & Triggers (Previous & Next buttons) ///////*/
<a href="#" id="pop1" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 1/3">
</a>
<a href="#" id="pop2" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
<a href="#" id="pop3" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
NEXT
PREVIOUS
/*///// CSS ///////*/
var currentPopover = -1;
var popovers = [];
// Initialize all the popovers to be "manually" displayed.
popovers.push($("#pop1").popover({ trigger: 'manual' }));
popovers.push($("#pop2").popover({ trigger: 'manual' }));
popovers.push($("#pop3").popover({ trigger: 'manual' }));
// On each button click, hide the //currently displayed popover
// and show the next one.
$("#NextBtn").click(function() {
if (currentPopover >= 0) {
popovers[currentPopover].popover('hide');
}
currentPopover = currentPopover + 1;
popovers[currentPopover].popover('show');
});
$("#PreviousBtn").click(function() {
popovers[currentPopover].popover('hide');
currentPopover = currentPopover -1;
popovers[currentPopover].popover('show');
});
I had a similar issue a long time ago. Here's how i solved it: i changed the order of my imported .css and .js files. Try to load first bootstrap's required files and then everything else. Hopefully it will work for you too! if not then there's something wrong with your code.
Try declaring the CSS and JS with no redundancies and in correct order:
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js" type="text/javascript"></script>

Categories