Wyświetlenie danych w oknie modalnym Bootstrap

Mam zrobiony panel CRUD. Przykładowo po kliknięciu edycji ma wyświetlac się okno modalne z danymi danego rekordu. Jak te dane poprawnie do okna przesłać? Całość jest w PHP. Obecnie mam to tak:
w pliku address.phtml
<a href="?action=address_edit&id='.$entry->CustomerAddressId.'" class="btn btn-primary btn-sm glyphicon glyphicon-edit" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" data-original-title="Edycja"></a>

w pliku addressEdit.phtml

<div class="modal fade" id="myModal" 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">&times;</button>
        <h4 class="modal-title">Edycja</h4>
      </div>
      <div class="modal-body">


<div id="main">
	<div id="maincontent">
		<div class="inputform">
			<div class="row">
				<div class="hidden-xs col-sm-2"></div>
				<div class="col-xs-12 col-sm-8">
<?php

if (isset($_GET['id'])) {
	if ($this->get('data')) {
		$value_id = $_GET['id'];
		$value_name = 'Edytuj';
	} else {
		$value_id = 0;
		$value_name = 'Dodaj nowy';
	}
} else {
	$value_id = 0;
	$value_name = 'Dodaj nowy';
}



       
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Jak poprawnie odwołać się z buttona do formy edycji.Proszę o rady.

Zadałeś dwa różne pytania w jednym poście i mam teraz drobny problem ze zrozumieniem tego, zatem po kolei:

Jak te dane [rekordu] poprawnie do okna przesłać?

Przesyłasz id rekordu, w kontrolerze wczytujesz model i przekazujesz go do widoku.

Jak poprawnie odwołać się z buttona do formy edycji.

W jakim celu chcesz się do niego odwołać?

Rzecz w tym żeby wyświetlić poprawnie widok w oknie modalnym. Chodzi mi głownie o mechanizm jak to powinno działać, bo wszystkie przykłady w dokumentacji są w 1 pliku robione;/

Wyślij ajaxem zapytanie i otwórz popup z treścią HTML z tego zapytania.
Lub odbieraj JSON i automatycznie przypisuj pola.

Patryk27 napisał(a):

Wyślij ajaxem zapytanie i otwórz popup z treścią HTML z tego zapytania.
Lub odbieraj JSON i automatycznie przypisuj pola.

Tylko w tym momencie musiałbym widok mocno przerobić. Wygląda to tak:

<div class="col-xs-12 col-sm-7">
										<label for="inputAddressCity" class="control-label">Miasto:</label>
										<input type="text" id="inputAddressCity" name="inputAddressCity" class="form-control" placeholder="Miasto" value="
<?php
if ($this->get('data')) {
	echo $this->get('data')->City;
}
?>

no chyba że moge całość załadować tak jak jest?

Zrób sobie view helper renderujący inputy, ułatwisz sobie życie pod każdym możliwym względem.

Możesz podać jakiś przykład?
Jakbyś mógł mi też wyjaśnić w którym miejscu przesłać:

action=address_edit&id='.$entry->CustomerAddressId.'

Musi być gdzieś informacja jaki rekord ma być edytowany.

No nie wiem, w jakim frameworku pracujesz, więc takim pseudokodem:

class View_Helpers_TextInput extends View_Helper {

  public function textInput($name, $value = '') {
    if (is_array($value)) {
      $value = isset($value[$name]) ? $value[$name] : '';
    }

    if (is_object($value)) {
      $value = isset($value->$name) ? $value->$name : '';
    }

    return sprintf('<input type="text" name="%s" id="%s" value="%s" class="form-control">', $name, $name, $value);
  }

}

Potem w widoku:

<h2><=$this->title?></h2>

reszta kodu

<?= $this->textInput('City', $this->model) ?>

reszta kodu

Dzięki temu możesz mieć jedną formę zarówno do tworzenia, jak i edycji danego rekordu, a jej tytuł zmieniasz poprzez zmianę title w kontrolerze.

Potem w kontrolerze dodajesz akcję w stylu:

class AdminController extends Controller {

  /* ... */
  
  public function ajaxEditUserForm() {
    $id = $this->getParam('id');

    if ($id === null) {
      throw new Exception('Id jest równe null, hurr durr!');
    }

    $model = new User_Model();

    if (!$model->loadById($id)) {
      throw new Exception('Brak takiego użytkownika!');
    }

    return $this->view->render('admin/user/form-create-edit.phtml', [
      'title' => 'Edycja użytkownika',
      'model' => $model
    ]);
  }

}

A w widoku po kliknięciu Edytuj:

$('.editUserBtn').bind('click', function() {
  var id = $(this).data('id');

  $.ajax( // tutaj już się chyba domyślasz co i jak
});

Id rekordu (tutaj użytkownika) przekazujesz do buttona editUser na zasadzie (fragment z widoku):

<?php foreach ($this->userList as $userId => $userRow): ?>
  <span class="editUserBtn" data-id="<?=$userId?>">Edytuj użytkownika</span>
<?php endforeach; ?>

Dokładnie mam to zrobione tak jak piszesz;) Całość jest bez frameworka pisana (proj. rozbudowany i już nie opłaca mi sie chyba tego przerabiać). Tylko mam problem z tymi oknami modalnymi. Możesz rzucić jakiś przykład dot. ajaxa ?

$.ajax({
  url: '/admin/ajax-edit-user-form',

  data: {
    id: id
  },

  success: function(msg) {
    $('#overlay').fadeIn().html(msg);

    $('#userForm').on('submit', function() {
      $.ajax({
        url: '/admin/ajax-edit-user',

        data: {
          id: id,
          data: $('#userForm').serialize()
        },
        
        // no i tutaj dodatkowo obsługa success, error i tak dalej
      });

      return false;
    });
  }
});

Mając jednak na uwadze, że przy takim podejściu musisz do formy w pliku widoku form-create-edit.phtml (czy jak tam to sobie ładnie nazwiesz) dodać:
<form id='userForm' ...>

oki to już rozumiem, czyli przycisk z którego to wywołuje powinien mieć zdarzenie onclick? Obecnie mam to tak:
<a href="?action=address_edit&id='.$entry->CustomerAddressId.'" class="btn btn-primary btn-sm glyphicon glyphicon-edit" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" data-original-title="Edycja"></a>

Zatem u Ciebie to będzie:

<a data-customer-address-id="<?=$entry->CustomerAddressId?>" class="btn btn-primary btn-sm glyphicon glyphicon-edit edit-customer-address" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" data-original-title="Edycja"></a>

Temat wyczerpany;) Dzięki za pomoc.

@Patryk27 ten button chyba tak miał być?:

 <a data-customer-address-id="<php? $entry->CustomerAddressId ?>" class="btn btn-primary btn-sm glyphicon glyphicon-edit edit-customer-address" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" data-original-title="Edycja"></a>

<?=$entry->CustomerAddressId?> lub <?php echo $entry->CustomerAddressId; ?>, osobiście wolę pierwszą wersję.

Rozumiem:)
Jeszcze pytanie do ajaxa mam:

$.ajax({
	  url: 'addressEdit',
	 
	  data: {
	    id: data-customer-address-id
	  },

	  success: function(msg) {
	    $('#myModal').fadeIn().html(msg);
	 
	    $('#userForm').on('submit', function() {
	      $.ajax({
	        url: '/templates/addressEdit',
	 
	        data: {
	          id: data-customer-address-id,
	          data: $('#userForm').serialize()
	        },

	  error: function(msg){
	  	alert("błąd");
	  }
	 
	        // no i tutaj dodatkowo obsługa error i tak dalej
	      });
	 
	      return false;
	    });
	  }
	});

do id podpinam zmienną która jest pobierana z "data-customer-address-id"?

Tak.

Całe zapytanie Ajax, musi być w zdarzeniu "click" dla buttonów z CRUD. Mam jeszcze pytanie jak go zidentyfikować według schematu który dla niego podałeś:

<a data-customer-address-id="<?=$entry->CustomerAddressId?>" class="btn btn-primary btn-sm glyphicon glyphicon-edit edit-customer-address" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" data-original-title="Edycja"></a>

odwołanie

$("????????").click(function(){
//całe zapytanie

});

Dodałeś mu przecież klasę edit-customer-address.

Właśnie problem w tym ze jak robie

$(".edit-customer-address").click(function(){
	        $.ajax({
	            type: "POST",
	            id: data-customer-address-id,
	            url: "?address_edit", 
	            data: $('form.userForm').serialize(),

	            success: function(msg){
	                
	                $('#myModal').modal('show');
/*
	                $('#modal-content').on('shown.bs.modal', function() {
					    $("#txtname").focus();
					}) 
*/
	            },

	            error: function(){
	                alert("failure");
	            }
	        });
	    });

});

ok działa lecz na id sie wysypuje

Ech, ech.
$(this).data("...");

Poza tym id również musisz przekazać w data.

Zgadza sie, ale nie wstawie tego przecież w zapytaniu do : "id:???" .

Huh?

      $.ajax({
        url: '/admin/ajax-edit-user',
 
        data: {
          id: $('...').data('...'),
          data: $('#userForm').serialize()
        },

oki, ostatecznie mam to tak:

$(".edit-customer-address").click(function(){
	
		        $.ajax({
	            type: "POST",

	            url: "address_edit&id=",
	            data: {
			          id: $(".edit-customer-address").data('dataCustomerAddressId'),
			          data: $('#userForm').serialize()
        		},

	            success: function(msg){
	                
	                $('#myModal').modal('show');

	            },

	            error: function(){
	                alert("failure");
	            }
	        });
	    });

Po co to &id= w URLu?

Faktycznie niepotrzebne, Ogólnie "address_edit" to metoda z kontrolera, tylko nie wiem czemu, ale dalej błąd mi wyrzuca.

Jaki błąd? :P

Patryk27 napisał(a):

Jaki błąd? :P

alert("failure"); ;)

Sprawdź request pod konsolą.