IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Executer script après success ajax


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    266
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 266
    Par défaut Executer script après success ajax
    Salut tout le monde !

    Comme d'habitude, je galère !

    Voilà mon souci... J'aimerai exécuter un script une fois ma requête ajax terminée.

    SCRIPT - fancy.php:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    <!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Fancy Product Designer</title>
     
        <!-- Style sheets -->
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.2.custom.min.css" />
    	<link rel="stylesheet" type="text/css" href="css/jquery.fancyProductDesigner.css" />
    	<link rel="stylesheet" type="text/css" href="css/jquery.fancyProductDesigner-fonts.css" />
     
        <!-- Include js files -->
    	<script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/jquery.fancyProductDesigner.min.js" type="text/javascript"></script>
     
     
     
     
    	<script type="text/javascript">
     
     
    		jQuery(document).ready(function() {
     
    			//call the plugin and save it in a variable to have access to the API
    			var fpd = $('#fpd').fancyProductDesigner({
    				editorMode: false,
    				fonts: ['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva', 'Fearless'],
    				//these are the parameters for the text that is added via the "Add Text" button
    				customTextParamters: {x: 210, y: 250, colors: "#000000", removable: true, resizable: false, draggable: true, rotatable: true, price:5 }
    			})
    			.data('fancy-product-designer');
     
     
    			//get current price when product is created and update it when price changes
    			$('#fpd')
    			.bind('productCreate', function(evt){
    				$('#thsirt-output').html('Accéder au paiement');
    				$('#thsirt-price').text(fpd.getPrice());
    			})
    			.bind('priceChange', function(evt, price, currentPrice) {
    				$('#thsirt-price').text(currentPrice);
    			});
     
    			//button to print the product
    			$('#print-button').click(function(){
    				fpd.print();
    				return false;
    			});
     
    			//button to print the product
    			$('#checkout-button').click(function(){
    				//get only editable elements
    				var product = fpd.getProduct(true);
    				var output = '';
    				for(var i=0; i < product.length; ++i) {
    					output += _getProductOutput(product[i]);
    				}
     
    				$('#thsirt-output').html(output);
     
    				return false;
    			});
     
    			//recreate products
    			$('#recreation-button').click(function(){
    				var product = fpd.getProduct(false);
    				$('#recreation-form input:first').val(JSON.stringify(product)).parent().submit();
    				return false;
    			});
     
    			//click handler for input upload
    			$('#upload-button').click(function(){
    				$('#design-upload').click();
    				return false;
    			});
     
    			//upload image
    			document.getElementById('design-upload').onchange = function (e) {
    				if(window.FileReader) {
    					var reader = new FileReader();
    			    	reader.readAsDataURL(e.target.files[0]); 
    			    	reader.onload = function (e) {
    			    		var image = new Image;
    			    		image.src = e.target.result;
    			    		image.onload = function() {
    			    			//add new image to product
    				    		fpd.addElement('image', e.target.result, 'my custom design', {zChangeable: true, removable: true, draggable: true, resizable: true, rotatable: true, x: 200, y: 200, price:15 });  	
    			    		};	    		               
    					};
    				}
    				else {
    					alert('FileReader API is not supported in your browser, please use Firefox, Safari, Chrome or IE10!')
    				}
    			};
     
    			//format a product object for the output panel
    			function _getProductOutput(product) {
    				var output = '<strong>Product:</strong> '+product.title;
     
    				output += '<br /><strong>Elements:</strong>';
    				output += '<p>';
    				$(product.elements).each(function(i, elem) {
    					output += '<strong>Title:</strong> ' + elem.title;
    					output += '<br />';
    					output += '<strong>Parameters:</strong><br />';
    					for (var prop in elem.parameters) {
    				      output += prop + ": " + elem.parameters[prop] + ', ';
    				   }
    				   output = output.substring(0, output.length-2);
    				   output += '<br /><br />';
    				});
    				output += '</p>';
    				return output;
    			};
     
    			$('#loader').hide();
        // lorsque je soumets le formulaire
        $('#form_product').on('change', function() {
    		$('#loader').show();
            // je récupère les valeurs
            var category = $('#search_product').val();
     
     
            // je vérifie une première fois pour ne pas lancer la requête HTTP
            // si je sais que mon PHP renverra une erreur
     
                // appel Ajax
                $.ajax({
                    url: "get_product.php", // le nom du fichier indiqué dans le formulaire
                    type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
                    data: $(this).serialize(), // je sérialise les données (voir plus loin), ici les $_POST
                    success: function(data) {
     
    			var g = document.createElement('script');
    			var s = document.getElementsByTagName('script')[0];
    			g.text = data;
    			s.parentNode.insertBefore(g, s); 
    			$('#loader').hide();
                     //document.getElementById("gal_img").style.display = '';
                    }
                });
     
            return false; // j'empêche le navigateur de soumettre lui-même le formulaire
        });
     
     
    		});
     
     
     
    </script>
     
     
        </head>
     
        <body>
     
     
    	<form action="fancy.php" name="form_product" id="form_product" method="post">
     
     
     
    		<select name="search_product"  id="search_product_id">
    		<option value="" selected="selected">Thème...</option>
    	<?php
     
    		mysql_connect('localhost', 'root', '');
    		mysql_select_db('opencart');
    		mysql_query("SET NAMES 'utf8'");
     
    	$req=mysql_query("
    		     SELECT category_id, name FROM oc_category_description
    		     ");
     
     
    	while($dnn = mysql_fetch_array($req))
     
    	{	
    	?>
     
    	<option value="<?php echo $dnn['category_id'];?>"><?php echo $dnn['name'];?></option>';
     
    	<?php
            
             }
                     
                    
                    ?>
    		</select>		
     
     
    	</form>
     
     
    	<div id="response-div"></div>
     
     
        	<div id="main-container" class="container">      
        	<div id="content">
     
        		<div id="fpd">
     
     
    			<div class="fpd-product" title="Toilet" data-thumbnail="images/toilet/top/preview.png">
     
    			   <img src="images/toilet/top/base.png" title="Base Front" data-parameters='{"x": 123, "y": 81, "price": 0}' />
    			   <!--<span title="Any Text" data-parameters='{"x": 243, "y": 181, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000", "price": 12}' >Ajouter du texte</span>-->
    			   <div class="fpd-product" title="Toilet Back" data-thumbnail="images/toilet/side/preview.png">
    		    	   <img src="images/toilet/side/base.png" title="Base Back" data-parameters='{"x": 123, "y": 81, "price": 0}' />
    			</div>
     
    			</div>
     
    		  		<div class="fpd-design" id="product_list">
     
    					<img src="images/designs/swirl.png" title="Swirl" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 10}' />
    			  		<img src="images/designs/swirl2.png" title="Swirl 2" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 10}' />
    			  		<img src="images/designs/swirl3.png" title="Swirl 3" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 10}' />
    			  		<img src="images/designs/heart_blur.png" title="Heart Blur" data-parameters='{"x": 215, "y": 200, "colors": "#bf0200", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 5}' />
    			  		<img src="images/designs/converse.png" title="Converse" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 10}' />
    			  		<img src="images/designs/crown.png" title="Crown" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 10}' />
    			  		<img src="images/designs/men_women.png" title="Men hits Women" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 10}' />
    			  		<img src="images/designs/retro_1.png" title="Retro One" data-parameters='{"x": 210, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "scale": 0.25, "price": 10}' />
    			  		<img src="images/designs/retro_2.png" title="Retro Two" data-parameters='{"x": 193, "y": 180, "colors": "#ffffff", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "scale": 0.46, "price": 10}' />
    			  		<img src="images/designs/retro_3.png" title="Retro Three" data-parameters='{"x": 240, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "scale": 0.25, "price": 10}' />
    			  		<img src="images/designs/heart_circle.png" title="Heart Circle" data-parameters='{"x": 240, "y": 200, "colors": "#007D41", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "scale": 0.4, "price": 10}' />
     
    				</div>
     
    			  	<!--<a href="#" id="print-button" class="btn btn-info">Print</a>-->
    			  	<a href="#" id="checkout-button" class="btn btn-success">Accéder au paiement</a>
    			  	<!-- Only working on a webserver -->
    			  	<!--<a href="#" id="recreation-button" class="btn btn-success">Recreate product</a>-->
    			  	<a href="#" id="upload-button" class="btn btn-warning">Charger votre image</a>
     
    			  	<span class="pull-right price badge badge-inverse"><span id="thsirt-price"></span> €</span>
     
    			  	<input type="file" id="design-upload" style="display: none;" />
    			  	<form action="recreation.php" id="recreation-form" method="post">
    					<input type="hidden" name="recreation_product" value="" />
    				</form>
     
    		  	</div>
    		  	<div id="thsirt-output" class="output"></div>
    	       </div>   
        	</div>
        </body>
    </html>
    J'ai une liste de produit qui doit après sélection me retourner le script à exécuter:

    CODE - get_product.php:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <?php
    include('config.php');
     
     if (isset($_POST["search_product"]))
    {
     
     
    	$category = $_POST["search_product"];
     
            mysql_connect('localhost', 'root', '');
    		mysql_select_db('opencart');
    		mysql_query("SET NAMES 'utf8'");
     
        $req=mysql_query("
    		     SELECT oc_product.image image, oc_product.product_id as id, oc_product.price as price, oc_product.model as model FROM oc_product
                         JOIN oc_product_to_category ON oc_product_to_category.product_id = oc_product.product_id
                         WHERE oc_product_to_category.category_id = $category");
     
     
     
     
     
        while($dnn = mysql_fetch_array($req)) {
     
           echo 'fpd.addDesign(';
           echo '"image/';
           echo $dnn['image'];
           echo '","';
           echo $dnn['model'];
           echo '",';
           echo '{x: 215, y: 200, colors: false, removable: true, draggable: true, rotatable: true, resizable: true, price: ';
           echo $dnn["price"];
           echo '});';
     
     
     
        }
     
     
    }
     
     
    ?>
    C'est pas joli. Je sais.

    Ca me retourne Uncaught TypeError: Object #<HTMLDivElement> has no method 'addDesign'

    Je ne comprends plus rien !!!

    si je mets directement ce code (success data ajax):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    fpd.addDesign("image/data/demo/samsung_syncmaster_941bw.jpg","Product 6",{x: 215, y: 200, colors: false, removable: true, draggable: true, rotatable: true, resizable: true, price: 200.0000});fpd.addDesign("image/data/demo/apple_cinema_30.jpg","Product 15",{x: 215, y: 200, colors: false, removable: true, draggable: true, rotatable: true, resizable: true, price: 100.0000});
    ça fonctionne très bien !

    Merci de votre aide !

  2. #2
    Membre chevronné
    Avatar de Darkaurora
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2010
    Messages
    382
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2010
    Messages : 382
    Billets dans le blog
    1
    Par défaut
    A mon avis tu ferais tout aussi bien de retourner les données nécessaires à la création du code plutôt que de créer un pseudo code js dans ton php.

    C'est pas que ça ne peut pas marcher mais le plus simple serait de retourner un tableau ou objet avec un dataType Json vue que tu n'as besoin que de l'url de ton image, du modèle et du prix...

    Tente de récupérer ces informations, test les et si c'est concluant ajoute ton design.

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    266
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 266
    Par défaut
    Merci de ta réponse !!

    Aïe ! Aïe ! json, c'est encore le trou noir pour moi. Je vais essayer de voir ce que je peux faire... Tu n'aurais pas une piste pour démarrer ? Un bout de code ?

    Merci de ton aide

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    266
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 266
    Par défaut
    Je crois voir...

    Dans mon php, je génère le code json:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     var products = {
     "product1": [
       { "prix": 50,
         "url": "xxx"
       }
     ],
    "product2": [
       { "prix": 35,
         "url": "yyy"
       }
       ]
    };
    Puis dans mon ajax success, j'exploite le json dans ma fonction AddDesign avec une boucle pour chaque produit:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    products.product1[0].prix
    Je sais pas trop comment traiter tout ça dans le success ?

  5. #5
    Membre chevronné
    Avatar de Darkaurora
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2010
    Messages
    382
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2010
    Messages : 382
    Billets dans le blog
    1
    Par défaut
    Ici ton code de départ, sans dataType Json.
    Ton objet products de ton php si tu le retourne avec ton code et que tu le console.log() tu ne devrais voir qu'une chaîne de caractère et non un objet...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    $.ajax({
                    url: "get_product.php", // le nom du fichier indiqué dans le formulaire
                    type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
                    data: $(this).serialize(), // je sérialise les données (voir plus loin), ici les $_POST
                    success: function(data) {
     
    			var g = document.createElement('script');
    			var s = document.getElementsByTagName('script')[0];
    			g.text = data;
    			s.parentNode.insertBefore(g, s); 
    			$('#loader').hide();
                     //document.getElementById("gal_img").style.display = '';
                    }
                });
    il suffit d'ajouter une option dataType: 'json' comme ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $.ajax({
                    url: "get_product.php", // le nom du fichier indiqué dans le formulaire
                    type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
                    dataType: 'json',
                    data: $(this).serialize(), // je sérialise les données (voir plus loin), ici les $_POST
                    success: function(data) {
     
    			var g = document.createElement('script');
    			var s = document.getElementsByTagName('script')[0];
    			g.text = data;
    			s.parentNode.insertBefore(g, s); 
    			$('#loader').hide();
                     //document.getElementById("gal_img").style.display = '';
                    }
                });
    dans ton php un simple echo json_encode( $products ); fait l'affaire

    Je ne sais pas si j'ai été bien clair, donc récapitulons

    1) tu génères un objet ou un tableau php qui s'appelle $products;

    2) tu le retourne grâce à echo json_encode( $products );

    3) tu peux le récupérer via ajax car tu as stipulé dataType: 'json';

    4) console.log( data ) dans ton success.

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    266
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 266
    Par défaut
    Salut !

    Merci de ta réponse... Je n'ai pas trop le temps de voir ça en ce moment mais je reviens vers toi si j'ai des questions. Merci

Discussions similaires

  1. Réponses: 2
    Dernier message: 04/04/2011, 09h27
  2. Réponses: 0
    Dernier message: 20/03/2011, 16h17
  3. Réponses: 7
    Dernier message: 08/04/2010, 16h10
  4. execution du script apres click du bouton submit
    Par khafor dans le forum Langage
    Réponses: 5
    Dernier message: 22/11/2009, 15h33
  5. [AJAX] acces refusé sur execution script ajax avec IE
    Par avogadro dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 25/01/2007, 11h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo