Récupérer une donnée javascript en php ou html ? [Résolu/Fermé]

Signaler
Messages postés
8
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
11 juillet 2016
-
Messages postés
8
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
11 juillet 2016
-


Bonjour,

Je souhaite récupérer une donnée javascript (chemin vers un image) que je passe dans un popup. Et je veux utiliser ce popup absolument.

Le popup doit ouvrir cette image. Mais je n'arrive pas à récupérer cette donnée dans le popup.

Faut il la récupérer en PHP avec Ajax? (c'est l'info que j'ai pu trouvé).

J'ai cherché dans le forum...j'ai trouvé des choses similaires mais les codes étaient tous très compliqués...

Pour résumé, J'ai la balise <a> qui est une image sur laquelle on clique et qui ouvre un popup :


<a class="poplight" href="#" data-width="630" data-rel="fichesbouteilles" data-nom-Jpg="<?php echo $pdf_champagne1; ?>" data-nom-nomJpg="<?php echo $pdf_champagne1; ?>" >


avec le script suivant :

script type="text/javascript">

jQuery(function($){

$('a.poplight').on('click', function() {
var popID = $(this).data('rel'); //Trouver la pop-up correspondante
var popWidth = $(this).data('width'); //Trouver la largeur

$(".dataJpgPopup").replaceWith("$nomfichierimage =" + $(this).data("nomImage") + ";");

....... (j'ai pas tout mis)

return false;
});


et le popup où je récupère la donnée

<div id="fichesbouteilles" class="popup_block">
<p> haut </p>

<?php echo '<div class="dataJpgPopup"></div> ' ?>


<img src="<?php echo $nomfichierimage ; ?>" >
<p> bas</p>


</div>


mais quand je regarde l'inspecteur de firefox, cela me donne

<p> haut </p>

$nomfichierimage =http://champagner-pierre-trichet.de/wp-content/uploads/2016/07/2016_BESCHREIBUNG_Champagner-Pierre-TRICHET_BRUT-Premium_WEB-.jpg;

<img src="" +="" $(this).data("nomnomjpg")="" ""="">

<p> bas</p>

donc le chemin passe mais je n'arrive pas à bien le récupérer....
JE continue à chercher...

si quelqu’un à une idée? un conseil?
Je ne comprend pas encore tout en javascript...

merci beaucoup pour votre aide

2 réponses

Messages postés
33011
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juin 2021
3 572
Bonjour,

Tu marques :
....... (j'ai pas tout mis)

Je pense que justement... c'est dans ce que tu n'as pas mis que se trouve le souci.....

Merci de nous mettre l'intégralité du code.

Messages postés
8
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
11 juillet 2016
1
merci pour ta remarque. C'était pour ne pas poluer.... le reste n'a rien à voir mais bon, le voici au complet.


<!-- script pour overlay FADE -->
<script type="text/javascript">

jQuery(function($){

//Lorsque vous cliquez sur un lien de la classe poplight
$('a.poplight').on('click', function() {
var popID = $(this).data('rel'); //Trouver la pop-up correspondante
var popWidth = $(this).data('width'); //Trouver la largeur

// passage de l'id de l'évènement dans le popup pour inscription en ligne
$("#inscriptionenligneform").append("<input type=\"hidden\" name=\"idEvenement\" value=\"" + $(this).data("idEvenement") + "\"/>");
$(".nomEvenementFormulaire").replaceWith("<div class=\"nomEvenementFormulaire\">" + $(this).data("nomEvenement") + "</div>");

$("#inscriptionenligneformmob").append("<input type=\"hidden\" name=\"idEvenement\" value=\"" + $(this).data("idEvenement") + "\"/>");
$(".nomEvenementFormulairemob").replaceWith("<div class=\"nomEvenementFormulairemob\">" + $(this).data("nomEvenement") + "</div>");

//$("#fichesbouteilles").append("<input id=\"fichierimage\" type=\"hidden\" name=\"dataJpgPopup\" value=\"" + $(this).data("nomJpg") + "\"/>");
//$(".dataJpgPopup").replaceWith("<div class=\"dataJpgPopup\">" + $(this).data("nomImage") + "</div>");
//$(".dataJpgPopup").replaceWith("<div class=\"dataJpgPopup\"> <?php //$nomfichierimage = '" + $(this).data("nomJpg") + " '; ?></div>");
//$(".dataJpgPopup").replaceWith("<div class=\"dataJpgPopup\"> $nomfichierimage = " + $(this).data("nomJpg") + " </div>");
//$(".dataJpgPopup").replaceWith("<?php $nomfichierimage = '" + $(this).data("nomnomJpg") + "'; ?>");
$(".dataJpgPopup").replaceWith("$nomfichierimage =" + $(this).data("nomImage") + ";");


//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="http://champagner-pierre-trichet.de/wp-content/themes/pierretrichet/images/close-popup.png" class="btn_close" title="Close Window" alt="Close" /></a>');

//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
$('#content').css({'position' : 'fixed'}).fadeIn();

return false;
});


//Close Popups and Fade Layer
$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
$('#content').css({'position' : 'relative'}).fadeIn();
}); //...ils disparaissent ensemble

return false;
});


});
</script>
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017

code HTML sans php
( à tester sur --> codepen.io/pen )

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<div data-role="page">
<div data-role="header">
<h1>Comment</h1>
<h1> ça marche :)</h1>
</div>

<div id="pageone" data-role="main" class="ui-content">
<p>Clique su le logo " ? CCM "</p>
<br>
<br>
<br>
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="http://img15.hostingpics.net/pics/566590Capturedu20160623005801.png" alt"CCM" style="width:200px;"></a>

<div data-role="popup" id="myPopup">
<p>This is my picture!</p>
<a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="https://www.w3schools.com/jquerymobile/skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>

<div data-role="footer">
<h1>Footer </h1>
</div>
</div>

</body>

</html>

<!--
Souces de ce code : https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image
-->
Messages postés
8
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
11 juillet 2016
1
ouahou ...okay. j'étudie tout ça.....
j'ai regardé sur codepen.io/pen.....

je regarde par rapport à mon cas de figure.....

et je reviens ici

merci beaucoup !
Messages postés
8
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
11 juillet 2016
1
alors...... okay, ton exemple n'utilise pas mon popup....
ça fonctionne très bien ;-)

mais, cela ne règle pas le problème de passage de la donnée "chemin vers l'image" que je veux faire passer dans le popup...

c'est surtout ça mon seul et unique problème... le passage de la donnée en javascript et la récupération de cette donnée..

je continue à chercher...

merci pour votre aide !
Messages postés
8
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
11 juillet 2016
1
j'ai trouvé !


En fait pour bien passer la donnée pour avoir le chemin de l'image,
j'ai écrit


$(".dataJpgPopup").replaceWith(" <img src=\" " + $(this).data("nomImage") + " \" >");



et le popup ouvre l'image !

merci pour votre aide !

RESOLU !