ui 대화 상자에서 값을 업데이트 할 때 jquery UI 탭에서 업데이트 된 데이터를 표시하는 방법은 무엇입니까?

Question

ui 대화 상자를 통해 jquery UI 탭의 값을 업데이트하려고합니다.

예상되는 공정과 같은 : 탭 디스플레이에서

1. , 사용자가 편집 링크를 클릭합니다.
2. 사용자가 값을 입력 할 수있는 양식의 사용자 인터페이스 대화 상자를 표시합니다.
3. 사용자 입력 값 및 변경 사항 저장.
4. 저장 후 사용자는 업데이트 된 값으로 탭으로 돌아갑니다.

필자는 4 번 문제와 관련하여 지금까지 코드를 제시합니다.

HTML :

<div id="acc"> 
    <input type="text" id="edit_acc" value=""> 
</div> 

<div id="tabs"> 
    <ul> 
     <li><a href="#one" title="one">Tab One</a></li> 
     <li><a href="#account" title="account">Tab Account</a></li> 
     <li><a href="#three" title="three">Tab Three</a></li> 
    </ul> 
</div> 

<div id="one"> 
    <p>Tab One Listing</p> 
</div> 
<div id="account"> 
    <p>Tab Account Listing</p> 
    <table width="100%"> 
    <?php 
    while ($rows = mysql_fetch_array($query)) 
    { 
     echo '<tr>'; 
     echo '<td id="editacc_'.$rows['id'].'">'.$rows['name'].'</td>'; 
     echo '<td><a id="acc_'.$rows['id'].'" class="link_acc" href="#">Edit</a></td>'; 
     echo '</tr>'; 
    } 
    ?> 
    </table> 
</div> 
<div id="three"> 
    <p>Tab Three Listing</p> 
</div> 

자바 스크립트 :

$('#tabs').tabs({ 
    ajaxOptions: { 
     error: function(xhr, index, status, anchor) 
     { 
      // if page does not exist, this will load 
      $(anchor.hash).text('Could not load page'); 
     } 
    } 
}); 

$('.link_acc').click(function() { 
    acc = $(this).attr('id'); 
    acc = acc.replace('acc_', ''); 

    $.post('get.php', { item: acc}).success(function(data) { 
     $('#edit_acc').val(data); 
    }); 

    // prompt dialog box with the value of the stated id 
    $('#acc').dialog({ 
     title: 'Edit Account', 
     modal: true, 
     buttons: { 
      "Save": function() { 

       var data = $('#edit_acc').val(); 

       $.post('set.php', { item: acc, val: data}).success(function() { 
        $('#tabs').tabs('load', 2); 
        $('#acc').dialog("close"); 
       }); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 

     } 
    }); 
}); 

get.php - 데이터베이스에서

if (isset($item)) 
{ 
    // check for the cat id 
    $query = mysql_query('SELECT name FROM acc WHERE id = '.$item); 
    $rows = mysql_num_rows($query); 
    if ($num_rows == 1) 
    { 
     while ($result = mysql_fetch_array($query)) 
     { 
      echo $result['name']; 
     } 
    } 
} 

set.php을 값을 검색 - 데이터베이스를 업데이트

if (isset($item)) 
{ 
    mysql_query('UPDATE acc SET name ="'.$val.'" WHERE id = '.$item); 
} 

나는이 개 질문이 :

1. 어떻게 표시를 새로 얻을 및 목록 탭 계정에서 업데이트 된 값을 표시?
2. id attr을 사용하고 대신 사용하는 대신 id를 참조하는 것이 더 낫고/깔끔한 방법입니까?

감사합니다.

Answer 1

데이터를 가져 오기 위해 아약스 요청이 필요하지 않습니다. 테이블 셀에서 읽을 수 있습니다.

var valueHolder = $(this).parent().prev(); 
$('#edit_acc').val(valueHolder.text()); 

와

$.post('get.php', { item: acc}).success(function(data) { 
    $('#edit_acc').val(data); 
}); 

교체 그리고 당신은 테이블 셀에 저장 요청 후 데이터를 업데이트 할 경우, 당신은 다시 변수를 사용할 수 있습니다

valueHolder.text(value); 

을 추신 : 귀하의 코드에서 ID가 'account'를 두 번 사용합니다. 이것은 허용되지 않으며 ID는 고유해야합니다. 자바 스크립트 코드에서 'acc'라는 ID를 사용하고 있으므로 html에서도 사용해야합니다.

=== 업데이트 ===

또한이 example를 참조하십시오. 당신이 $('#tabs').tabs('load', 2);을 제거하고 ID tabs와 사업부에 IDS one, account 및 three로 된 div를 이동해야합니다 :

P.s.