将数据从数据库添加到文本框 - Jquery

Posted 2023-05-09

【中文标题】将数据从数据库添加到文本框 - Jquery

【英文标题】：Adding Data from Database to Textbox - Jquery

【发布时间】：2013-02-03 12:13:18

【问题描述】：

我在 Jquery 中创建了一个动态列表，当用户单击一个项目时，它会将他们带到一个新页面，其中显示了他们选择的列表选项的特定项目。到目前为止，我让它们显示在各种段落和标题属性等中，只是为了测试。

我要做的是使用它们的标签获取当前正在显示的数据，而不是将它们放在表单内的文本框中。

呈现数据并将它们提交给属性等的代码示例是：

    <script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function()
        $("#list").empty();
        var url="http://localhost/test/login/json4.php";
        $.getJSON(url,function(json)
            //loop through deals
            $.each(json.deals,function(i,dat)
                $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>");
                $(document).on('click', '#'+dat.dealid, function(event)  
                    if(event.handled !== true) // This will prevent event triggering more then once
                    
                        dealObject.dealID = $(this).attr('id'); 
                        dealObject.restaurantid = $(this).attr('data-restaurantid');
                        dealObject.name = $(this).find('h1').html(); 
                        dealObject.image = $(this).attr('data-image');
                        //dealObject.dname = $(this).find('input').html();
                        dealObject.dname = $(this).find('input').val();

                        $.mobile.changePage( "#index2",  transition: "slide" );
                        event.handled = true;
                    
                );            
            );
            $("#list").listview('refresh');
        );
    );

    $(document).on('pagebeforeshow', '#index2', function()       
        //$('#index2 [data-role="content"]').html('You have selected Link' + dealObject.dname);
        $('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject);
        $('#index2 [data-role="content"]').find('#title').html(dealObject.name);
        //$('#index2 [data-role="content"]').find('#description').html(dealObject.dname);
        $('#index2 [data-role="content"]').find('#name').html(dealObject.dname);
    );

    var dealObject = 
        dealID : null,
        restaurantid : null,
        name : null,
        image : null,
        dname : null
        
</script>

这是索引 2 html 的片段，直到内容 div 的末尾：

 <div data-role="page" id="index2">

<div data-role="header">
        <h1> Find A Deal </h1> 
    </div>

    <div data-role="content">

        <?php
    if( !isset( $_SESSION ) )
     session_start();
        

    if( isset( $_SESSION['username'] ) )
        echo ".";
         ?>   

        <label for="name">Deal Name:</label>
        <input type="text" value="" name="name" id="name"/>
        <label for="desc">Description</label>
        <input type="text" value="" name="desc" id="desc"/>  
        <a data-role="button" id="submit-button" data-theme="b">Submit</a>

        <img src=""   id="deal-img">
        <h1 id="title"></h1>
        <h3 id="description"></h3>
        <p id="name"></p>
       </div>

【问题讨论】：

我意识到我只是在看一个碎片化的版本，但看起来你必须在你的 $(document).on('click') 函数中创建“);”。 ...

已经添加好了，抱歉，我不想上传太多代码来忽略这个问题。我将这些数据值呈现在“

【参考方案1】：

dealObject.dname = $(this).find('input').html();

您将其设置为 input type='text' 元素的 innerHTML？输入 type='text' 元素的 innerHTML 应始终作为空字符串返回。

我认为你应该使用 .val()

dealObject.dname = $(this).find('input').val();

【讨论】：

谢谢@mirnber 很遗憾，这对我来说仍然没有成功，恐怕 =/

你看过我之前说的吗？看起来您的“);”太多了....浏览器的 JS 错误控制台中是否出现任何消​​息？

反正我也看不到，我会在上面修改我的问题，并放入完整的 jscript 代码，以便您查看

道歉 - 我想我什至只是错误地删除了一半的问题哈哈，漫长的一天！

是的，现在 HTML 消失了。我想说如果 h1 和 p 出现，使用 .val() 应该是你的答案。您确定这不是 jquery 移动缓存问题吗？您是否尝试过每次点击页面刷新两次而不是一次？我知道我遇到了 jquery mobile 对缓存内容非常贪婪的问题

【参考方案2】：

哦，等等，抱歉，我看的不够仔细……可能是因为有多个输入类型='文本元素'……这意味着它匹配了多个元素。为了证实我的理论，你应该可以试试这个......

dealObject.dname = $(this).find('input').eq(0).val();

通过添加 .eq(0) 它应该只对第一个输入 type='text' 元素执行此操作，即 id='name' 的元素

【讨论】：

记录在案并提醒自己...... .find() 可以返回多个元素......而不仅仅是一个。

我还没有害怕 =/ 因为我认为这是一个足够小的错误，或者某些事情正在变成一个非常不可能的任务哈哈！

是的，除非您想发送实时链接，否则我完全没有答案......希望您能弄清楚！

我现在才开始自学编码，所以我没有这个服务或一点，我只是用 localhost 做的。我在其他地方读到了 .val 方法，所以我想知道为什么它对我不起作用。我会继续搜索并告诉你我是否有任何工作！非常感谢您的宝贵时间，我很感激 :)

【参考方案3】：

发现你的问题，name不能作为js对象内的变量名。

变化：

var dealObject = 
    dealID : null,
    restaurantid : null,
    name : null,
    image : null,
    dname : null
 

到这样的事情：

var dealObject = 
    dealID : null,
    restaurantid : null,
    shortname : null,
    image : null,
    dname : null
 

也用这个：

$('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
$('#index2 [data-role="content"]').find('input#name').val(dealObject.dealName);
$('#index2 [data-role="content"]').find('input#did').val(dealObject.dealID);