2014-04-09 2 views
0

4 개의 요소가있는 양식이 있습니다. 내 양식에서 네 번째 요소로 설정 한 이미지를 클릭하면 jquery 팝업을 열어야합니다. 팝업 창에는 다른 양식과 제출 버튼이 있습니다. herepopup 오지 마. 내가 할 일은 뭐지?jquery 팝업 div에서 양식의 요소를 클릭하십시오.

이이 내 JQuery와

<script type="text/javascript"> 
       function callPopup(id) { 
        console.log(id); 

        var datastring = "&event_id="+id; 

        $.ajax({ 
         url: 'event_edit_popup.php', //enter needed url here 
         data: datastring, 
         type: 'get', //here u can set type as get or post 
         success: function(data) { 
         $('.popupContent').html(data); 
           console.log(data); 
      $('.loader1').hide(); 
      $("#popup_content").after(data); 
          // u can see returned data in console log. 
          // here, after ajax call,u can show popup. 
         } 
        }); 
       }; 


      </script> 

내 양식

echo "<div class=\"addform\"> 
            <form method='GET' action=\"update_events.php\">\n"; 
      echo " <input type=\"hidden\" name=\"column1\" value=\"".$row['event_id']."\"/>\n"; 
      echo " <input type=\"text\" name=\"column2\" value=\"".$row['event_name']."\"/>\n"; 
      echo " <input type=\"text\" name=\"column3\" value=\"".$row['description']."\"/>\n"; 
      echo " <input type=\"image\" src=\"images/update.png\" id=\"update_event\" alt=\"Update Row\" class=\"topopup\" onClick=\"callPopup(".$row['event_id'].")\"; title=\"Update Row\">\n"; 

     } 
         echo "</table></form><br />\n"; 

이며,이 내 팝업 DIV이다

<div id="toPopup"> 
      <div class="close"></div> 
      <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span> 
      <div id="popup_content"> <!--your content start--> 


      <p align="center">edit company</p> 
      </div> <!--your content end--> 

      </div> <!--toPopup end--> 

      <div class="loader"></div> 
      <div id="backgroundPopup"></div> 
+0

클릭하면 어디에서 기능을 수행 할 수 있습니까? – ShibinRagh

+0

양식의 네 번째 입력 요소로 @ShibinRagh onClick = \ "callPopup (". $ row [ 'event_id']. "); – rrahul

+0

코드가 깨졌습니다. 'onclick'을 절대로 닫지 마십시오. –

답변

0
양식에

첫 번째 실수는 완전하지 않고 두 번째입니다 이미지 태그를 사용하는 것보다 이미지를 표시하려면 입력이 없습니다 type='image'.

내가 당신에게 도움이 될 것입니다 희망의 코드를 따르십시오 :

이제
<div class='addform'> 
    <form method='GET' action='update_events.php'> 
      <input type='hidden' name='column1' value="123"/> 
      <input type='text' name='column2' value="456"/> 
      <input type='text' name='column3' value="789"/> 
     <img src='images/update.png' id='update_event' alt='Update Row' class='topopup' onClick='callPopup("1")' title='Update Row'/> 
    </form> 
</div> 

jQuery 코드 :

$("#update_event").click(function() { alert('sdf'); }); 

을 이제 팝 업에 대한 아약스 전화를 사용할 수있는 대신에 경고의.

0

당신은 .. 이미지에게 ID를 부여 ID = "clickme" 말을하고, JQuery와 스크립트에해야합니다 -. $ ('문서')를 준비 (함수() { $ ('#의 clickme') .click (function() {$ ('# topopup'). show (220);});});

또 다른 효과를주기 위해 topopup의 CSS에 전환을 추가 할 수 있습니다.

은 또한 팝업을 숨기려면 -..

$ ('문서')를 준비 (함수() { $ ('#의 backgroundPopup이')을 클릭 (함수() {$ ('#의 topopup, #backgroundPopup '). hide (220);});});

// 배경을 클릭하면 팝업이 닫히기를 원한다고 가정합니다.

관련 문제