i am using jquery UI to create a popup window as an alert message and i need t make the ok button when it is clicked to call and get another page
can anyone help me ????
this is the code
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal message</title>
<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 rel="stylesheet" href="/resources/demos/style.css" />!-->
<script>
$(function() {
$("#dialog-message").dialog({
modal : true,
buttons : {
enter : function() {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="WIN PRICES" style="width:300px; height:150px;">
<p>
<!--<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>!-->
<span style ="float: left; margin:0 7px 50px 0;"><img src="b4l.jpg" width="77" height="53"></span>
<h3>byu for less</h3>
Shoping online <b>Need No Password</b>
<br>
Get your needs is our job.
</p>
<p>
<b>every week win a price</b>.
</p>
</div>
<p>
Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
</p>
</body>
</html>
Unsure what you mean by "call and get another page" -- would this work?
Working jsFiddle here
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
enter: function() {
$( this ).dialog( "close" );
window.location.href='http://google.com';
}
}
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="dialog-message">
<h1>Example Dialog</h1>
<img src="http://placehold.it/150x150" width="150" height="150"/>
First Name: <input type="text" id="fname"><br />
Last Name: <input type="text" id="lname"><br />
</div>
</body>
</html>
You can create a custom alert box in order to customize it to suit your needs.
Have a look here as this will help you choose what is better for you.
PS: you can try the below as well.
HTML
<input type="button" onclick="confirmation()" value="Want to go to google?">
JS
function confirmation() {
var answer = confirm("Want to go to google?");
if (answer){
alert("Bye bye!");
window.location = "http://www.google.com/";
}
else{
alert("Thanks for sticking around!");
}
}
Related
I am creating a website using bootstrap 5, I would like to have a button that when the user clicks it that a popover appears.
I have added jQuery and the popper.js files to my files. However when I click on the button nothing happens. I have checked the console and it doesn't seem to show any errors. I have no idea what is wrong.
Here is my button code.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
Cart </i>
</button>
Here is my jQuery code
$(document).ready(() => {
$('[data-toggle="popover"]').popover();
});
Here are the jQuery and popper.js files I have linked.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<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>
I am wonder if I have linked the wrong version of the files as the bootstrap website wasn't very helpful when it came to this.
Change the data-* attributes with data-bs-* (For example: data-toggle to data-bs-toggle and so on) and change the script to the one provided below to turn on popovers.
In addition, make sure you include Bootstrap assets correctly and everything should be fine. In your case you have not included bootstrap css file so the popover would show up with no styling. Again you can check the below snippet for more details.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
Cart </i>
</button>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
Not sure if this is too late...but try use the following...
<p>This<i class="fas fa-shopping-cart" style="color: #fff;"></i> triggers a popover on click.</p>
$(document).ready(function() {
$("body").popover({ selector: '[data-toggle="popover"]' });
});
Useful answer here...
https://stackoverflow.com/a/22569369/6790839
I am completely new to Backbone JS. I thought I could solve this minor problem by myself but I can't figure why I am still getting this error:
Uncaught ReferenceError: Backbone is not defined
when trying to extend a Backbone.Model. backbone.js is called before the script that uses it so I don't get it.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title></title>
</head>
<body>
</body>
</html>
My external file main.js
(function($) {
window.Doc = Backbone.Model.extend({
defaults : {
id : '???',
title : 'Le titre de mon modèle',
text : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius ipsum nec porta dignissim. Donec a elementum magna. Donec sagittis magna eu nulla ullamcorper dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam volutpat felis vehicula, congue mi at, lobortis dolor.',
keywords : 'lorem ipsum dolor sit amet'
},
initialize : function Doc() {
console.log('Doc Constructor');
}
});
})(jQuery);
I also get the following error coming from backbone.js:219
Uncaught TypeError: Cannot call method 'each' of undefined
You forgot to import underscore.js.
It is a Backbone requirement.
Grab it here!
I faced the same issue while running jasmine testcases using SpecRunner.html, so when specifying backbone.js in your dependencies in SpecRunner.html, add jquery and underscore.js first, because backbone depends on them.
Cant get the stylesheet to work on the printed document. It works on the popup window but not when printed. So when the window on the screen pops up it has the proper styling but when the print dialog is used the print the contents of the window it does not take the styling from the stylesheet just default styles.
Here is the code:
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery- 1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
Printout
If you want to design your print page.It will not work with your style sheet.You need to write inline style sheet.
I have face the same problem and finally solved that this is code :
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
<a onClick="PrintElem('#mydiv')" class="btn btn-default btn-icon icon-left hidden-print pull-left">
My Div
<i class="entypo-print"></i>
</a>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($('<div/>').append($(elem).clone()).html());
}
function Popup(data)
{
var myWindow = window.open('', 'my div', 'height=400,width=600');
myWindow.document.write('<html><head><title>my div</title>');
myWindow.document.write('</head><body >');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.print();
myWindow.close();
return true;
};
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > </script>
</body>
</html>
Print pages are usually used inside email as well. Based on what I experienced, you should write all your stylesheet codes within the code (inline).
I am using https://github.com/patricklodder/jquery-zclip to implement copy to clipboard function.
it should copy some text, but for now i want it to be anything really... but its not working at all.
I included in head:
<h:outputScript name="js/jquery.zclip.min.js" library="test" />
<script>
$(document).ready(function(){
$('a#copy').zclip({
path:'#{resource['/test/js/ZeroClipboard.swf']}',
copy:$('div#content').text()
});
});
</script>
and in JSF page i have an ordinary :
COPY
there are no errors in Chrome console but clicking the link doesn't do anything too.
I really have no idea why it's not working. Big thanks for any suggestion.
---------- EDIT
The datagrid:
<p:dataGrid var="item" columns="3" rows="9" value="#{pictureManagementBean.pictures}" id="gallery" paginator="true">
<p:column>
<p:panel header="#{item.pictureName}" style="text-align:center; width:230px;">
<h:panelGrid styleClass="shortLink">
<p:graphicImage value="#{item.thumbnailDir}" width="200px" />
COPY
<p id="copy#{item.idpicture}">LOREM IPSUM</p>
<p:commandLink value="Delete" action="#pictureManagementBean.removePicture(item.idpicture)}" update="#form"/>
</h:panelGrid></p:panel></p:column></p:dataGrid>
This works for me:
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
</h:head>
<h:body>
<h:outputScript library="default" name="js/jquery-1.8.1.min.js"/>
<h:outputScript library="default" name="js/jquery.zclip.min.js"/>
<script type="text/javascript">
$(document).ready(function(){
$('a#copy-description').zclip({
path:"#{resource['default:js/ZeroClipboard.swf']}",
copy:$('p#description').text()
});
});
</script>
<a id="copy-description" href="#">Copy Description</a>
<p id="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat venenatis erat
eu convallis. Phasellus ut purus dui, in tristique ligula. Fusce a sodales ipsum.
Proin et commodo lacus. Morbi eget lectus ante, sed interdum orci.
Nunc rutrum, enim in mattis bibendum, sapien ligula semper nisi, sed ullamcorper justo sem quis felis.
Duis vehicula arcu non felis convallis eleifend.
</p>
</h:body>
</html>
where the folder structure is like this:
-->resources/default/js/jquery.zclip.min.js
-->resources/default/js/ZeroClipboard.swf
I am attempting to grab a child element of HTML loaded dynamically via AJAX. It is not working.
$.get('test.html', function(data) {
var content = $('#content', data).html();
console.log(content); // Logs "Null"
$('#result').html(content);
});
Here is the 'test.html'
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<title>Website</title>
<meta name="description" content="" />
<meta name="keywords" value="" />
</head>
<body>
<h1>Hello!!!</h1>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat tincidunt tortor eu iaculis. Sed id urna sem, quis malesuada lacus. Nulla iaculis malesuada libero, id vehicula sapien imperdiet eu.</div>
</body>
</html>
Also, if I try this: console.log($(data));, Firebug gives me this:
[<TextNode textContent="\n\n\n ">, meta, <TextNode textContent="\n ">, title, <TextNode textContent="\n ">, meta, <TextNode textContent="\n ">, meta, <TextNode textContent="\n\n\n \n ">, h1, <TextNode textContent="\n \n ">, div#content, <TextNode textContent="\n\n\n\n">]
Any ideas???
You made a mistake with the content var i believe, it doesnt make sense.
$.get('test.html #content', function(data) {
console.log(data); // Logs "Null"
$('#result').html(data);
});
thats how jquery website would say to do it.
I say use
$('#result').load('test.html #content');
hows that for ya?
try using $.ajax instead:
$.ajax({
url:'test.html',
dataType:'html',
success:function(data) {
var content = $('#content', data).html();
console.log(content); // Logs "Null"
$('#result').html(content);
}
});
I'm not quite clear on what you're trying to do, but I'm assuming you want to get the contents of #content in your test.html page and inject that into your #results div.
$.get('test.html', function(data) {
var content = $(data).find("#content").html();
$('#result').html(content);
});