Jquery 변경 텍스트 아약스 요청 문제

나는 아래 코드와 같이 html 파일을 가지고 있습니다.Jquery 변경 텍스트 아약스 요청 문제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
     <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
     <style> 
     .style1 { 
      background-color: #c3d9ff; 
      font-family:arial,sans-serif; 
     } 
     .style2 { 
      text-align: center; 
      font-weight: bold; 
     } 
     .style3 { 
      background-color: #FFFFFF; 
      font-family:arial,sans-serif; 
      text-align: center; 
      font-weight: bold; 
     } 
     .style4 { 
      background-color: #FFFFFF; 
      font-family:arial,sans-serif; 
      text-align: left; 
     } 
     body { 
     font-family:Verdana, Arial, Helvetica, sans-serif; 
     font-size:15px; 
     background-color: ; 
     } 
     .action_button { 
     font-weight:bold; 
     float:right; 
     } 
     </style> 
     <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
     <script type="text/javascript">$(function() { 
    $('.action_button').click(function() { 
     var $button = $(this); 
     $.ajax({ 
      type: 'POST', 
      url: 'action.php', 
      data: 'id='+ $(this).attr('id'), 
      cache: false, 
      success: function(result) { 
       var $row = $button.closest('tr'); 
       var $col = $row.find('.clickme2'); 
       $row.fadeOut('fast', function() { 
        if (result == 'ACTIVATED') { 
         $button.text('Activate'); 
         $col.text('Active'); 
        } else if (result == 'INACTIVATED') { 
         $button.text('Inactivate'); 
         $col.text('Inactive'); 
        } 
       }).fadeIn(); 
      } 
     }); 
     return false; 
    }); 
}); 
     </script> 
     </head> 
     <body> 
     <table style="width: 90%" align="center" class="style1"> 
     <tr> 
       <td colspan="7" class="style2">MANAGER</td> 
      </tr> 
      <tr> 
      <td class="style3" style="width: 139px">Col1</td> 
      <td class="style3" style="width: 139px">Col2</td> 
      <td class="style3" style="width: 139px">Col3</td> 
      <td class="style3" style="width: 139px">Col4</td> 
      <td class="style3" style="width: 139px">Col5</td> 
      <td class="style3" style="width: 200px">Col6</td> 
      <td class="style3" style="">Action</td> 
     </tr> 
     </table> 
     <td id="main" class="main"> 
     <td class="update"> 
     <table style="width: 90%" align="center" class="style1"> 
      <tr> 
      <td class="style4" style="width: 139px">DataA1</td> 
      <td class="style4" style="width: 139px">DataA2</td> 
      <td class="style4" style="width: 139px">DataA3</td> 
      <td class="style4" style="width: 139px">DataA4</td> 
       <td class="style4 clickme2" style="width: 139px">Inactive</td> 
      <td class="style4" style="width: 200px">DataA6</td> 
      <td> 
        <button href="#" id="DataA1" class="action_button" style="width:80px;height:"> 
        Activate</button> 
        </td> 
      </tr> 
      <tr> 
      <td class="style4" style="width: 139px">DataB1</td> 
      <td class="style4" style="width: 139px">DataB2</td> 
      <td class="style4" style="width: 139px">DataB3</td> 
      <td class="style4" style="width: 139px">DataB4</td> 
       <td class="style4 clickme2" style="width: 139px">Inactive</td> 
      <td class="style4" style="width: 200px">DataB6</td> 
      <td> 
        <button href="#" id="DataB1" class="action_button" style="width:80px;height:"> 
        Activate</button> 
        </td> 
      </tr> 
      <tr> 
      <td class="style4" style="width: 139px">DataC1</td> 
      <td class="style4" style="width: 139px">DataC2</td> 
      <td class="style4" style="width: 139px">DataC3</td> 
      <td class="style4" style="width: 139px">DataC4</td> 
       <td class="style4 clickme2" style="width: 139px">Active</td> 
      <td class="style4" style="width: 200px">DataC6</td> 
      <td> 
        <button href="#" id="DataC1" class="action_button" style="width:80px;height:"> 
        Inactivate</button> 
        </td> 
      </tr> 
      <tr> 
      <td class="style4" style="width: 139px">DataD1</td> 
      <td class="style4" style="width: 139px">DataD2</td> 
      <td class="style4" style="width: 139px">DataD3</td> 
      <td class="style4" style="width: 139px">DataD4</td> 
       <td class="style4 clickme2" style="width: 139px">Active</td> 
      <td class="style4" style="width: 200px">DataD6</td> 
      <td> 
        <button href="#" id="DataD1" class="action_button" style="width:80px;height:"> 
        Inactivate</button> 
        </td> 
      </tr> 
      <tr> 
      <td class="style4" style="width: 139px">DataE1</td> 
      <td class="style4" style="width: 139px">DataE2</td> 
      <td class="style4" style="width: 139px">DataE3</td> 
      <td class="style4" style="width: 139px">DataE4</td> 
       <td class="style4 clickme2" style="width: 139px">Inactive</td> 
      <td class="style4" style="width: 200px">DataE6</td> 
      <td> 
        <button href="#" id="DataE1" class="action_button" style="width:80px;height:"> 
        Activate</button> 
        </td> 
      </tr> 
     </table> 
     </td> 
     </td> 
     </body> 
     </html>

파지는 행의 끝에 버튼이있는 5 개의 행이있는 테이블을 포함합니다. 버튼을 클릭하면 데이터가 PHP 파일로 전송 된 다음 PHP 파일의 응답에 따라 텍스트가 변경되고 흐리게 표시됩니다. col5의 흐림 기능 및 텍스트 변경 기능이 잘 작동합니다. 하지만 버튼의 텍스트 변경 기능은 정말 버그가 있습니다. 그에 따라 버튼 텍스트가 변경되어야합니다. "Activate"버튼의 텍스트가 "Inactivate"로 변경되고 "Inactivate"버튼의 텍스트가 클릭/성공 제출시 "Activate"로 변경되어야합니다 ..

다음은 PHP 파일 코드입니다 사전에

<?php 
$id = $_POST[id]; 
if($id=="DataA1"){ 
    echo "ACTIVATED"; 
} 
if($id=="DataB1"){ 
    echo "ACTIVATED"; 
} 
if($id=="DataE1"){ 
    echo "ACTIVATED"; 
} 
if($id=="DataC1"){ 
    echo "INACTIVATED"; 
} 
if($id=="DataD1"){ 
    echo "INACTIVATED"; 
} 
?>

덕분에 .. :)

는 $_POST["id"]에

출처

2011-01-01 blasteralfred Ψ

"정말 버그가 있습니다." 별로 문제 설명이 아닙니다. – tvanfosson

PHP를 사용해야합니까? 내 말은, 그것 없이는 더 쉽다. – Cristy

yea Christy, 나는 php를 사용해야한다. .. 내 사랑한다. .. :) –

은 .. ..... :)

다시

$(function() { 
    $('.action_button').click(function() { 
     var $button = $(this); 
     $.ajax({ 
      type: 'POST', 
      url: 'action.php', 
      data: 'id='+ $(this).attr('id'), 
      cache: false, 
      success: function(result) { 
       var $row = $button.closest('tr'); 
       var $col = $row.find('.clickme2'); 
       $row.fadeOut('fast', function() { 
        if (result == 'ACTIVATED') { 
         $button.text('Inactivate'); 
         $col.text('Active'); 
        } else if (result == 'INACTIVATED') { 
         $button.text('Activate'); 
         $col.text('Inactive'); 
        } 
       }).fadeIn(); 
      } 
     }); 
     return false; 
    }); 
});

덕분에 다음과 같이 스크립트를 수정 ... :)

출처

2011-01-01 15:01:24

당신도 PHP를 약간 변경해야합니다, 당신은 "$ (this) .val() "대신 ID. PHP에서는 val이 ACTIVATE인지 확인한 다음 VAL이 INACTIVATE 인 경우 ACTIVATED를 반환합니다. INACTIVATED가 반환됩니다. – Cristy

감사합니다. cristy ... 실제로는 원래 PHP 스크립트에 있습니다.원래 PHP에서 값이 활성화되었는지 여부를 확인하고 데이터를 처리하고 변경하고 해당 데이터를 반환합니다. :) –

변경합니다 $_POST[id]을 blasteralfred.

당신에게 @Heikki, @Cristy 감사 나는 해결책을 발견

출처

2011-01-01 14:38:50 Heikki

안녕하세요 @ Heikki, 내 문제를 해결하지 .. .. .. 버튼의 텍스트 " 활성화 "가"비활성화 "로 변경되고 버튼"비활성 "의 텍스트가 클릭/성공 제출시"활성화 "로 변경되어야합니다 ..이 부분은 잘 작동하지 않습니다 .... –

@blasteralfred : PHP 코드가 에코하면 작동합니다 올바른 선택. 지금 당장 당신은 각 요소마다 값을 하드 코딩하여 각 요청에 대해 동일한 값을 반환합니다. – Heikki

안녕하세요 @Heikki, 버튼의 텍스트 변경 이외의 다른 모든 게 잘하고 있습니다 .. 오직 버튼이 버그입니다 .. –

나는 당신의 논리가 잘못되었다고 생각합니다. 버튼에 처음 "활성화"라고 표시되면 "활성화 됨"이 반환되므로 버튼에 "비활성화"가 표시되어야합니다. 그러나 텍스트를 다시 "활성화"로 설정합니다. 예를 들어 ID가 "DataA1"인 버튼을 살펴보십시오.

출처

2011-01-01 15:02:15 tvanfosson

나는 이미 문제를 해결했습니다 알아,하지만 여기 내 answear 어쨌든입니다 :

이 함께 PHP 파일을

data: 'id='+ $(this).attr('id'),

와

data: 'val='+ $button.html(),

을 대체 :

<?php 
$val = $_POST['val']; 
if(strstr($val,"Activate")) 
    echo "ACTIVATED"; 
else 
    echo "INACTIVATED"; 
?>

출처

2011-01-01 15:23:38 Cristy

감사합니다. .. :) –

Jquery 변경 텍스트 아약스 요청 문제

답변

관련 문제