i have a script jquery that upload an image and show it by a php script called in this way:
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').live('change', function(){
$("#imageform").ajaxForm({target:'#logo'}).submit();
});
});
</script>
where photoimg is the input type file and image form the form. logo is the div where image will be.
Now when image is loaded in div whit php script in this way:
echo "<img src='".$actual_image_name."' id='imm' style=\"width:500;height:350;\" \>\n";
i have to add a jquery script to drag image inside the div to "center" it.
if i use echo after the line before in this way:
echo '<script type="text/javascript">';
echo "$(function(){";
echo "var maskWidth = $(\"#logo\").width();";
echo "var maskHeight = $(\"#logo\").height();";
echo "var imgPos = $(\"#imm\").offset();";
echo "var imgWidth = $(\"#imm\").width();";
echo "var imgHeight = $(\"#imm\").height();";
echo "var x1 = (imgPos.left + maskWidth) - imgWidth;";
echo "var y1 = (imgPos.top + maskHeight) - imgHeight;";
echo "var x2 = imgPos.left;";
echo "var y2 = imgPos.top;";
echo "$(\"#imm\").css({top: 0, left: 0, cursor: 'move'});";
echo "$(\"#imm\").draggable({ containment: [x1,y1,x2,y2] });";
echo "});\n";
echo "</script>\n";
it doesn't work. can you help me pls?
You should never want to execute Javascript from an external source like this. Just put the code into the calling page/script and execute it after the Ajax content has been added.
Related
I have a table that has an href link to a picture/media file. When my page updates the image [media] flashes during the setInterval function. Everything else is fine. How would I stop this from happening?
php code
<?php
include("../lib/config.php");
$conn=mysqli_connect("$dbhost","$dbuser","$dbpass","$dbname");
$result = mysqli_query($conn, " SELECT name, message, time, media FROM message ORDER BY ID DESC");
mysqli_close($conn);
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['message'] . "</td>";
echo "<td>" . $row['time'] . "</td>";
//echo "<td>" . $row['media'] . "</td>";
echo "<td> <img src=\"" . $row['media'] . "\" height=\"50\" ></td>";
echo "</tr>";
}
?>
js code
<script type="text/javascript">
setInterval(function(){
$.get("../pageLinks/messageOne.php" , function(result){
$("#testMessageOne").html(result);
});
}, 20000);
</script>
You would need to determine that the image(s) are loaded, prior to insertion to the DOM to prevent the flicker caused as the image(s) being rendered/downloaded by the browser.
Flicker Demo: https://jsfiddle.net/v8z5bvL2/
To do this you would need to find the image(s) in your requested content and add a load event to trigger the insertion into the DOM once all image(s) have completed loading.
The downside is that the content will not be updated until after the images have finished loading.
Anti-Flicker Demo: https://jsfiddle.net/g7m1au40/
setInterval(function(){
$.get("../pageLinks/messageOne.php" , function(result){
var result = $(result);
var img = result.find('img');
var imgCount = img.length; //count images in the content
var imgLoaded = 0;
img.on('load', function() {
if (imgCount === 0 || imgLoaded++ === imgCount) {
//the images have finished loading, display the content.
$("#testMessageOne").html(result);
}
});
});
}, 20000);
Can you see if this fixes your problem?
setInterval(function(){
$.get("../pageLinks/messageOne.php" , function(result){
var $html = $(result);
$("#testMessageOne").replaceWith($html);
});
}, 20000);
What it does is parse the html before it's appended to the document. The jquery object turns it into valid DOM objects before it's pushed to the page.
This means the page doesn't have to do the html parsing after it's content has been cleared and should be able to update the contents much faster, and hopefully within one frame draw because it's all in one javascript call.
I have a page that loads 200 or more images on one page.
All images load fine but after a few seconds, I am sending a request using
setInterval(function() {
var d = new Date();
$("#img<?php echo $row['id']; ?>").attr("src", "<?php echo SS_TLRM_IMG_EDITOR.str_replace("../","",$row['src_path']).$row['image_name']; ?>?"+d.getTime()); },
8000);
and I load new images to this same page. I call this function in a while loop.
What I am looking for:
Is there a way to refresh just the images that have been changed?
What is meant by change?
Actually, I have two pages one is used for editing images and the other is a viewer I am using wPaint js for editing images. Below you'll find screenshots of both pages.
VIEW PAGE
Editor Page
Editor page code
//while loop start here
<div class="wPaint" id="edit_<?php echo $row['id']; ?>" style="position:relative; width:<?php echo $width.'px'; ?>; height:<?php echo $height.'px'; ?>; margin:60px auto 20px auto;">
<input type="hidden" class="editEnable" value="0">
Save Image
</div>
<script type="text/javascript">
function saveImg(image) {
var _this = this;
$.ajax({
type: 'POST',
<?php if($_REQUEST['nz']==1){ ?>
url: 'ajax/upload-nz.php?imgName=<?php echo $row['
image_name ']; ?>&imgID=<?php echo $row['
id ']; ?>',
<?php }else{?>
url: 'ajax/upload.php?imgName=<?php echo $row['image_name ']; ?>&imgID=<?php echo $row['id ']; ?>',
<?php } ?>
data: {
image: image
},
success: function(resp) {
if (resp == 1 || parseInt(resp) == 1) {
_this._displayStatus('Image saved successfully');
$(this).find(".editEnable").attr('value', '2');
setTimeout(function() {
$("#saveImg<?php echo $row['id']; ?>").css({
'pointer-events': '',
'opacity': '1'
});
}, 800);
} else {
alert('Some one delete this image. You can not edit or save this image now.');
}
}
});
}
// both funciton use to load image on page load
function loadImgBg() {
this._showFileModal('bg', images);
}
function loadImgFg() {
this._showFileModal('fg', images);
}
// init wPaint
$('.wPaint').wPaint({
path: '', // set absolute path for images and cursors
autoScaleImage: true, // auto scale images to size of canvas (fg and bg)
autoCenterImage: true, // auto center images (fg and bg, default is left/top corner)
menuHandle: false, // setting to false will means menus cannot be dragged around
menuOffsetLeft: 0,
menuOffsetTop: -90,
saveImg: saveImg,
loadImgBg: loadImgBg,
loadImgFg: loadImgFg,
bg: '<?php echo SS_TLRM_IMG_EDITOR.str_replace("../","",$row['
src_path ']).$row['
image_name ']; ?>?cache=<?php echo str_replace(" ","",microtime()); ?>', // set bg on init
imageStretch: false, // stretch smaller images to full canvans dimensions
mode: 'text',
fontSize: '40',
fillStyle: '#FF0000',
fontBold: true,
strokeStyle: '#F00',
});
</script>
//while loop ended here
View Page Code
//while loop start here
<div id="edit_<?php echo $row['id']; ?>" style="position:relative; width:<?php echo $width.'px'; ?>; height:<?php echo $height.'px'; ?>; margin:0px auto 20px auto;">
<span id='ex<?php echo $row[' id ']; ?>' class="zoom"><img src='<?php echo SS_TLRM_IMG_EDITOR.str_replace("../","",$row['src_path']).$row['image_name']; ?>?cache=<?php echo str_replace(" ","",microtime()); ?>' id="img<?php echo $row['id']; ?>" />
</span>
</div>
<script>
setInterval(function() {
// Date use to prevent browser cache
var d = new Date();
$("#img<?php echo $row['id']; ?>").attr("src", "<?php echo SS_TLRM_IMG_EDITOR.str_replace(".. / ","
",$row['src_path']).$row['image_name']; ?>?" + d.getTime());
}, 15000);
</script>
//while loop ended here
Your php code loads once when the page is loaded. Your setInterval doesn't re-initialize your php code.
You can do one of three things.
1.Create an ajax call that requests the images table and updates when necessary and put the ajax call in the setInterval
2.When submitting a change have a proper php response with the image id stored in a new variable, let's say newId and the new imgSrc in a variable newImgSrc. Then with:
$("#img"+newId).attr("src", newImgSrc+"?"+d.getTime());
you can update directly the affected image.
When you load the page you can store all images using jquery. To do that you would need either a common selector or a parent for the images. SO you could enclose all images in a div with id="images-parent". In this case you can put everything in a setInterval and update like this:
setInterval(function() {
var d = new Date();
$("#images-parent").children("img").each(function() {
var newImgSrc = $(this).attr("src");
$(this).attr("src",newImgSrc+"?"+d.getTime());
});
},8000);
My gmap page turns blank after inserting php code into the infowindow content.
google.maps.event.addListener(noi, 'mouseover', function() {
var infowindow = new google.maps.InfoWindow({
content: '<?php
if ($count==0){
echo "No Open Tickets";
}
else{
echo "<table>";
foreach ($NOIcompliancearray as $SLA_Compliance=>$count) {
$Npath = $Nimages[$SLA_Compliance];
echo "<tr>";
echo "<td><a href='city.php?city=Noida&compliance=".$SLA_Compliance."'><img src='IndiaImages/".$Npath."' title='".$SLA_Compliance."' ></td>";
echo "<td>".$count."</td>";
echo "</tr>";
}
echo "</table>";
}
?>'
size: new google.maps.Size(100,100),
});
google.maps.event.addListener(noi, 'mouseover', function() {
infowindow.open(map,noi);
setTimeout(function() { infowindow.close(map, noi) }, 5000);
});
If i replace php code with some static content it works fine. Also, when I tried opening the webpage source code, it gives me result which i wanted to see in the info window. I am not sure where I am making mistake.
output from the webpage source code:
content:
'<table><tr><td><a href='city.php?city=Noida&compliance=A'><img src='IndiaImages/Circle_Red.gif' title='A' ></td><td>3</td></tr><tr><td><a href='city.php?city=Noida&compliance=C'><img src='IndiaImages/Circle_Yellow.gif' title='C' ></td><td>10</td></tr></table>Noida'
Kindly help me understand the mistake and to mitigate the problem.
Look at the function
google.maps.event.addListener(noi, 'mouseover', function() {
var infowindow = new google.maps.InfoWindow({
content: '...'
size: new google.maps.Size(100,100),
});
with php you get
google.maps.event.addListener(noi, 'mouseover', function() {
var infowindow = new google.maps.InfoWindow({
content: '<table>
<tr>
<td><a href='
// 'city.php?city=......' is after content : string ending sign `'` will be ignored by function !
size: new google.maps.Size(100,100),
});
The first ' generated by php will interpreted as end of the string
the rest will be in html source. you can see it but ignored by the function.
So don't use ' in that kind of code.
echo "<td><a href='city.php?city=Noida&compliance=".$SLA_Compliance."'>
escape the " sign instead
echo "<td><a href=\"city.php?city=Noida&ompliance=\"".$SLA_Compliance."\">"
escape " look here
I have a dynamic google map generated using the version 3 API on a Zurb Foundation page. The map works perfectly and everything is all good EXCEPT, the map is not responsive.
Please note, that I cannot use the iframe solution because I am getting the markers and infowindow data on page load using a php api call.
How can I make this map responsive to the visitor's viewport using zurb foundation 3 ?
I use PHP to dynamically print the javascript function to generate the map. Here is the function.
public function printgoogle(){
//Irrelevant code
$jsarr = array();
$jsarr = json_encode($phparray);
print "<script>";
print "function initialize(){";
print "var mapProp = {";
print "center:new google.maps.LatLng(".$this->centerlat.",".$this->centerlng."),";
print "zoom:".$this->mainzoom.",";
print "mapTypeId:google.maps.MapTypeId.ROADMAP";
print "};";
print "var map=new google.maps.Map(document.getElementById(\"map-canvas\"),mapProp);";
print "var infowindow = new google.maps.InfoWindow();";
print "var locations = $jsarr;";
print "var marker, i;";
print "for (i = 0; i < locations.length; i++) {";
print "marker = new google.maps.Marker({";
print "position: new google.maps.LatLng(locations[i][1], locations[i][2]),";
print "map: map";
print "});";
print "google.maps.event.addListener(marker, 'click', (function(marker, i) {";
print "return function() {";
print "infowindow.setContent(locations[i][0]);";
print "var pos = marker.getPosition();";
print "infowindow.setPosition(pos);";
print "infowindow.open(map, marker);";
print "}";
print "})(marker, i));";
print "}";
print "}";
print "google.maps.event.addDomListener(window, 'load', initialize);";
print "</script>";
}
Here is the HTML
<div class="row" id="2a1">
<div class="twelve columns" id="2a1a">
<div id="map-canvas"></div>
</div>
</div>
ok solved it using a simple jquery function
0.3 and 0.1 are the values which I needed. They can be substituted with anything and can be skipped if someone wants a full screen map.
Hope this helps someone.
<script type="text/javascript">
$(window).resize(function(){
var height = $(window).height();
var width = $(window).width();
var nheight = (height - (0.1 * height))+'px';
var nwidth = (width - (0.3 * width))+'px';
$('#map-canvas').css({
width: nwidth,
height: nheight
});
}).resize();
so I have a Ajax-Scripts thats permanently reloads a PHP-Page:
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
loadstatus();
});
function loadstatus(){
$.ajax("innopbx.monitor.php").done(function(data){
document.getElementById("status").innerHTML = data;
setTimeout('loadstatus()', 1000);
});
}
</script>
And the PHP-Page being reloaded shows HTML-Canvas like this:
echo '<canvas id="' . $ui->guid . '" width="100" height="100" class="clear" style="border:1px dotted"></canvas> ';
echo '<script type="text/javascript">
var a_canvas = document.getElementById("' . $ui->guid . '");
var a_context = a_canvas.getContext("2d");
var gradient = a_context.createLinearGradient(0, 0, 0, 100);
gradient.addColorStop(0, "#bbffbb");
gradient.addColorStop(1, "#55ff55");
a_context.fillStyle = gradient;
a_context.fillRect(2, 2, 96, 96);
a_context.font = "10px sans-serif";
a_context.fillStyle = "black";
a_context.fillText("' . $ui->cn . '", 5, 20);
</script>';
When I navigate to the PHP-Page directly the Canvas is drawn exactly as expected. But when I navigate to the Page with the AJAX-Function that reloads the PHP-Page permanently I only see the dotted border. Its not filled and no Text is there.
Do you have any idea? Thanks in advance!
You can try to add document.getElementById("status") as target parameter of $.ajax.
var t = document.getElementById("status");
function loadStatus(){
$.ajax({url: "innopbx.monitor.php", target: t, success: function(){
setTimeout(loadstatus, 1000);
});
}
It should deal with the js execution, rather than innerHTML = ....