Forum PHP.pl > [AJAX]Dynamiczne ładowanie strony z parametrami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX]Dynamiczne ładowanie strony z parametrami

piotr485

26.06.2016, 21:18:59

Witam.

Chciałbym zrobić coś takiego, aby klikając w link otwierało mi się nowe okno

Teraz mam coś takiego:

[HTML] pobierz, plaintext 
<a href="#?w=930" rel="window_140" class="poplight">Link</a>
 
 
<div id="window_141" class="popup_block">
Treść okna po kliknięciu w link
</div>
 
[HTML] pobierz, plaintext

Problem w tym, że teraz mam ok. 150 takich linków na stronie z produktami i moja podstrona zajmuje 12tys. lini co przekłada się niestety na wolne wczytywanie strony.

Chciałbym zrobić coś takiego że dopiero po kliknięciu w link zaczynały by się wczytywać dane, czyli dodać tam jakiś atrybut data-id i z niego odczytywać - tylko nie mam zielonego pojęcia jak to zrobić, czy mógłby mnie ktoś nakierować ? Dodam jeszcze że w treści otwierającego się okna są checkboxy i przycisk do wysłania metodą POST.

Star

26.06.2016, 21:53:17

Mozesz zrobic cos w tym stylu, w pliku content.php napisz kod ktory wygeneruje odpowiednia treść

[PHP] pobierz, plaintext 
			<a href="#?w=930" rel="window_140" class="poplight">Link1</a>
			<a href="#?w=930" rel="window_141" class="poplight">Link2</a>
			<a href="#?w=930" rel="window_142" class="poplight">Link3</a>
			<div id="content"></div>
 
			<script>
			$('.poplight').click(function(){
 
				$("#content").empty();
				var window =  $( this ).attr( "rel" );
 
						$.ajax({
							  method: "POST",
							  url: "content.php",
							  data: { window: window }
 
						}).done(function(data) {
 
						 var newDiv = document.createElement('div');
							newDiv.id= window;
							newDiv.innerHTML= data;
							document.getElementById('content').appendChild(newDiv); 
 
						});
			});
 
 
			</script>
[PHP] pobierz, plaintext

piotr485

29.06.2016, 16:25:38

Mam coś takiego:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
 
<head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>
 
<body>
 
    <div><a href="#myModal" data-toggle="modal" id="1" data-target="#edit-modal">Edit 1</a></div>
    <div><a href="#myModal" data-toggle="modal" id="2" data-target="#edit-modal">Edit 2</a></div>
    <div><a href="#myModal" data-toggle="modal" id="3" data-target="#edit-modal">Edit 3</a></div>
 
    <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body edit-content">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        $('#edit-modal').on('show.bs.modal', function(e) {
 
            var $modal = $(this),
                esseyId = e.relatedTarget.id;
 
            $.ajax({
                cache: false,
                type: 'POST',
                url: 'content.php',
                data: 'EID='+essay_id,
                success: function(data) 
                {
                    $modal.find('.edit-content').html(esseyId);
                }
            });
 
        })
    </script>
 
</body>
 
</html>
[HTML] pobierz, plaintext

Tylko pytanie co powinno być w pliku content.php bo teraz mam coś takiego:

[HTML] pobierz, plaintext 
<?php
$editId = $_POST['EID'];
?>
  <div class="jumbotron">
   <div class="container">
    <h1>The ID Selected is <?php echo $editId ?></h1>
   </div>
  </div>
[HTML] pobierz, plaintext

niestety wogóle tak jak by niewczytywał tego pliku bo jest pusto w okienku

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.