使用ajax和grails從選定的值中顯示關聯的數據庫值

我試圖創建一種方法來從數據庫中選擇多個值（ID），並通過關聯名稱顯示它們，同時保存附加到每個選定值的ID（名稱）。我試圖問，如果這是可能的jQuery中，並被告知Ajax可以實現這一點，但我知道幾乎沒有Ajax。有沒有更好的方法來處理這個任務，或者我需要如何將ajax合併到輸入標籤以按名稱顯示？使用ajax和grails從選定的值中顯示關聯的數據庫值

script> 
$(document).ready(function() { 
    $(".claim").change(function() { 
     $(".area").append("<div><input class='field' name='students_going' readonly type='text' value='" + $(this).val() + "'/><input class='field' name='students' type='hidden' value='" + $(this).val() + "'/><label class='remove fakeLink'> Remove</label></div>"); 
     $(this).find("option:selected").remove(); 
    }); 
    $(".area").on("click", ".remove", function() { 
     var val = $(this).parent().find("input").val();   
     $(".claim").append("<option value='" + val + "'>" + val + "</option>"); 
     $(this).parent().remove(); 
    }); 
    $(".area").on("click", ".removeEdit", function() { 
     $(this).parent().remove(); 

    }); 
}); 
</script>

<div class="area"> 
<h2>Select all students who will be visiting</h2> 
<div> 
<g:if test="${disabled=='false'}"> 
<g:select name="selector" class="claim" value="None" from="${fullList}" optionKey="studentNumber" optionValue="${{it.firstName + ' ' + it.lastName}}" noSelection="${['null':' ']}" disabled="${disabled}"/> 
    <g:if test="${fieldTripInstance?.students!= null }"> 
    <g:each var="i" in="${(0..<fieldTripInstance?.students?.length) }"> 
    <div> 
    <input class='field' name='Name' readonly type='text' value='${fullList.firstName[((fieldTripInstance?.students[i]).toInteger()-1)]} ${fullList.lastName[((fieldTripInstance?.students[i]).toInteger()-1)]}'/> 
    <input class='field' name='students' readonly type='hidden' value='${fieldTripInstance?.students[i]}'/> 
     <label class='removeEdit fakeLink'> Remove</label> 
    </div> 
    </g:each> 
</g:if> 
</g:if> 

<g:if test="${disabled=='true'}"> 
<g:if test="${fieldTripInstance?.students!= null }"> 
<g:each var="i" in="${(0..<fieldTripInstance?.students?.size()) }"> 
    <div> 
    <input class='field' name='students' readonly disabled="${disabled}" type='text' value='${fieldTripInstance?.students[i]}'/> 
    </div> 
</g:each> 
</g:if> 
</g:if> 
</div>

來源

2015-12-24 tmurphy

糾正我，如果我錯了，你想重新加載你所包含的部分g：每個標籤的權利？ –

對不起，我很糟糕的一個措辭問題。：/現在g：select返回從下拉列表中選擇的人的號碼ID。選擇名稱後，返回的值將放入輸入字段中，以向用戶顯示所選人員，如果需要可以將其刪除。問題是ID是爲select選擇名稱的最簡單方法，但是當值輸入到輸入時，它的ID不是名稱。我希望找到解決方案來顯示名稱，但如果用戶需要稍後編輯，仍然可以將ID保存在列表中。 – tmurphy

當用戶選擇ID放入隱藏字段時，您有一個名爲student.id的隱藏字段。更新選擇更新隱藏字段。 .id表示您捕獲學生對象，而grails會將該.id字段與學生對象綁定。看看ajaxdependancyselection插件以及它如何使用id分配隱藏字段 – Vahid

考慮類

class SchoolClass { 
    String className 
    static hasMany = [students: Student] 

    static constraints = { 
    } 

    String toString(){ 
     className 
    } 
}

AND

class Student { 
    String name 

    static constraints = { 
    } 

    String toString(){ 
     name 
    } 
}

下面是一個基本視圖的實例：

<%@ page contentType="text/html;charset=UTF-8" %> 
<html> 
<head> 
    <title>Index</title> 
    <meta name="layout" content="main"> 
</head> 
<body> 
    <h1>Class Roster</h1> 

    <g:select name="class" from="${classRoster}" optionKey="id" class="ajax-loader" data-target="#ajaxContent" data-targeturl="${createLink(controller: 'schoolClass', action: 'ajaxStudents')}"/> 

    <div id="ajaxContent"> 

    </div> 

    <script> 
    (function($){ 
     $(document).ready(function(){ 
      ajaxify(); 
     }); 


     function ajaxify(){ 
      $(".ajax-loader").on('change', function(){ 
       var control = $(this); 
       var targetUrl = control.data("targeturl"); 
       var target = control.data("target"); 
       console.log("Loading ajax content:"+ control + target + targetUrl); 
       $(target).load(targetUrl, {controlVal : control.val()}, function(){ 
        //Things done after loading 
       }) 



      }); 
     } 
    })(jQuery); 
    </script> 

</body> 
</html>

檢查視圖你會看到我添加了data-target和data-targetUrl。 data-target告訴函數在哪裏加載新內容，data-targetUrl會告訴函數內容在哪裏。正如你所看到的，data-targeturl指向一個動作。小部分{controlVal：control.val（）}是您定義將哪些參數傳遞給控制器操作的地方。

請不要調查加載（）函數它會幫助你很多。另外，我提供的加載函數是一個簡單的框架，您需要添加錯誤處理和一些測試以確保穩定性。

和一個簡單的控制器

class SchoolClassController { 

    def index() { 
     [classRoster: SchoolClass.list()] 
    } 

    def ajaxStudents(long controlVal){ 
      render "${controlVal}" 
    } 
}

通知controlVal怎麼也比你從jQuery函數傳遞的值相同的名稱。只要名稱和類型在視圖和控制器之間一致，就可以傳遞n個參數。

渲染「$ {} controlVal」可以改變渲染模板： 'MyTemplate的'，型號：[]。請調查Grails渲染功能。

來源

2015-12-24 19:25:26

使用ajax和grails從選定的值中顯示關聯的數據庫值

回答

相關問題