Récupérer une donnée javascript en php ou html ?

Résolu/Fermé
Timama Messages postés 8 Date d'inscription jeudi 26 mai 2011 Statut Membre Dernière intervention 11 juillet 2016 - 8 juil. 2016 à 11:42
Timama Messages postés 8 Date d'inscription jeudi 26 mai 2011 Statut Membre Dernière intervention 11 juillet 2016 - 11 juil. 2016 à 11:04


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

jordane45 Messages postés 36361 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 septembre 2022 4 359
9 juil. 2016 à 01:35
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.

0
Timama Messages postés 8 Date d'inscription jeudi 26 mai 2011 Statut Membre Dernière intervention 11 juillet 2016 1
10 juil. 2016 à 11:03
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>
0
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 9/07/2016 à 03:36
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
-->
0
Timama Messages postés 8 Date d'inscription jeudi 26 mai 2011 Statut Membre Dernière intervention 11 juillet 2016 1
10 juil. 2016 à 11:08
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 !
0
Timama Messages postés 8 Date d'inscription jeudi 26 mai 2011 Statut Membre Dernière intervention 11 juillet 2016 1
10 juil. 2016 à 11:13
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 !
0
Timama Messages postés 8 Date d'inscription jeudi 26 mai 2011 Statut Membre Dernière intervention 11 juillet 2016 1
11 juil. 2016 à 11:04
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 !
0