2010-09-12 1 views
0

Попытка открыть Fancybox после отправки формы. Я также пытаюсь сделать вызов ajax для php-скрипта ... точно не знаю, куда его вставить. Вот код. Если у кого-нибудь есть идеи, я бы очень признателен. Как вы, наверное, можете сказать, я понятия не имею, что я делаю с AjaxForm.Открыть Fancybox (или equiv) из формы imput с помощью href

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script> 
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script> 
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43"></script> 
<link href="xtras/css/style.css" rel="stylesheet" type="text/css"/> 
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" /> 
<!--[if IE 6]><link href="xtras/css/style-ie6.css" rel="stylesheet" type="text/css" /><![endif]--> 
<!--[if IE 7]><link href="xtras/css/style-ie7.css" rel="stylesheet" type="text/css" /><![endif]--> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#signup").ajaxForm(function() { 
     alert("TEST") 
    }); 
}); 
</script> 
<title>Test</title> 
</head> 
<body> 
    <div id="container"> 
     <div id="pillar"> 
      <h1>Test</h1> 
      <form action="GET" id="signup" name="signup" > 
       <input name="email" id="email"></input> 
       <input id="submit" name="submit" type="submit"></input> 
       <a href="javascript:document.signup.submit();" >SUBMIT</a> 
      </form> 
     </div> 
    </div> 
</body> 

Я также попытался это:

$(document).ready(function() { 
    $("#myForm").ajaxForm({ 
     success: function(responseText){ 
      $.fancybox({ 
       'content' : responseText 
      }); 
     } 
    }); 
}); 

Каждый знает, где я неправильно? Заранее спасибо.

+0

Вот пример для facybox http://stackoverflow.com/questions/3586138/jquery-plugin-conflicts-please-assist кода здесь : http://plungjan.name/eetest/facy3.html – mplungjan

ответ

0

Я адаптировал это из примеров на FancyBox page (tip #5) для работы с плагином форм. ИТ может работать из коробки или вам может потребоваться настроить. Однако, если вы использовали вместо этого пример минус валидацию с этой страницы блога, которая должна работать безотказно, и это делает то же самое, что вы делаете с плагином форм.

JS:

$(document).ready(function() { 
    $('a#signup').fancybox(); 
    $("#signup_form").ajaxForm({ 
     beforeSubmit: function(){ $.fancybox.showActivity();}, 
     success: function(data){ 
      $.fancybox(data); 
     } 
    }); 

}); 

HTML:

<a href="#signup_form" id="signup">Signup</a> 
    <div style="display: none;"> 
    <form action="POST" id="signup_form" name="signup"> 
     <input name="email" id="email" /> 
     <input id="submit" name="submit" type="submit" value="Sign Up" /> 
    </form> 
    </div>