Kan ik twee targets meegeven met ajaxform??

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jovank vank

jovank vank

12/02/2015 22:57:16
Quote Anchor link
Ik heb een javascript dat een submit van een form uitvoert .
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)
PHP script in nieuw venster Selecteer het PHP script
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?
 
PHP hulp

PHP hulp

26/03/2019 02:17:48
 
Eddy E

Eddy E

13/02/2015 12:19:48
Quote Anchor link
Je zou een .live() kunnen zetten op #previewd
Zodra daar iets in komt, kopiëren naar het andere doel.
 
Thomas van den Heuvel

Thomas van den Heuvel

13/02/2015 14:50:44
Quote Anchor link
Wat retourneert het PHP script?
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?
 
Jovank vank

jovank vank

13/02/2015 21:33:01
Quote Anchor link
Thomas,
Ik denk dat jij de oplossingsrichting hebt.

Het PHP script retourneert de thumbnail van de ingebrachte afbeelding.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

14/02/2015 13:39:55
Quote Anchor link
Je kan de callback functie op dezelfde manier declareren als met JQuery's $.ajax() methode.
Dus:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$("#imageforme").ajaxForm({
    success: function(r) {
        // hier je afhandeling
    }
});
 
Jovank vank

jovank vank

14/02/2015 16:05:33
Quote Anchor link
Thx Ger, Ik heb vandaag gegoogled op de call back functie. Zag deze oplossing langskomen, maar waar ik niet de vinger achter krijg is hoe ik uit de php functie waarden teruggeef aan de call back functie zodat ik voorwaardelijk acties kan uitvoeren. Ik hoop dat ik duidelijk kan maken waar mijn probleem ligt. Ik weet hier nét te weinig van. Helaas.
 
Thomas van den Heuvel

Thomas van den Heuvel

14/02/2015 19:29:04
Quote Anchor link
Het formaat is meestal JSON.

Aan de verwerk-zijde waar je naartoe POST:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?php
// misschien hier ook een header voor Content-Type
echo json_encode(array(
    'error' => false,
    'moreData' => ...
));

?>


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)
PHP script in nieuw venster Selecteer het PHP script
1
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
        }
    }
});
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

14/02/2015 19:47:17
Quote Anchor link
Ja kan bij de options een datatype meegeven, als je daarvoor json opgeeft kan je meerdere waarden doorgeven.

In php:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
echo json_encode(array('success' => true,
        'content' => 'test1',
        'othercontent' =>'test2');
?>


In javascript:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
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);
        }
    }
});
 
Jovank vank

jovank vank

14/02/2015 23:11:31
Quote Anchor link
OK Ger en Thomas. Nu moet het toch gaan lukken.
Morgen maar eens fris beginnen.
thx tot dusver!
 
Jovank vank

jovank vank

16/02/2015 22:00:16
Quote Anchor link
Voorlopig lukt het me nog niet. Ik heb ontdekt dat de php functie alleen wordt uitgevoerd als ik de regel waarin de json_encode array geëchood wordt tussen aanhalingstekens zet. Dat is wel vreemd omdat alle voorbeelden die ik vind, inclusief die van jullie niet (!) tussen haakjes zet.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
echo json_encode(array('success' => true,
    'content' => 'test1',
    'othercontent' =>'test2');
?>

heb ik een heading toegevoegd en de array als volgt gevuld:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
$arr = array('success' => true, 'content' => 'test1', 'othercontent' => 'test2');
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)
PHP script in nieuw venster Selecteer het PHP script
1
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);


De afhandeling in het javascript kan die $image niet lezen....
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

17/02/2015 10:15:34
Quote Anchor link
Een json string met enkele quotes geeft problemen, dus je moet dit omdraaien
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
$image
= '<img src="'.$path.$actual_image_name.'">';
?>


Je hebt de width en height attributen alleen nodig als je wilt afwijken van het oorspronkelijke formaat.
 
Jovank vank

jovank vank

17/02/2015 14:44:01
Quote Anchor link
Hi Ger, Het ligt niet aan die dubbele quoutes. het ligt aan de eerste '<'. Als ik die weghaal komt de string gewoon door. Het gekke is dat de laatste '>' wel goed door komt. Overigens in de doorgegeven "previewe" als '&gt;' maar in de $("#previewe").html(r.previewe) weer gewoon als een '>'.
 
Thomas van den Heuvel

Thomas van den Heuvel

17/02/2015 14:59:23
Quote Anchor link
Zolang je niet weet wat er precies fout gaat is het onverstandig om hier aannames over te doen.

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'?
 
Jovank vank

jovank vank

17/02/2015 15:15:03
Quote Anchor link
Ik doe geen aannames. Ik kijk mbv alert functie éérst wat er precies in de array staat. En dat is &gt;' ipv '>' en na plaatsen in het Form is het weer een '>'.

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!!
 
Thomas van den Heuvel

Thomas van den Heuvel

17/02/2015 22:31:01
Quote Anchor link
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)

Had je dit nog geprobeerd? Lijkt mij een betere oplossing dan bovenstaande quasi-hack.
 
Jovank vank

jovank vank

17/02/2015 23:03:31
Quote Anchor link
Ik heb dat wel geprobeerd, maar weet er te weinig van om te kunnen zeggen dat ik het correct hebt toegepast. Ik heb in ieder geval dataType: 'html' toegepast in zowel jquery als in de php functie. Maar er gebeurde niets.
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.