i have image set div tag like below:
function printImg() {
pwin = window.open(document.getElementById("mainImg").src,"_blank");
window.print();
}
$(function () {
$("#gallery > img").click(function () {
if ($(this).data('selected')) {
$(this).removeClass('selected');
$(this).data('selected', false);
} else {
$(this).addClass('selected');
$(this).data('selected', true);
}
});
var selectedImageArray = [];
$('#gallery > img').each(function () {
if ($(this).data('selected')) {
selectedImageArray.print(this);
}
});
window.onafterprint = function(){
window.location.reload(true);
}
});
img.selected {
border: 3px solid green;
}
img:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img name=imgqr[] id="mainImg" src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(180)->generate($user->emp_code[$i])) !!} " width="100"; height="80"; >{{$user->emp_first_name}} {{$user->emp_last_name}} {{!!($user->dpt_name)!!}}</td></tr>
</div>
<input class="printMe" type="button" onclick="printImg()" value="printMe" />
i need to select image when user click on it, i added the script for this and it working, but i click print button it doesnt print qrcode image ,in meantime is printing whole page.
I also need check if image is selected and pass through array value to print seleted images +data name.
Window.print() will always print the entire current window. You could bypass this by adding the selected images to a pop up and then print that pop up.
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
You can do this one window for one photo but ofcourse you can also add multiple photo's to one screen and then print it.
Your second question asks for an array with the selected images. Because you use jQuery you can just get them by
allSelectedImages = $('.selected');
You can loop that array en call the function .data() on it to get all data attributes!
Hope this helps!
You're calling print on the main window, call print from the window you opened
function printImg() {
pwin = window.open(document.getElementById("mainImg").src,"_blank");
pwin.print();
}
I do not think if there is any problem with your codes,
try this and let me know
Firefox :
Google Chrome:
Related
I'm trying to display a download button on an HTML page only when a specific file on the web server is deleted. I thought I'd use a CSS display: none; then a PHP script with a while loop that'd look like this :
while (file_exists("/aaa/file.txt")) {
sleep(5);
}
//set display property of the invisibleLink class to block and continue
The thing is I don't know how to do this last step and every thread I've seen about modifying CSS with PHP doesn't work with my use case.
PHP executes before anything is displayed on the screen, so you are probably not going to be able to do that: the code would simply sleep for 5 and then continue with generating the rest of the html before displaying to the user.
What you might want to do instead is mark the button as display: none and then when the page is done loading have a js function that calls a php page that returns whether the file exists or not. Have the js function loop until the php page says the file is gone, then have the js function display the button and stop looping.
<button type="button" id="test_btn" style="display: none;">Download</button>
<script type="text/javascript">
$(document).ready(function () {
checkFile();
function checkFile() {
$.ajax({
url: '/path/to/file_checker.php',
type: 'GET',
success: function (data) {
if (data === "deleted") { // or whatever you want the response to be
$('#test_btn').show();
}
else {
checkFile(); // you can add a setTimeout if you don't want this running too often
}
}
});
}
}
</script>
Then your file checker php can be something similar to what you had:
if (file_exists("/aaa/file.txt")) {
echo "exists";
}
else {
echo "deleted";
}
Just build the button and hide it with a class like this:
<style>
.hidden{ display:none;}
</style>
<?php
if(!file_exists("path") ){ $class = "hidden" }
echo "<input type='button' class='$class' name='stuff'>woo</button>";
?>
Hi I need set value of PHP variable to "1" if clients screen resolution is more then 1200px (I check only width) and set value of this variable to "2" if client have screen smaller then 1200px.
To check clients width of screen I use JQuery function "$( window ).outerWidth(true)". If PHP can check clients resolution then I don´t need wrote this question, but PHP not allow this and for that I search for solution of this problem.
=> How can I write script which allow change PHP variable before client load page? I mean I need AJAX, but I don´t know how used it.
Sorry for this maybe simply question. Can someone help me?
This might help ,
var width = $(window).width();
var height = $(window).height();
var screenTimer = null;
function Screen (){
$(window).resize(function() {
height = $(window).height();
width = $(window).width();
getScreen ();
});
function getScreen (){
return { 'height' : getHeight (), 'width': getWidth () };
}
screenTimer = setInterval ( getScreen (), 50 );
}
function getHeight (){
console.log ( 'height: ' + height);
$('#height').text(height);
return height;
}
function getWidth (){
console.log ( 'width: ' + width);
$('#width').text(width);
return width;
}
Screen ();
put this code in php along with script tag and set your variable.
Impossible I get it... Finally a write this:
index.php:
<script type="text/javascript">
$(document).ready(function() {
var sirka_monitoru = $( window ).outerWidth();
if ( sirka_monitoru < 1200 ){
$.post("soubor1.php", { nejaka: "1111" }, function (msg)
{
$('.some_name').html(msg);
});
}
else{
$.post("soubor2.php", { nejaka: "2222" }, function (msg)
{
$('.some_name').html(msg);
});
}
}); //END $(document).ready()
</script>
<div class="some_name"></div>
soubor1.php (1st file to include) file soubor2.php is similar to soubr1.php
<?php
echo "Value: " . $_POST["nejaka"];
?>
<div style="width: 100%; float: left; background-color: green; height: 100px;">
soubor1
</div>
=> When I load page then check width of users screen and after that I can load different PHP files and send him some important variables to solved my problem from question.
=> I accept my answer and solved this queston and close it
I am loading html with javascript from php to a div using $.get() to a div. the button click event is working fine. then adding again same thing again to different div with different id, but it is not working. can anyone can help me. my code is this
<style>
.loadWindow {
width:333px;
height: 202px;
padding: 5px 5px 0 5px;
font: 12px Arial, Helvetica, sans-serif;
border:double;
}
#loadWindow {
display:none;
}
<div id="main-box">
<div class="loadWindow" id="loadWindow"></div><button id="make">make</button>
My javascript code is below
$(function(){
$('#make').click(function(){
var id = $('.loadWindow').length;
var aw = $('#loadWindow').clone().attr("id", "window"+id);
//load data from php
$.get("mydata.php", function(data) {
aw.html(data);
$('#main-box').append(aw);
aw.show();
}, 'json');
});
});
`
My mydata.php code is below
echo '<div><button id="closeBtn">Close</button></div><script>$("#closeBtn").click(function(){alert("Close button Clicked!");});</script>';
I want click event work for each window separately(individually) and display the alert. In this code click event is not working according to the window. What can I do?
Working demo http://jsfiddle.net/QYEWs/13/
Please use .on API to it attaches an event handler function for one or more events to the selected elements.
API: http://api.jquery.com/on/
Plz Note: your append will make the DOM invalid as your id will always be same make it a class
to attach click event on dynamically added html in DOM
This should help, :)
like this
Attaché click event to close button like this:
$("#main-box").on("click",".closeBtn", function() {
alert("Close button Clicked!");
});
$(function(){
$('#make').on('click', function(){
var id = $('.loadWindow').length;
var aw = $('#loadWindow').clone().attr("id", "window"+id);
//load data from php
$.get("mydata.php", function(data) {
aw.html(data);
$('#main-box').append(aw);
aw.show();
}, 'json');
});
});
$(function(){
$('#make').click(function(){
var id = $('.loadWindow').length;
var aw = $('#loadWindow').clone(true).attr("id", "window"+id);
//load data from php
$.get("mydata.php", function(data) {
aw.html(data);
$('#main-box').append(aw);
aw.show();
}, 'json');
});
});
I've made a search engine for my database table where the search query gets sent by Jquery AJAX to a file called search.php. Search.php then sends the result back to the Javascript file where the results are processed and added to index.php.
Everything works perfectly except when I try to add arrow key navigation. For example, I want the first item in the search results page to be selected (by appending the class, red to it and using focus()) when I press the down arrow key, the second result to be selected when I press it again, etc..
Nothing gets selected when I press either the up or down arrow key. I'm testing this in Google Chrome.
index.php:
<link rel="stylesheet" type="text/css" href="search.css">
Start searching: <input type="text" id="search" autocomplete="off">
<div id="search_results">
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="search.js"></script>
javascript file:
$(document).ready(function(){
search_x = $('#search').offset().left;
search_y = $('#search').offset().top;
search_height = $('#search').height();
$('#search_results').css({
'left': search_x,
'top': (search_y + search_height + 5)
});
//arrow key navigation
start = -1;
$(document).on('keydown',document,function(e){
if(e.keyCode == 38){
if (start == -1){
start = ($('#search_results ul li a').size() - 1);
}else{
start--;
if (start < 0){
start = ($('#search_results ul li a').size() - 1);
}
}
$('#search_results ul li a').removeClass('red').focus();
$('#search_results ul li a').eq(start).addClass('red').focus();
}
if(e.keyCode == 40){
if (start == -1){
start = 0;
}else{
start++;
if (start > ($('#search_results ul li a').size() - 1)){
start = 0;
}
}
$('#search_results ul li a').removeClass('red').focus();
$('#search_results ul li a').eq(start).addClass('red').focus();
}
});
$('#search').on(
'keyup keydown',
function(){
var search_term = $(this).val();
$.post(
'search.php',
{
search_term : search_term
},function(data){
if (data == "nothing"){
$('#search_results').fadeOut();
} else {
$('#search_results').html(data).fadeIn();
}
});
});
});
part of the search.php file that sends data to index.php:
if (!empty($search_term))
{
echo '<ul>';
while ($results_row = mysql_fetch_assoc($search)){
echo '<li><a href="#">
<p><strong>',$results_row['place'],'</strong><br>',$results_row['description'],'</p>
</a>
</li>';
}
echo '</ul>';
} else {
echo "nothing";
}
I think the problem may be the on() method.
You are attaching the method to the document object, which is fine, but then also passing document as the second argument to the method. The second argument represents a selector that each event is filtered against to see if that was the element that trigerred the event. The document element won't both receive the event and originate the event (unless there are literally no elements on the page!)
try something like:
$(document).on("keydown", "#search_results", function() {
//etc
});
So the document will still receive the event, but the handler will only be triggered if the event originated from the results container
After finding some free time to code again, I changed $(document).on('keydown',document,function(e){
//stuff
}); to $(document).on('keydown','#search',function(e){
//stuff
});
The key press event listener was applied to the text field, #search. The code seemed to work after making the change.
I want to imitate Google suggest with the following code, which means:
step 1: When user types in search box, the query string will be processed by a server php file and query suggestion string is returned(using Ajax object).
step 2:When user clicks on a query suggestion, it will fill into the search box (autocomplete).
Step 1 is achieved while step 2 is not. I think the problem lies in the .click() method (I use .live() later, but it's still not working). My intention is to use .live() or .click() binding a onclick event to the dynamically created <li> element. Any idea?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="jquery-1.4.2.js">
</script>
<style>
#search,#suggest,ul,li{margin: 0; padding:0; width: 200px;}
ul{ list-style-type: none;}
.border{border: solid red 1px; }
</style>
<p>My first language is:</p>
<input type="text" width="200px" id="search" onkeyup="main(this.value)" value="" />
<ul id="suggest"></ul>
<script type="text/javascript">
$(function main(str)
{ //binding any forthcoming li element click event to a function
$('li').live('click', function(){ $("#search").val(array[i]);});
//setup Ajax object
var request=new XMLHttpRequest();
request.open("GET","language.php?q="+str,true)
//core function
request.onreadystatechange=function()
{
if ( request.readyState==4 && request.status==200)
{ if (str=="") {$('li').remove(); $('ul').removeClass('border');return;}
$('li').remove();
reply=request.responseText.split(",");
for (i=0;i<reply.length;i++)
{
//create HTML element of <li>
$('#suggest').append($('<li>',{id: 'li'+i, html: reply[i]}));
//style ul
$('ul').addClass('border');
}
}
}
request.send();
})
</script>
PHP:
<?php
$q=$_GET[q];
$a[]='english';
$a[]='chinese';
$a[]='japanese';
$a[]='eeeeee';
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
You're looking for jQuery Autocomplete.
You're correct about which line is the problem. You're missing the # to search by ID.
$('li'+i).click(function(){ $("#search").html(array[i]);});
should be
$('#li'+i).click(function(){ $("#search").html(array[i]);});
There are much cleaner ways to do this, however, that don't require a re-query of the document to attach this handler. I concur fully with the suggestion to use a plugin.
Also, you might want to wait for the user to be idle. This prevents too many round-trips. This would mean writing something like:
$("input").keyUp(function(e) {
clearTimeout(updater);
updater = setTimeout(whenReady, 200);
}
function whenReady() {
// update the search box here...
}
I went through your code and there are few issues in it.
1) If you want to bind click event on dynamically created elements then you should use .live('click', function(){}) event binder. This jQuery function will bind click event on the selector which will be created later on in the code dynamically so li elements that are coming from the server will automatically be binded to the click event if you write live() event on document ready function. Read docs.
Here is the sample code
<script>
$(function() {
$("#suggest li").live('click', function() {
$("#search").val($(this).text()); // li inner html contains text that needs to put into search box
alert($(this).text()); // or alert(array[i]); in your code
//c what is the out put of above code. better if you change name of an array
});
});
</script>
Also text input elements values are fetch using .val() function instead of .html function in your code $("#search").html(array[i]);
regards
Ayaz Alavi
If you want your application to work correctly, you should also consider to cache the response, in case of backspace for instance.