Question

我有一个textarea，当请求到达页面时将处于隐藏状态，一旦我选择了页面中的值，我调用一个控制器方法来执行操作并将响应返回到同一页面并在ajax中成功方法我尝试在textarea中打印响应

这是我的gsp页面

 <!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>Json Compare</title>
<g:javascript plugin="jquery" library="jquery"
    src="jquery/jquery-1.11.1.js" />
<script>

    $(document).ready(function(){
        $('.testMe').click(function(){
            var URL="${createLink(controller:'jsonComparison',action:'compare')}";
            alert(URL) 
            alert(firstText.value)
            alert(secondText.value)
            $.ajax({
                url:URL,
                data: {firstText:firstText.value,secondText:secondText.value},
                success: function(data){              
                    var retrievedValue = JSON.parse(data);
                    alert("Parsed Values are: "+retrievedValue)
                    alert("Values are: "+retrievedValue.status)
                    //alert("success: "+retrievedValue.result)
                    if (retrievedValue.status===true) {
                        alert("inside the success: "+retrievedValue.result)
                        alert("the parsed values 1st data"+data.firstText)
                        $("#result").css("display","block")
                         $("#result").val(data.firstText)
                        //notice .html since it is content of textArea
                        //$('.textarea').html(retrievedValue.result)
                        //document.getElementById("textarea").style.display = "block"
                        //document.getElementById("textarea").innerHTML = data.result
                         //$('#textarea').val(retrievedValue.result).show()
                        // $('.textarea').css("display","");
                        //$('#result').attr('style', 'display:block'); 
                        //$('#testdiv').show()
                        //$('.textarea').toggle();
                        // $('#testdiv').attr('style', 'display:block'); 
                        //$('#testdiv').removeAttr("style");
                        //document.getElementById("result").style.display = "none";

                    } else { /// if (data===false ) {
                        alert("Failure: "+retrievedValue.value1+" "+retrievedValue.value2)
                       //$('#result1').html(entry.value1).show()
                     // $('#result2').html(entry.value2).show()
                    } 
                }
            });

        });

    });
    //event.preventDefault(); 
</script>
</head>
<body>
    <g:form>
        <div>
            <label>From Time</label>
            <g:select name="firstText" from="${eventsList}" noSelection="['':'-Choose the From Date-']" />
            <label>To Time</label>
            <g:select name="secondText" from="${eventsList}" noSelection="['':'-Choose the To Date-']" />
            <button class="testMe">Compare</button>
        </div>
        <br>

        <textarea id="result" style="display: none"></textarea>

        <%--<div id="textarea">
                <label>Output</label><br> 
                     <textArea id="result" name="myField" /> 
                    <textarea></textarea>
        </div>

    --%></g:form>
</body>
</html>

一旦结果立即显示，它就会消失如何停止它。以及如何根据控制器的响应显示不同textarea的结果。最初，textarea不应该是可见的

Answer 1

更新：

$(document).ready(function(e){
        $('.testMe').click(function(e){
            e.preventDefault();
            var URL="${createLink(controller:'jsonComparison',action:'compare')}";
            alert(URL)
            alert(firstText.value)
            alert(secondText.value)
            $.ajax({
                url:URL,
                data: {firstText:firstText.value,secondText:secondText.value},
                success: function(data){
                    //alert("success"+data.value)
                    console.log(data);
                    $("#result").val(data).show()

                }
            });
        });
    });

Answer 2

将textArea视为div

$('#textArea').html('content');

除非你声明：

<g:textArea value="something" />

如果我没记错的话，那么其与标准textArea的行为不同

Answer 3

试试这个..希望它会起作用。

$(document).ready(function() {
  $('.testMe').click(function() {
    var URL = "${createLink(controller:'jsonComparison',action:'compare')}";
    var firstText = $('#firstText');
    var secondText = $('#secondText');
    alert(URL);
    alert(firstText.val());
    alert(secondText.val());
    $.ajax({
      url: URL,
      data: {
        firstText: firstText.val(),
        secondText: secondText.val()
      },
      success: function(data) {
        //alert("success"+data.value)
        console.log(data);
        $("#result").val(data);
        $("#result").show();
      }
    });
  });
});

Answer 4

如果您尝试动态附加textarea元素？例如：

$(document).ready(function(){
    $('.testMe').click(function(){

        // ... your code ...

        // ajax part
        $.ajax({
            url:URL,
            data: {firstText:firstText.value,secondText:secondText.value},
            success: function(data){
                var textarea_el = $('<textarea />', {
                    id: 'result',
                    text: data.value // or just data?
                });

                // change form_selector with the real selector!
                $(<form_selector>).append(textarea_el);
            }
        });
    });
});

Answer 5

 <script>
    $(document).ready(function(){
        $('.testMe').click(function(){
            var URL="${createLink(controller:'jsonComparison',action:'compare')}";
            alert(URL)
            alert(firstText.value)
            alert(secondText.value)
            $.ajax({
                url:URL,
                data: {firstText:firstText.value,secondText:secondText.value},
                success: function(data){
                    //alert("success"+data.value)
                    console.log(data);
                   $("#result").css("display","block")
                    $("#result").val(data.firstText)

                }
            });
        });
    });

    </script>

尝试上面的代码 如果不是，请尝试提醒（data.firstText）检查警报中的返回值。无论是对象还是值

Textarea没有显示结果

5 个答案: