I have 6 images in PHP page.
Below each image there is button named print.
Now how to give command in PHP or Javascript to the button so that when it is clicked print window is there with only respective image (not whole HTML)
My button:
<button type='print'>Print<\button>
You can try this way
<script type="text/javascript">
function ImagetoPrint(source) {
return "<html><head><script>function step1(){\n" +
"setTimeout('step2()', 10);}\n" +
"function step2(){window.print();window.close()}\n" +
"</scri" + "pt></head><body onload='step1()'>\n" +
"<img src='" + source + "' /></body></html>";
}
function PrintImage(source) {
Pagelink = "about:blank";
var pwa = window.open(Pagelink, "_new");
pwa.document.open();
pwa.document.write(ImagetoPrint(source));
pwa.document.close();
}
PRINT
You can use JS libraries like
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
$('img#some_id').printElement();
Related
I have a Kendo Grid with a column definition as follows:
columns.Bound(c => c.Id).Title("ID #").Width("150px").ClientTemplate("#=showDetails(data.Id)#");
I'm calling a method showdetails that returns a link to open the details in a new page.
I need some help figuring out how to build the link.
This is my showDetails method:
function showDetails(data) {
var returnText = "<a href='/Detail/Index/" + data + "'>" + data + "</a>";
return returnText;
}
How do I modify it, so, the details page is opened in a new window?
add:
target="_blank" to return statement
var returnText = "gt a href='/Detail/Index/" + data + "'>" + data + "</a>";
to:
var returnText = "gt a target='_blank' href='/Detail/Index/" + data + "'>" + data + "</a>";
Reference link: https://www.w3schools.com/tags/att_a_target.asp
I got some troubles working on javascript for an Firefox OS app, so I hope anyone can help me.
The case is I append some images from javascript (see code)
var aux = "<img class=\"imageOn\" id=\"" + imageName + "\"" + "src:\"" + imageURL + "\" >";
var image = "<a class=\"imageOn\" href=\"#\"> " + aux + " </a>";
$("#categoriasList").append(image);
$('#'+imageName).attr('src',imageURL);
And now I want to select one of these images from another js file:
$("img.imageOn").bind('click', function(e) {
console.log($(this).attr('id'));
playText($(this).attr('id'),"es");
// Change to picturesView
// Load icons from category choosed
});
The point is that actually it isn't working, the event is not triggered, so apendding or selecting the images has to be wrong, but I don't find the error. Does anyone know how to fix it?
Thank you in advanced.
Your src attribute should be followed by a = not a :
"<img class=\"imageOn\" id=\"" + imageName + "\"" + "src=\"" + imageURL + "\" >";
This
"src:\"
Should probably be
"src=\"
You need a = instead of : in your src. Try this:
"<img class=\"imageOn\" id=\"" + imageName + "\"" + "src=\"" + imageURL + "\" >";
If your are using jQuery you can use following method.
var aux= $(document.createElement('img')).attr(
'id':imageName,
'src':imageURL,
'class':'imageOn'
),
image = $(document.createElement('a')).attr({
'class':'imageOn'
'href':'#',
});
image.html(aux);
$("#categoriasList").append(image);
And after appending you can attach event handler. If you attaching without creating actual element it will not be triggered. It means if you want to attach event handler in the different file you should be sure that all elements already created. Otherwise there will not be triggered.
I fixed it using the event handler "on" of query
I have pdf files stored on my server.
I would like the user to be able to click a link/button and have a print dialog popup so they can print the pdf. I tried convincing them that its not a big deal to click download, then print it from the browser tab in which it opens, but they are fickle. :)
I have tried a few javascript solutions, mostly what I end up with is:
contentWindow is not defined
My js snippet is as follows
a = $("a:contains('Download PDF')")
url = a.attr('href')
uid = unique_id()
uid = "abc_" + uid
ifrm = $("<iframe width='500px' src='" + url + "' id='" + uid + "' name='" + uid + "' onload='this.contentWindow.print()'></iframe>")
$('body').append(ifrm)
I have also tried
...
ifrm = $("<iframe width='500px' src='" + url + "' id='" + uid + "' name='" + uid + "' ></iframe>")
$('body').append(ifrm)
pdf = document.findElementById(uid)
pdf.contentWindow.print();
And a few other variations with the same result. Or I get a print of "About:Blank" presumably because print is called before the document is loaded in the iframe.
The pdf opens and renders in the iframe.
Any ideas
viewresident = '<a href="javascript:;" onclick="return openPopup(' + viewUrl + ');" >' + name[i] + '</a>';
I am using JQ Grid to set this to the Name row of the grid.There are no errors, but the page doesn't open up a popup in a new window. Please let me know wat's wrong.
function openPopup(url) {
window.open(url, "popup_id", "scrollbars,resizable");
return false;
}
The whole thing is written in JS.
Read how to use window.open(): Window open() Method, then try this:
viewresident = '<a href="javascript:openPopup(' + viewUrl + ');" >' + name[i] + '</a>';
function openPopup(url){
window.open(url,'Popup','scrollbars=yes, resizable=yes, width=500, height=400');
}
scrollbars=no disables window scrollbars and resizable=no disables window resizing.
I've been developing a web game, with jquery doing some of the work. It was on a server, but I've moved it back to my laptop. Everything seems to work fine, except the most important function, which imports the contents of an html file.
$(".ReportList a").live('click', function(){
var getreportname = $(this).text();
$("#scroller").append("<span>The reportname is " + getreportname + "</span>");
var usersreport = "ReportList_" + User + "";
jQuery.get('Reports/' + getreportname + '.html', function (data) {
$("#" + usersreport).html(data);
$("#" + usersreport + " span").addClass("Py" + User);
updateCount();
});
});
Not sure why it stopped working. Would appreciate any insight.
I didn't need the .get() method to do what I wanted, .html() was good enough if I re-formulated the script.