2016-10-16 7 views
2

ここではJQueryカレンダーで問題が発生していますが、ajaxコールの後では機能しません。私は多くのオプションを試してみたが、それらのいずれかが、これは私のjsあるAjaxコールの後にJQueryカレンダーが機能しませんが、ボタンはそこにありますか?

を働いた:

function carregar(metodo, div) { 
    var loading = new Image(); 
    loading.src = "${resource(dir: 'images', file: spinner.gif)}"; 
    $.ajax({ 
     url: metodo, 
     type: "GET", 
     dataType: 'text', 
     beforeSend: function() { 
      $("#" + div).html(loading); 
     }, 
     success: function (data) { 
      $("#" + div).html(data); 

     } 
    }); 
} 

$(function() { 
    $("#nascimento").datepicker({ 
     showOn: "button", 
     buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
     buttonImageOnly: true 
    }); 
}); 

これは、私はAjaxの関数を呼び出すインデックス、次のとおりです。

<%@ page contentType="text/html;charset=UTF-8" %> 
<html> 
    <head> 
     <meta name="layout" content="main" /> 
     <title>Cadastrar Aluno</title> 
    </head> 
    <body>     
     <input type="button" value="Novo" onClick="carregar('/aluno/novo', 'divForm')"/> 
     <input type="button" value="Pesquisar" onClick="carregar('/aluno/pesquisar', 'divForm')"/> 


    <div id="divForm">   
     <g:render template="form"></g:render> 
     </div>  
    </body> 
</html> 

そして、

<asset:javascript src="application.js"/> 
<g:uploadForm controller="aluno" action="salvar">  
    //other fields 
    <label>Data de Nascimento:</label>  
    <input type="text" name="nascimento" id="nascimento" required="true" value="<g:formatDate format="dd-MM-yyyy" date="${aluno?.nascimento}"/>"/><br>   
    //other fields 
    <input type="submit" value="Salvar"/> 
    <input type="button" name="btnCancelar" value="Cancelar"/> 
    <input type="hidden" name="id" value="${aluno?.id}">  
</g:uploadForm> 

私は

を置く場合:これは私のフォームテンプレートであります
<script type="text/javascript"> 
    $(function() { 
     $("#nascimento").datepicker(); 
    }); 
</script> 

テンプレートでは、irは一度しか動作しません。ページを再読み込みした後に再び「フォーム」テンプレートを読み込んだ場合、それは表示されません。

私はこれを試してみた: jquery datepicker doesn't work after ajax call if its already on page JQuery datepicker not working after ajax call jQuery datepicker does not work after Ajax call

君たちは、任意のアイデアを持っていますか?

ありがとうございました!

+0

はあなたが交換されているHTML内のカレンダーの要素です:あなたはこのようなもので、HTMLを交換した後、このように

、あなたは日付ピッカーを再初期化する必要があるでしょうか? – DelightedD0D

+0

はい、それが問題です。 "/>
それは既に – xSlok

答えて

1

htmlをリロードすると、datepickerがアタッチされていた要素が破棄され、新たに再作成されます。

    success: function (data) { 
        $("#" + div).html(data); 
        $("#nascimento").datepicker('remove').datepicker({ 
         showOn: "button", 
         buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
         buttonImageOnly: true 
        }); 

       } 
+0

それを試した、それはまだ動作しません...私はこれを置いていない場合でも、ボタン/画像があるが、私はそれをクリックしたときに動作しません – xSlok

+0

これはページのどこかに表示されますか? – DelightedD0D

+1

はい入力とボタン/イメージがあり、使用しているマスクプラグインが機能していても、カレンダーは表示されません – xSlok

関連する問題