Data met php lezen en bewerken met .js en ajax
Al een tijdje ben ik met een script bezig dat op zich prima werkt alleen ben ik aangekomen op een punt waar ik niet uit kom.
De opzet:
Het script leest data van een url met file(). Dit werkt prima. Met een Ajax script refresh ik deze pagina, wat ook prima werkt. Om het script grafisch wat mooier te maken wil ik met een reflectie van een afbeelding werken. Op de "lees" pagina werkt dit. Op de AJAX refresh pagina niet.
Alles staat in de juiste dir. In de head heb ik de verwijzingen staan.
Heeft iemand een idee waar dit probleem in zit? Komt dit vaker voor met AJAX?
Hoor graag van jullie want ik ben er momenteel een beetje klaar mee omdat ik hier niet verder kom.
Als ik een simpele <hr> of tekst op de lees pagina zet zie ik die wel op de refresh pagina maar een reflectie van de img komt niet in beeld. hoe kan ik dit oplossen of kom ik verder?
Alvast bedankt.
Gewijzigd op 08/11/2014 19:55:26 door Martijn Savelkouls
Code (php)
1
2
2
<button id="click">Klik op mij</button>
<div id="test"></div>
<div id="test"></div>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$(function(){
$('#click').click(function(){
var img = $("<img />").attr('src', 'http://www.phphulp.nl/img/phphulp-logo.jpg').load(function() {
$("#test").append(img);
});
});
});
$('#click').click(function(){
var img = $("<img />").attr('src', 'http://www.phphulp.nl/img/phphulp-logo.jpg').load(function() {
$("#test").append(img);
});
});
});
Bedankt voor je reactie maar ik heb geen idee wat ik met de inhoud moet :).
De bedoeling is dat de afbeelding optisch een effect krijgt, alsof het op een tafel staat met gedeeltelijke een spiegelbeeld, de reflectie waar ik het eerder over had.
Dat werkt op pagina 'a', de lees pagina wel maar die reflectie is niet zichtbaar op de uiteindelijke pagina, pagina 'b'.
In de broncode van pagina b, staat alleen 'Loading data...' waardoor ik kan dus niet zien hoe de gegevens worden doorgegeven.
Dit is het ajax script dat ik gebruik.
Onderaan heb ik een img tag gezet die wel zichtbaar is met reflectie, het gaat hierbij om 'class=reflect'. Het pad naar de .js klopt dus. Op de leespagina werkt het ook alleen leest het script hieronder het blijkbaar niet goed.
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=•ISO-8859-15">
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/reflection.js"></script>
<title>titel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results').load('leespagina.php');
}, 2000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
</head>
<body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<div id="results"><font face=verdana>Loading data...</div>
<!--<img src="http://localhost:80/images/item/21895.jpg" class="reflect" border=0 width=320 height=320>-->
</body>
</html>
Hoor graag of dit vaker voorkomt en vooral hoe je dit op kan lossen.
Alvast bedankt,
Martijn.
Gewijzigd op 09/11/2014 10:45:57 door Martijn Savelkouls
Ik denk dat je wel .html kunt laden, maar geen php. Php wordt aan de server kant verwerkt en javascript aan de client (=browser) kant.
Die content die in <div id="results"> geladen wordt, moet in diezelfde content die gespiegelde afbeelding komen?
Even een andere vraag tussendoor: Waarom zet je niet gewoon die afbeeldingen op de server zodat ze net als een gewone image direct gedownload worden?
Deze pagina zou in zijn geheel gelezen moeten worden door de andere pagina.
De img tag is voorzien van class="reflect" dus lijkt het mij dat het zou moeten werken. Bij dit laatste gaat het volgens mij ergens fout. :)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<title>lees</title>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/reflection.js"></script>
</head>
<body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<img src="http://localhost:80/images/item/21999.jpg" class="reflect" border=0 width=320 height=320><br><font face=Verdana color=black size=5>KOKOMO</font><br><font face=Verdana color=black size=5>A LITTLE BIT FURTHER AWAY</font><br><br><font face=Verdana color=black size=5>Hierna ...</font></body>
</html>
Toevoeging op 09/11/2014 11:47:11:
Frank Nietbelangrijk op 09/11/2014 11:39:43:
Mootools en JQuery? Gaat dat niet botsen? i.i.g. overkill.. Wat staat er in reflection.js?
Die content die in <div id="results"> geladen wordt, moet in diezelfde content die gespiegelde afbeelding komen?
Even een andere vraag tussendoor: Waarom zet je niet gewoon die afbeeldingen op de server zodat ze net als een gewone image direct gedownload worden?
Die content die in <div id="results"> geladen wordt, moet in diezelfde content die gespiegelde afbeelding komen?
Even een andere vraag tussendoor: Waarom zet je niet gewoon die afbeeldingen op de server zodat ze net als een gewone image direct gedownload worden?
* Daar moet de reflectie zichtbaar zijn want dat gaat richting gebruiker.
* Deze afbeeldingen komen uit een muziekprogramma dat een eigen server heeft draaien.
* Reflection.js:
/*
reflection.js for mootools v1.5
(c) 2006-2011 Christophe Beyls <http://www.digitalia.be>
MIT-style license.
*/
Element.implement({reflect:function(b){var a=this;
if(a.get("tag")=="img"){b=Object.append({height:1/3,opacity:0.4},b);
a.unreflect();function c(){var f=a.width,d=a.height,k,h,l,g,j;
h=Math.floor((b.height>1)?Math.min(d,b.height):d*b.height);
k=new Element("canvas");
if(k.getContext){try{g=k.setProperties({width:f,height:h}).getContext("2d");
g.save();
g.translate(0,d-1);
g.scale(1,-1);
g.drawImage(a,0,0,f,d);
g.restore();
g.globalCompositeOperation="destination-out";
j=g.createLinearGradient(0,0,0,h);
j.addColorStop(0,"rgba(255, 255, 255, "+(1-b.opacity)+")");
j.addColorStop(1,"rgba(255, 255, 255, 1.0)");
g.fillStyle=j;
g.rect(0,0,f,h);
g.fill()}catch(i){return}}else{if(!Browser.ie){return}k=new Element("img",{src:a.src,styles:{width:f,height:d,marginBottom:h-d,filter:"FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity="+(b.opacity*100)+", FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY="+(h/d*100)+")"}})}k.setStyles({display:"block",border:0});
l=new Element(($(a.parentNode).get("tag")=="a")?"span":"div").inject(a,"after").adopt(a,k);
l.className=a.className;
a.store("reflected",l.style.cssText=a.style.cssText);
l.setStyles({width:f,height:d+h,overflow:"hidden"});
a.style.cssText="display: block; border: 0px";
a.className="reflected"}if(a.complete){c()}else{a.onload=c}}return a},unreflect:function(){var b=this,a=this.retrieve("reflected"),c;b.onload=function(){};
if(a!==null){c=b.parentNode;b.className=c.className;
b.style.cssText=a;
b.eliminate("reflected");
c.parentNode.replaceChild(b,c)}return b}});
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
window.addEvent("domready", function() {
$$("img").filter(function(img) { return img.hasClass("reflect"); }).reflect({/* Put custom options here */});
});
Frank Nietbelangrijk op 09/11/2014 11:47:15:
Als je wil, kun je dan de inhoud van reflection.js posten?
Staat hierboven en daar staat: reflection.js for mootools v1.5
Dus ik ga er van uit dat die mootools ook nodig is.
Gewijzigd op 09/11/2014 11:53:26 door Martijn Savelkouls
Ik ga er vanuit dat je nu de JQuery versie gaat gebruiken. Je moet je wel goed realiseren dat als je nieuwe content laadt met AJAX je DAARNA nog dit moet doen om de foto's te laten reflecteren:
Code (php)
1
$("#photo1").reflect(options);
Met daarna bedoel ik dan nadat de content daadwerkelijk geladen is in de browser, dus nadat het antwoord van de server op de AJAX request verwerkt is.
Gewijzigd op 09/11/2014 12:30:14 door Frank Nietbelangrijk
Zal ik die eens gaan proberen? :)
Ik kom hier nog op terug....
Alvast bedankt.
Bij dit script heb je twee opties. Of class="reflect", of $("#photo1").reflect(options);
Ik heb de eerste gebruikt ivm de output van de leespagina alleen dit werkte niet direct.
Inmiddels dus wel. Alleen wat er nou precies anders is... Geen idee. Dat is dan wel jammer.
Ik ben er erg blij mee. Met dit probleem was ik al een paar dagen bezig en alleen was ik hier niet uitgekomen.
Dank u.
Gewijzigd op 09/11/2014 13:25:02 door Martijn Savelkouls