Kan ik twee targets meegeven met ajaxform??
Die submit start een phph script dat een plaatje accepteert, er een thumbnail van maakt en opslaat.
De thumbnail wordt vervolgens op de pagina geplaatst. Dat gebeurt dus met ajaxform en de meegegeven target.
Zie hier:
Code (php)
1
$("#imageformd").ajaxForm({target: '#previewd'}).submit();
Maar nu wil ik het plaatje op twee plaatsen hebben. Kan ik twee targets meegeven? Ik heb me in allerlei bochten gewrongen, maar na twee dagen weet ik niets meer te bedenken.
Is er iemand die hierbij kan helpen?
Zodra daar iets in komt, kopiëren naar het andere doel.
En kun je datgene wat moet gebeuren niet afhandelen in de callback-functie van je ajaxForm()?
Dus zoiets:
- verstuur info naar PHP-script via AJAX-form
- PHP script doet zijn ding en stuurt de benodigde informatie terug...
- ... die wordt opgevangen door de callback-functie, waarmee je verder je visuele zaken op je scherm regelt?
Ik denk dat jij de oplossingsrichting hebt.
Het PHP script retourneert de thumbnail van de ingebrachte afbeelding.
Code (php)
1
echo "<img src='".$path.$actual_image_name."' class='preview' height='".$height."' width='".$width."'>";
Met de onderstaande jsquery wordt het in de pagina geplaatst.
Code (php)
1
$("#imageforme").ajaxForm({target: '#previewe'}).submit();
De bedoeling is dat er dan ook een kruis bij wordt geplaatst om het plaatje weer te kunnen verwijderen. (zoals marktplaats dat ook doet). Dat kruis zet ik er in de jsquery als volgt onder:
Code (php)
1
$("#previewec").html('<div class="close" title="Verwijderen"><img src="../pics/cross.png" height="13" width="13">');
Maar het kan voorkomen dat er geen afbeelding of een verkeerd bestandsformaat wordt opgegeven. Dat wordt in het php script opgemerkt en afgevangen. Waar ik naar zoek is dat in dat geval er géén kruis wordt geplaatst. Die voorwaardelijke plaatsing kan ik maar niet in het php script krijgen.
Ik zoek dus eigenlijk naar wat jij voorstelt. De callback functie. Maar dat gaat (nog) boven mijn pet. Misschien weet jij hoe ik dat met die functie kan afhandelen binnen het js-script?
Dus:
Code (js)
1
2
3
4
5
2
3
4
5
$("#imageforme").ajaxForm({
success: function(r) {
// hier je afhandeling
}
});
success: function(r) {
// hier je afhandeling
}
});
Aan de verwerk-zijde waar je naartoe POST:
Code (php)
Deze output zit als parameter in je (wordt na afloop teruggestuurd naar je) callback-functie:
success: function(data) { ... }
Vervolgens kun je daar de draad weer oppakken, de callback-functie wordt uitgevoerd als deze het resultaat van de POST-operatie terug heeft ontvangen:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$("#imageforme").ajaxForm({
// misschien hier ook ergens een vermelding welke formaat de callback functie terugverwacht (json)
success: function(r) {
if (r.error) { // de boolean uit je PHP array
// foutafhandeling
} else {
// verdere verwerking van r.moreData
}
}
});
// misschien hier ook ergens een vermelding welke formaat de callback functie terugverwacht (json)
success: function(r) {
if (r.error) { // de boolean uit je PHP array
// foutafhandeling
} else {
// verdere verwerking van r.moreData
}
}
});
In php:
Code (php)
In javascript:
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
("#imageforme").ajaxForm({
dataType: 'json',
success: function(r) {
// r is de response die van php terugkrijgt
// als je json voor dataType gebruikt wordt
// dit automatisch omgezet naar een object
if (r.success) {
$(#content).html(r.content);
$(#othercontent).html(r.othercontent);
}
}
});
dataType: 'json',
success: function(r) {
// r is de response die van php terugkrijgt
// als je json voor dataType gebruikt wordt
// dit automatisch omgezet naar een object
if (r.success) {
$(#content).html(r.content);
$(#othercontent).html(r.othercontent);
}
}
});
Morgen maar eens fris beginnen.
thx tot dusver!
Verder heb ik heb voor de zekerheid een vermelding van het formaat van de callback functie toegevoegd. Die header staat helemaal bovenin de php functie om te voorkomen dat er een output plaats vindt vóór de header.
In het script heb ik het eenvoudig gehouden:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$("#imageforme").ajaxForm({
dataType: 'json', success: function(r) {
if (r.success) {
$("#previewe").html('<div class="close" title="Verwijderen"><img src="../pics/afbeelding.png">');
}
}
}).submit();
Misschien moet ik ook nog een heading in het script plaatsen?
Toevoeging op 16/02/2015 22:36:12:
Inmiddels is het me gelukt. Ipv
Code (php)
heb ik een heading toegevoegd en de array als volgt gevuld:
Code (php)
1
2
2
$arr = array('success' => true, 'content' => 'test1', 'othercontent' => 'test2');
echo json_encode($arr);
echo json_encode($arr);
Ik kom in het script in de true voorwaarde. Nu nog de meegegeven waarden uitlezen. Dat moet het pad aanr en de naam van de afbeelding worden.......
Toevoeging op 16/02/2015 23:55:58:
Ik heb 'm inmidddels helemaal werkend. Het voorbeeld van Ger (php code) mist een haakje op het eind.
De callback werkt alleen niet als ik ipv test1 een variabele ingeef met pad/naam van de afbeelding.
Weet iemand hoe je dat doet. Ik heb nu dit staan
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$_SESSION['afb'][$afbnr]= $actual_image_name;
$image = "<img src='".$path.$actual_image_name."' height='".$height."' width='".$width."'>";
$arr = array(
"success" => true,
"previewe" => $image);
echo json_encode($arr);
$image = "<img src='".$path.$actual_image_name."' height='".$height."' width='".$width."'>";
$arr = array(
"success" => true,
"previewe" => $image);
echo json_encode($arr);
De afhandeling in het javascript kan die $image niet lezen....
Code (php)
1
2
3
2
3
<?php
$image = '<img src="'.$path.$actual_image_name.'">';
?>
$image = '<img src="'.$path.$actual_image_name.'">';
?>
Je hebt de width en height attributen alleen nodig als je wilt afwijken van het oorspronkelijke formaat.
Trouwens, als je blijft volharden in het versturen van HTML (via JSON?), waarom verstuur je dan niet gewoon HTML, en maak je van het dataType 'html'?
En als ik in dezelfde string een '<' toevoeg loopt het script vast.....
Ik doe geen enkele aanname over waarom en hoe dat gebeurt. Ik constateer dat het gebeurt. Thats all.
Toevoeging op 17/02/2015 21:13:21:
Ik heb de oplossing maar gezocht in de verwerking in het jquery script. Daar plak ik de < en de > aan de naam van de afbeelding. Werkt prima. Wat er nou precies gebeurt in dat geval met de < weet ik niet.
In ieder geval reuze bedankt voor de info!!
Quote:
Trouwens, als je blijft volharden in het versturen van HTML (via JSON?), waarom verstuur je dan niet gewoon HTML, en maak je van het dataType 'html'?
(extra noot: dan hoef je dus ook geen json_encode() te gebruiken)
(extra noot: dan hoef je dus ook geen json_encode() te gebruiken)
Had je dit nog geprobeerd? Lijkt mij een betere oplossing dan bovenstaande quasi-hack.
Het zal wel zo zijn dat ik ook de callback functie had moeten wijzigen of zo,maar nogmaals, ik weet er te weinig van.
Als je nog de tijd zou willen nemen om te verduidelijken hoe een html aanroep geschiedt, dan probeer ik het graag.