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
Related
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.
I can't seem to get the Modal popup to show. With the code below, the display goes out of focus but no window displays.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnShow" runat="server" Text="Open ModalPopup" OnClientClick="return ShowModalPopup('modal');" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="modal" BackgroundCssClass="darken"
CancelControlID="btnCancel" PopupControlID="pnl" TargetControlID="btnShow" />
<asp:Panel ID="pnl" runat="server" style="width:55%;display:none;">
<h1>You can now see me!</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum."</p>
<asp:Button ID="btnCancel" runat="server" Text="Close" />
</asp:Panel>
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
</div>
</form>
</body>
</html>
<script type="text/javascript">
function ShowModalPop(PopupExtenderID) {
var ModalPopWindowShow = $find(PopupExtenderID);
if (ModalPopWindowShow) {
ModalPopWindowShow.show();
}
return false;
}
</script>
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
_grid.DataSource = BuildList();
_grid.DataBind();
}
private List<EntityPerson> BuildList()
{
...
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
btnShow.Click +=new EventHandler(btnShow_Click);
}
protected void btnShow_Click(object sender, EventArgs e)
{
Button btnShow = sender as Button;
ScriptManager.RegisterStartupScript(btnShow, btnShow.GetType(), "Popup", "return ShowModalPopup('modal');", true);
}
All your help is appreciated.
If there is another way to show a pop up window with AJAX, I would appreciate guidance on that as well.
I just need to be able to display cell content in a modal window when a user clicks on a cell in a grid.
I replaced
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
with
<ajaxToolkit:ToolkitScriptManager ID="ajaxSM" runat="server" />
and I got the popup to show.
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!");
}
}
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 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);
});