I have this kind of bootstrap popover from W3 schools site and edited code for my situation (see onPopoverHtmlLoad() function):
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
Question is, how can I change HTML data content of popover after I hit
popover button/trigger, please? Is there some function like
onHtmlDomPopoverLoad?
I appreciate solutions in Javascript, but accept JQuery help too. I was looking for similar issues but didn't find anything yet.
You can replace onPopoverHtmlLoad with:
function onPopoverHtmlLoad(){
$("#inpopover_button").text("true")
}
And attach the event handler with:
$('[data-toggle="popover"]').on('shown.bs.popover', onPopoverHtmlLoad)
See the codepen: https://codepen.io/anon/pen/MxXwQe
read about bootstrap popover events here :
https://getbootstrap.com/docs/4.0/components/popovers/#events
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover()
.on('shown.bs.popover', onPopoverHtmlLoad);
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
Related
I have been experimenting with this for a couple of hours and I remain confused.
I am attempting to open a JQuery UI dialog (modal) when a link ([a] tag) is clicked, getting the content of the dialog window from the href of the link.
So far I have (gleaned from various places) where testb.html is a simple html fragment:
<div><p>Some text</p><p>more text</p</div>
The idea is that when anchor (link) is click the content of testb.html appears in the dialog.
Why doesn't this work???
David (70-year-old pre-Alzheimers ex-programmer with little HTML experience)s
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href).dialog("open");
});
</script>
</head>
<body>
<div class="container"></div>
<p>Click!</p>
</body>
</html>
you can use this code:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p>Click!</p>
</div>
<div id="dialog" title="Basic dialog"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$('.modal').on('click', function () {
var data = $(this).attr('data-get')
$('#dialog').html(data)
$("#dialog").dialog()
});
</script>
</body>
</html>
You run the assignment before the element exists on the page. Wrap it in a load handler
$(function() { // on page load
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
});
})
You cannot open the container as a dialog the way you try it. You need something like
$(function() { // on page load
$(".container").dialog({
autoOpen: false,
width: 750,
modal: true
});
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
$(".container").dialog('open');
});
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#modal" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#modal" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="modal">This my first jQuery UI Dialog!</div>
<p>Click!</p>
</body>
</html>
This opens a jquery dialog modal when the anchor tag is clicked.
Combining bits from the previous answers, I got this, which works!
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<p>Click!</p>
<div id="dialog" title="Basic dialog"></div>
<script>
$('.modal').on('click', function (e) {
e.preventDefault();
$('#dialog').load(this.href)
$("#dialog").dialog()
});
</script>
</body>
</html>
With codeangler's answer, the dialog appeared,but didn't have the content of testb.html, instead had the content of the div.
With mplungjan's answer... Well, I couldn't get it to work.
With Sepehr Pourjozi's answer, the dialog appeared but contained the literal text "testb.html", not the content of testb.html.
Taking hints from all three answers, I got it to work. And now I understand JQuery dialogs a little bit better.
Thanks, all.
David
I am learning bootstrap 4 and I saw progress bar.So, i though to make it more iteractive using javascript. But,my progress bar is not working.I want to move the progress bar upto 100%,like we see normal progress bar moving from 0% to 100%.
I tried :
var count=0;
var x=document.querySelector('.progress-bar');
window.onload=callMe();
;
function callMe(){
x.style.width=null;
setInterval(function(){
increaseBar();
},1000);
}
function increaseBar(){
count=count+10;
console.log(count);
console.dir(x);
x.style.width=count;
x.innerHTML=count;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar" style="width:0%">0%</div>
</div>
</div>
</body>
<script>
</script>
</html>
i see that x.style.width=count; is not working and i also tried using x.setAttribute("style,"width"),but it also didnot worked.
You should use percentage for with and clear interwal when reach 100 as percentage
var count=0;var myVar;
var x=document.querySelector('.progress-bar');
window.onload=callMe();
;
function callMe(){
x.style.width=null;
myVar=setInterval(function(){
increaseBar();
},1000);
}
function increaseBar(){
if(count==100){clearInterval(myVar);return}
count=count+10;
x.style.width=count+"%";
x.innerHTML=count+"%";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar" style="width:0%">0%</div>
</div>
</div>
</body>
<script>
</script>
</html>
I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.
i have two page test1.php and test2.php when i click on my button for going to test2.php my function not running in test2.php only if i put data-ajax="false" in said button it working but i want without disable ajax .. Is there a way ?
test1.php
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body >
<div id="page-1" data-role="page" >
<div data-role="content">
click
</div>
</div>
</body>
</html>
test2.php
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body >
<div id="page-1" data-role="page" >
<div data-role="content">
</div>
</div>
<script type="text/javascript">
$(function() {
alert("hi");
})
</script>
</body>
</html>
If you want to run an external function, you can just create a file, let's call it myfunction.js. Then you add it below you jquery includes, like this:
...
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
<script src="myfunction.js"></script>
And in "myfunction.js" you add this:
$("a").click(function(){
alert("Hi");
});
Kind of like I did in here: https://jsfiddle.net/uzt27mm2/ just call the script from an external .js file.
I downloaded this jquery plugin: http://harshen.github.io/jquery-countdownTimer/
specifically to use the Reverse countdown to zero from time set to only minutes timer.
I am pretty sure I followed the instructions correctly but the plugin does not work. I have never used jQuery or plugins before, so I'm not sure if I am missing something or just doing something completely wrong (or both).
My Javascript test alert does run.
I will attach my code for you all to look at. Not sure if it has to do with my file paths, but I've attached an image of that as well. Please tell me what could be causing the problem and how to fix. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
And here is a picture of my project folder, containing the files:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>