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

Résolu
Timama Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   -  
Timama Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   -


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
A voir également:

2 réponses

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention   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>
0
leito666 Messages postés 74 Date d'inscription   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   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 !
0
Timama Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   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 !
0
Timama Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   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 !
0