創建JQuery模態表單

我是JQuery的新手。我正在瀏覽文檔和演示，但無法找到我正在尋找的答案。創建JQuery模態表單

我有一個按鈕。 Onlick，我想通過一個模式形式的2通。 Onload，我想要一個AJAX調用在表單中開始。 AJAX調用將從PHP腳本返回一個json對象。 json響應將作爲模式形式的內容。

就像我說的，我是一個JQ新手。我不希望任何人通過這裏牽着我的手，但是如果我能夠繼續這樣做，有一些基礎可以堅持下去。我想我需要弄清楚的主要問題是：如何將參數傳遞給模態形式;當表單加載時如何啓動ajax（使用傳遞的值）;以及如何解析json以形成內容。

任何幫助是極大的讚賞。

來源

2011-07-30 Anonymous

爲什麼不只是返回一個HTML片段？ –

調查ColorBox插件。查看他們的example page，看看實現一個模態表單有多容易。

如果你想有一個更強大的解決方案，請JQueryUI's Modal Form

來源

2011-07-30 22:19:15 AlienWebguy

這是一個基本的例子，使用A標籤用GET URL到兩個值傳遞給PHP腳本和JSON返回結果。

直播：http://jfcoder.com/test/modal.php

讓我知道如果您有任何問題。

<?php 

$export = array(); 

if ($_GET['var1'] || $_GET['var2']) { 
    switch($_GET['var1']) { 
     case 1: 
      $export['var1'] = 'You have selected var 1 output 1.'; 
     break; 
     case 2: 
      $export['var1'] = 'You have selected var 1 output 2.'; 
     break; 
     default: 
      $export['var1'] = 'You have not selected a var 1.'; 
    } 
    switch($_GET['var2']) { 
     case 1: 
      $export['var2'] = 'You have selected var 2 output 1.'; 
     break; 
     case 2: 
      $export['var2'] = 'You have selected var 2 output 2.'; 
     break; 
     default: 
      $export['var2'] = 'You have not selected a var 2.'; 
    } 
} 

if ($_GET['ajax'] == 1) { 
    echo json_encode($export); 
    exit; 
} 

?> 
<html> 
<head> 
<style type="text/css"> 
</style> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"/> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('div#modal a').click(function(){ 
     showModal(this.href); 
     return false; 
    }); 
}); 

function showModal(show) { 
    $.ajax({ 
     url : show + '&ajax=1', 
     dataType : 'json', 
     success : function(data){ 
      var html = "<h3>Vars selected</h3><p>"+data.var1+"</p><p>"+data.var2+"</p>"; 
      $('#dialog').html(html).dialog({modal:true}); 
     } 
    }); 
} 
</script> 
</head> 
<body> 
<div id="dialog" title="Basic dialog"></div> 
<?php 
if (count($export)) { 
    echo " 
<h2>Var 1: {$export['var1']}</h2> 
<h2>Var 2: {$export['var2']}</h2> 
"; 
} 
?> 
<div id="modal"> 
<a href="http://jfcoder.com/test/modal.php?var1=1&amp;var2=1">Var 1 - output 1</a><br/> 
<a href="http://jfcoder.com/test/modal.php?var1=1&amp;var2=2">Var 1 - output 2</a><br/> 
<a href="http://jfcoder.com/test/modal.php?var1=2&amp;var2=1">Var 2 - output 1</a><br/> 
<a href="http://jfcoder.com/test/modal.php?var1=2&amp;var2=2">Var 2 - output 2</a><br/> 
</div> 
</body> 
</html>

來源

2011-07-30 22:27:30

創建JQuery模態表單

回答

相關問題