error passing data to modal

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
grigorakis4
Δημοσιεύσεις: 126
Εγγραφή: 16 Οκτ 2012 14:15
Τοποθεσία: ATHENS
Επικοινωνία:

error passing data to modal

Δημοσίευση από grigorakis4 » 18 Φεβ 2016 19:15

γεια σας, εχω ενα πρόβλημα:

σε ένα loop δημιουργω διάφορα προιόντα οπου σε κάθε προιον εχει ενα Button με data attr (id, title κλπ) του κάθε προιον...

το button on click -> γίνετε append ενα boostrap modal στο footer οπου πέρνει τιμές απο τα data attr..

τo modal ανοιγει κανονικά αλλα οσες φορες και να το πατησω μου παραγει τις τιμες που ειχε στο πρωτο click

δλδ παταω 3-4 προιοντα ανοιγει κανονικα το κάθε modal αλλα εχουν όλα τις τιμες (name, id image) που ειχε το πρωτο προιον που πατησα...

ο κωδικας μου ειναι:

$('.btn-product-overlay').on('click', function(e){

var _this = $(this).data();


var modalquickview = '<div id="quick_view_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">'+
'<div class="modal-dialog modal-lg">'+
'<div class="modal-content">'+
'<div class="row">'+
'<div class="col-md-12 text-center"><h3 class="q-m-t">'+ _this.title +'</h3></div>'+
'</div>'+
'<div class="row">'+
' <div class="col-md-6 modal-q-img">'+
'<img class="img-responsive img-m-i" src="'+ _this.img +'" alt="'+ _this.title +'" />'+
'</div>'+
'<div class="col-md-6 q-v-d">'+
'<div class="q-v-p">'+ _this.price +'&euro;</div>'+
'<div class="q-v-b">'+
'<a class="btn btn-warning btn-modal-prod-det" href="'+ _this.url +'">ΛΕΠΤΟΜΕΡΗΣ ΠΡΟΒΟΛΗ</a>'+
'<button class="btn btn-danger btn-lg" data-dismiss="modal">ΚΛΕΙΣΙΜΟ</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div></div>';

$('footer').append(modalquickview);

$('#quick_view_modal').modal('show');

e.preventDefault();

});
Εικόνα

Άβαταρ μέλους
grigorakis4
Δημοσιεύσεις: 126
Εγγραφή: 16 Οκτ 2012 14:15
Τοποθεσία: ATHENS
Επικοινωνία:

error passing data to modal

Δημοσίευση από grigorakis4 » 18 Φεβ 2016 19:18

στο console.log μου εμφανιζει κανονικα τις τιμες... αρα τα data attr δεν εχουν θέμα...


λογικά το θέμα θα είναι στον κωδικα...
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

error passing data to modal

Δημοσίευση από alou » 18 Φεβ 2016 21:08

Κώδικας: Επιλογή όλων


$&#40;'.btn-product-overlay'&#41;.on&#40;'click', function&#40;e&#41;&#123;
		e.preventDefault&#40;&#41;;
		$&#40;'#quick_view_modal'&#41;.remove&#40;&#41;;
		var _this = $&#40;this&#41;.data&#40;&#41;;

		var modalquickview = '<div id="quick_view_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">\
		<div class="modal-dialog modal-lg">\
		<div class="modal-content">\
		<div class="row">\
		<div class="col-md-12 text-center"><h3 class="q-m-t">'+ _this.title +'</h3></div>\
		</div>\
		<div class="row">\
		<div class="col-md-6 modal-q-img">\
		<img class="img-responsive img-m-i" src="'+ _this.img +'" alt="'+ _this.title +'" />\
		</div>\
		<div class="col-md-6 q-v-d">\
		<div class="q-v-p">'+ _this.price +'&euro;</div>\
		<div class="q-v-b">\
		<a class="btn btn-warning btn-modal-prod-det" href="'+ _this.url +'">ΛΕΠΤΟΜΕΡΗΣ ΠΡΟΒΟΛΗ</a>\
		<button class="btn btn-danger btn-lg" data-dismiss="modal">ΚΛΕΙΣΙΜΟ</button>\
		</div>\
		</div>\
		</div>\
		</div></div>';

		$&#40;'footer'&#41;.append&#40;modalquickview&#41;;

		$&#40;'#quick_view_modal'&#41;.modal&#40;'show'&#41;;

	&#125;&#41;;


Άβαταρ μέλους
grigorakis4
Δημοσιεύσεις: 126
Εγγραφή: 16 Οκτ 2012 14:15
Τοποθεσία: ATHENS
Επικοινωνία:

error passing data to modal

Δημοσίευση από grigorakis4 » 18 Φεβ 2016 21:16

@alou είσαι θεός... thanks!! ;)
Εικόνα

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες