Jquery将文件从文件加载到div中重新加载页面

时间:2016-04-11 17:38:59

标签: jquery

我需要在模式中加载一个div文本形式的文件

“file.txt”位于文件夹txt_files。

在我的索引中我有这个jquery代码

$('#modal-div').on('show.bs.modal', function (event) {
   var handler = $(event.relatedTarget); 
   var objData = handler.data();

   $('.div-for-text').load('path/to/file'+handler.data('contract'),function(){
        console.log('ok, done loading file');
    });
});

全部包含在$(document).load(function(){});

handler.data是放置在加载模态的按钮内的数据标记。它包含文件的名称(file.txt)。

并且对于final,这是需要使用模式中的文本数据填充的div:

<p class="div-for-text">
  <!--Load Text Here-->
 </p>

当我尝试加载模态并触发我在控制台中看到的功能时,完成加载文件。但是然后所有页面重新加载并且div没有填充。

我尝试在加载回调函数中添加event.preventDefault(),但它不起作用。

有人有同样的问题吗? 感谢所有帮助

2 个答案:

答案 0 :(得分:1)

您可以使用AJAX获取文件,然后使用其内容更新<div>。我还没有对此进行测试,但它应该有效:

$('#modal-div').on('show.bs.modal', function (event) {
    $.ajax({
        url : "file.txt",
        dataType: "text",
        success : function (data) {
            $(".div-for-text").html(data);
        }
    });
});

答案 1 :(得分:1)

您应该在{ object{ address1: '', address2: '', postalCode: ''} email: "", firstName:"ohoh", gender:"", id:1460331472003, lastName: "asd", phone: "" } 回调函数中运行event.preventDefault(),而不是.on()回调函数代码。

.load()