Post cu Ajax in modal

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
ddorel
Mesaje: 10

Post cu Ajax in modal

Bună ziua,
Vreau să trimit în aceeași pagină dar în modal două id-uri. Prin alert(id) îmi arată conținutul postului trimis dar în modal nu imi afișază idiurile.
Cum aș putea face?

Cod: Selectaţi tot

<!--modal -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="modalx" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content" >
			<div class="modal-body mb-0 p-0">
				<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
						<iframe allowfullscreen class="embed-responsive-item" data-target="#modalx" data-toggle="modal" data-image="<?php echo $image;?>"  src="imges/modal.jpg"></iframe>
				</div>
			</div>
				<div class="modal-right">					
<?php
if (isset($_POST['id'])){
  echo  $bit = $_POST['bit'];
  echo  $id =  $_POST['id'];   
}
 $sql = "SELECT * FROM `id_table` WHERE `uid`='".$id."' AND `bit` = '".$bit."'"; 
	$result = $conn->query($sql);
	if ($result->num_rows > 0) 
    $row = $result->fetch_assoc();
    $echo_bit = $row["bit"];
	$echo_uid = $row["uid"];
?>
                </div>
		</div>
    </div>
</div>
<!--modal -->


<a class="open" data-uidx="1" data-apr="2">Open</a>
															
<script>
$(function() {
	$('.open').on('click', function() {
		$('#modalx iframe').attr('src', $(this).attr('data-image'))
		$('#modalx #uidx').html($(this).attr('data-uidx'))
		$('#modalx #apre').html($(this).attr('data-apr'))
		$('#modalx').modal({
			closeExisting: false
		});
	})
})
$(document).ready(function() {
	$('.open').click(function() {
		var id = $(this).attr('data-uidx');
		var bit = $(this).attr('data-apr');
		$.ajax({
			type: "POST",
			url: "index.php",
			datatype: "html",
			data: {
				id: id, bit: bit
			},
			success: function(date) {
				alert(id);
			}
		});
	});
});
</script>

MarPlo
Salut,
In cod sunt doua inregistrari "click" pe acelasi selector, incearca sa le unesti.

Cod: Selectaţi tot

<script>
function modalIfrm(){
  $('#modalx iframe').attr('src', $(this).attr('data-image'))
  $('#modalx #uidx').html($(this).attr('data-uidx'))
  $('#modalx #apre').html($(this).attr('data-apr'))
  $('#modalx').modal({
    closeExisting: false
  });
}

$(document).ready(function() {
	$('.open').on('click', function() {
    modalIfrm();
		var id = $(this).attr('data-uidx');
		var bit = $(this).attr('data-apr');
		$.ajax({
			type: "POST",
			url: "index.php",
			datatype: "html",
			data: {
				id: id, bit: bit
			},
			success: function(date) {
				alert(id);
			}
		});
	});
});
</script>

ddorel
Tot nu imi arata nimic , le-am pus asa cum le ai reeditat.

MarPlo
Nu stiu care e problema.
Pune aici un link la acea pagina sau codul ei complet, ca sa se poata testa.

ddorel
De cateva zile cu o gramada de teste tot nu ii dau de cap.
Practic am nevoie ca butonul de like unlike sa functioneze corect pe id-ul linkului video in modal in index.php,
scriptul pentru like unlike functioneaza daca pun manual id videoului si id-ul cu nr. de like-uri daca este conectat la baza de date :

Cod: Selectaţi tot

$vid_id = '30';//ID VIDEO  // $video['uid'] 
$nr_like = '2';//NR. LIKE //$video['aprecieri']
Nu gasesc nici o solutie in rezolvarea acestei probleme , oare se poate?

Cod: Selectaţi tot

<?php 
//index.php
$host = "localhost";
$utilizator = "root";
$parola = "";
$numebd = "test";

$conn = mysqli_connect($host, $utilizator, $parola, $numebd) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<!--users-sport video-->
<!--JS LIKE-->
<?php
require_once("like_video/dbcontroller.php");
$db_handle = new DBController();
$query ="SELECT * FROM users_video";
$result = $db_handle->runQuery($query);
?>
<script>
function addLikes(id,action) {
	$('#videos-'+id+' li').each(function(index) {
		$(this).addClass('selected');
		$('#videos-'+id+' #rating').val((index+1));
		if(index == $('#videos-'+id+' li').index(obj)) {
			return false;	
		}
	});
	$.ajax({
	url: "like_video/add_likes.php",
	data:'id='+id+'&action='+action,
	type: "POST",
	beforeSend: function(){
		$('#videos-'+id+' .btn-likes').html("<img src='images/LoaderIcon.gif' />");
	},

	success: function(data){
	var likes = parseInt($('#likes-'+id).val());
	switch(action) {
		case "like":
		$('#videos-'+id+' .btn-likes').html('<input type="button" title="Nu îmi place" value="like" onClick="addLikes('+id+',\'unlike\')" />');
		likes = likes+1;
		break;
		case "unlike":
		$('#videos-'+id+' .btn-likes').html('<input type="button" title="Îmi place" value="unlike"  onClick="addLikes('+id+',\'like\')" />')
		likes = likes-1;
		break;
	}
	$('#likes-'+id).val(likes);
	if(likes>0) {
		$('#videos-'+id+' .label-likes').html(likes+" ");
	} else {
		$('#videos-'+id+' .label-likes').html('');
	}
	}
	});
}
</script>

<style>
@media (min-width:1144px) {
.modal-dialog {
  width: 1115px;
  top: 50%;

  transform: translate(-50%, -50%) !important;

	}
	
	.modal-right {
	position: absolute;
	top:0px;
	
	text-align: center;
	width:200px;
	min-height:452px;
	background-color:#fff; 
	outline: none;
	border-style: none;
}
	.modal-content {
		-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
		box-shadow: 0 5px 15px rgba(0, 0, 0, .5)
	}
	.modal-lg  {
		width: 1115px
	}
}

</style>
</head>
<body>

<?php

$result_videos = $conn->query("SELECT users_video.*, users.user FROM `users_video`  LEFT JOIN users ON users.user_ident = users_video.user_ident WHERE users_video.user_ident = '24062020130002-vfaec' AND `afis_portofoliu` ='1' ORDER BY users_video.uid DESC" );


if ($result_videos->num_rows > 0) {
while( $video = $result_videos->fetch_assoc() ) {
		$upload_coperta = $video['upload_coperta'];
		$upload_video = $video['upload_video'];
		$upload_tip_link = $video['upload_tip_link'];
		$uidx = $video['uid'];
		$apreciere = $video['aprecieri'];


if($upload_tip_link == "vimeo"){
$url = $upload_video;
$url1 = parse_url($url);	
//$video_play = "https://player.vimeo.com/video".$url1['path'];// TREBUIE DEBLOCAT
		
}
else if($upload_tip_link == "youtube"){
$url = $upload_video;
$url1 = parse_url($url);
$url2 = $url1['query'];
$url_out =  str_replace("v=","","$url2");
//$video_play = "https://www.youtube.com/embed/".$url_out;	// TREBUIE DEBLOCAT
}	
?>

		
<div class="col-xs-12 col-sm-6">
<!---------------------------Modal------------------------------------>

		<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="modalx" role="dialog" tabindex="-1">
			<div class="modal-dialog modal-lg" role="document">
				<!--Content-->
				<div class="modal-content" >
					<!--Body-->
					<div class="modal-body mb-0 p-0">
						<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
							<iframe allowfullscreen class="embed-responsive-item" data-target="#modalx" data-toggle="modal" src="<?php echo $video_play;?>"></iframe>
						</div>
					</div>
					        <div class="modal-right"><button type="button" class="b_close" data-dismiss="modal">&times;</button>


<?php
$ip_address = $_SERVER['REMOTE_ADDR'];
$vid_id = '30';//ID VIDEO  // $video['uid']
$nr_like = '1';//NR. LIKE //$video['aprecieri']
?> 
<!--Aici vreau sa aduc variabilele php $video['uid']  si  $video['aprecieri'] ... id-ul si numarul de aprecieri sa corespunda cu clipul pentru a functiona butonul de like unlike-->
                           <div id="videos-<?php echo $vid_id;?>">
                               <input type="hidden" id="likes-<?php echo $vid_id;?>" value="<?php echo $nr_like;?>">
                               <?php
			   
							   $query ="SELECT * FROM ipaddress_likes_map WHERE video_id = '".$vid_id."' AND ip_address = '" . $ip_address . "'";
							   $count = $db_handle->numRows($query);
							   $str_like = "like";
							   $titleH="Îmi place";
							   if(!empty($count)) {
							   $titleH="Nu îmi place";
							   $str_like = "unlike";
								  }
								  
?>
								<div class="btn-likes">
								   <!-- BUTTON LIKE UNLIKE //$str_like-->
								   <input type="button"  title="<?php echo $titleH;?>" value="<?php echo $str_like;?>" onClick="addLikes('<?php echo $vid_id;?>','<?php echo $str_like;?>' )" />
							    </div>	
                                <div class="label-likes" ><?php if(!empty($nr_like)) { echo $nr_like; } 
                             ?> 
                                </div>		
		                   </div>

                        </div>
				</div>
			</div>
		</div>
		
<!---------------------------Modal ------------------------------------>
		
		<div class="asp asp-video-d" style="background-image:url(<?php echo $upload_coperta;?>); height:100px; width:150px;">
			 <a  class="videomodal" id="<?php echo $video['uid'];?>"  data-video="<?php echo $video_play;?>" 
			                             data-a="<?php echo $video['uid'];?>"
										 data-apr="<?php echo $video['aprecieri'];?>"
										 style="color:#fff">
										 Button Video</a>
        </div>
		
</div>

<?php }} ?>

<script>

$(document).ready(function() {
	$('.videomodal').on('click', function() {
		$('#modalx iframe').attr('src', $(this).attr('data-video'))
		$('#modalx #uidx').html($(this).attr('data-a'))
		$('#modalx #apre').html($(this).attr('data-apr'))
        $('#modalx').modal({
			closeExisting: false
		});	
	});
});
$('#modalx').on('hidden.bs.modal', function(e) {
	$('#modalx iframe').attr("src", $("#modalx iframe").attr("src"));
});

</script>

</body>
</html>

MarPlo
Nu prea inteleg mecanismul si ce anume nu functioneaza.
Oricum, daca functioneaza cand pui manual id-ul, poate ca problema e de la php.
Trebuie sa faci verificari in codul html rezultat.
De exemplu, cand deschizi modalul, verifica daca in codul acela html sunt id-urile (Cu Right-Clic apoi alegi Inspect).

Eu nu am cum sa fac teste cu codul pe care l-ai pus, nu am baza aceea de date si nici nu ai pus in cod librariile de functii js pe care le folosesti pentru jquery si modal.

Ideea e sa faci mai multe verificari, intai in codul html rezultat sa vezi daca e adaugat id-ul de la php, apoi cu alert() in functiile JS sa vezi ce id e transmis.
In functiile de verificarile facute poti sa descoperi unde e problema.

Subiecte similare