Адресная книга с AJAX / PHP / MySQL - полный проект в 1 файле :) - PullRequest
0 голосов
/ 01 сентября 2011

Как амбициозная мечта: S Я бы хотел изучить AJAX через небольшой проект адресной книги. Моя идея заключалась в том, чтобы иметь что-то в стиле IPAD, поскольку с левой стороны был бы список контактов, и при выборе одного из них другая часть экрана заполняла бы форму контакта, чтобы иметь возможность изменить или просто отобразить ее.

Моя структура SQL:

Contact         |  Address  |  Email

id                 id          id
contact_first      address1    email
contact_sur        address2
contac_mobil       town
email_id           postcode
address_id         country

Я не прошу, чтобы кто-то написал это для меня - это было бы глупо :), но я прошу сообщество дать мне кусочки, чтобы я мог понять и собрать вместе - что более важно, я могу изменить или даже расширить позже - то, что Я бы проверил как домашнее задание. Я бы хотел, если возможно, создать решение «передовой опыт».

Надеюсь, что эту глупую игру можно разместить здесь.

Любая идея была бы очень признательна.

addressbook.php - мой начальный хотя

<?php 
include("db_con1.php"); 

// left side people list
$peoplelist='SELECT contact_first, contact_sur, contact_mobil FROM contactmain WHERE status=1';
$queryl = $pdo->prepare($peoplelist);
$queryl->execute();
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Email sending program</title>
  <link rel="stylesheet" type="text/css" href="css/adminolok.css">
  <link rel="stylesheet" type="text/css" href="css/menu.css">
</head>

<body>
<?php include("menu.php"); ?>


<div id="leftnavigation">
<ul>
<?php foreach ($queryl as $i => $rowl) { ?>
 <li >
  <label for="contact_<?php echo $i; ?>">
    <span class="name">
     <?php echo $rowl['contact_first'].' <strong>'.$rowl['contact_sur'].'</strong>'; ?>
    </span>
    <br />
    <span class="mobil"><?php echo $rowl['contact_mobil'];?></span>
  </label>
 <?php  }?>
</li>
</ul>
</div>

<div id="midtop">

<form method="post" action="test.php">
<ul>
  <li><label class="description">Name</label>
   <div>
    <input type="text" name="first" /><label class="fieldname">First</label>
    <input type="text" name="first" /><label class="fieldname">Surname</label>
   </div>
  </li>
  <li><label class="description">Mobil</label>
   <div>
    <input type="text" name="mobil" /><label class="fieldname">mobil num</label>
  </div>
  </li>
  <li><label class="description">Email</label>
  <div>
    <input type="text" name="email" /><label class="fieldname">email</label>
  </div>
  </li>
<input type="submit" name="save">
</form>
</div>
</body>
</html>

Обновление журнала:)

  • У меня был ответ на обновление Jquery () - спасибо за это
  • Вопросы с левой стороны:

1, если у вас ограниченный экран (IPAD) и у вас 3000 имен контактов, что лучше всего показать их в списке?

2, если вам нужно прокрутить, как сделать так, чтобы он работал и на iOS / Android?

  • тест 1 прошел успешно, поэтому я исправляю все ошибки опечаток - пока работает
  • следующий вопрос: как передать запись на правую боковую панель - в виде?

любой ответ приветствуется

1 Ответ

1 голос
/ 01 сентября 2011

Я предполагаю, что вы не хотите обновлять свою страницу (только запросы ajax)

Я предлагаю вам использовать jQuery, так что выполнять запросы ajax намного проще, ия буду использовать jQuery в моих примерах

Вот как я бы это сделал:

Когда вы нажимаете на контакт, получите эту контактную информацию по ajax (адрес, город и т. д.) иотобразите его в форме справа:

$("#leftside label").click(function() {
  $.get('getContactInfo.php?contact=' + $(this).attr('for'), function(data) {
    $('#rightside').html(data);
  });
});

Когда вы отправите форму справа, отправьте запрос ajax, чтобы изменить отредактированный контакт / адрес / адрес электронной почты.Не забудьте обновить информацию слева.

$('#myform').submit(function() {
  $.ajax({
    type: "POST",
    url: "editContactInfo.php",
    data: $("#myform").serialize()
    success: function(msg) {
      // here you have to update the submited info in the left side
    }
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...