Textarea 不显示结果答案

【问题标题】：Textarea is not displaying the resultTextarea 不显示结果
【发布时间】：2017-02-08 08:58:00
【问题描述】：

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

这是我的 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 不应该是可见的

【问题讨论】：

在标签标签中使用firstText 和secondText 作为id 而不是name。然后使用$('#firstText').val() 获取 firstText 的值（secondText 也是如此）
@siam 我已经编辑了代码是否正确？尝试运行它仍然是一样的结果显示在文本区域并立即消失
@raghulc 这个网站是为了帮助你理解一些事情，让你离开去思考它。很多人以各种方式回答了你，所有这些都让你复制方法然后暗示它不起作用。我认为如果你想学习，你需要带走人们所说的，然后坐下来思考/测试和工作/从中设计一些东西。我仍然说这是家庭作业，因为我看不出为什么回复 box 必须是 textArea 的特别原因，这让我觉得它的诡计和更有可能的分配工作。所以不要期望人们复制粘贴研究主题

标签： javascript jquery ajax grails

【解决方案1】：

将textArea 视为div

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

除非你声明：

<g:textArea value="something" />

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

【讨论】：

【解决方案2】：

更新：

$(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()

                }
            });
        });
    });

【讨论】：

他甚至没有使用.text()
@vahid 我会按照你在另一个问题中提到的那样尝试并让你知道
@vahid 我尝试了您提到的代码，但它不起作用。 ajax 的成功函数中的警报没有触发。即不进入 if (data.success===true) {
结果立即消失，因为按钮默认执行提交。为防止这种情况发生，您应该使用preventDefault() 函数@raghulc
@raghul 你正在回答关于这个问题的另一个问题？多维度解决这个基本问题？为什么不在控制器和console.log(JSON.stringify(data)) 中启用 println 并调试并弄清楚响应发生了什么？

【解决方案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();
      }
    });
  });
});

【讨论】：

这是我使用成功的代码：function(data){ var data = JSON.parse(data); alert("值为"+data.status) if (data.status===true) { alert("success1"+data.result) $('#result').val(data.result) $('# result').show() } else { /// if (data===false ) { } }
警报正在显示值
如果您创建一个小提琴并分享链接会很好。它将帮助我们更轻松地解决问题。

【解决方案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);
            }
        });
    });
});

【讨论】：

这就是我需要在我的代码中输入的内容 var textarea_el = $('', {
还有什么 $().append(textarea_el);意思

【解决方案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>

试试上面的代码 如果不是，尝试alert(data.firstText)检查alert中的返回值是对象还是值

【讨论】：

当我尝试 alert("the parsed values 1st data"+data.firstText) 没有触发警报
alert(data[0].firstText) 试试这个
无论是返回数组还是返回数组，我都需要更多信息？......
我正在解析检索到的值 var retrievedValue = JSON.parse(data);。所以警报警报（“值是：”+retrievedValue.status）具有真实值，警报（“在成功内部：”+retrivedValue.result）具有值“Json 相等且没有 MisMatch”，因为我已经硬编码了值