如何进行同步Jquery .load()

时间:2015-04-01 09:31:49

标签: javascript jquery ajax synchronization

我有一个带有标签的网页,当我点击一个标签时,它应该加载一个文本编辑器,然后从文件中获取文本并将其放在文本编辑器中。

但是,文本不会同步加载,它的行为是异步的。即使我做了一些应该同步的东西。

这是代码:

function init(){
    $( "#accordion" ).accordion({heightStyle: "content",collapsible: true});
    $( "#tabs" ).tabs(
    {
        activate: function(click,ui) {
            ui.oldPanel.children("#editor").remove();
            ui.newPanel.load("be.htm",function(response, status, xhr){
                $("#editor").css("width","100%");
                $("#editor").css("height","500px");
                $.ajax(
                {
                    url: "./load_content.php",
                    async: false,
                    data: "name="+ui.newTab.text(),
                    success: loadContent
                });
            });
        }
    }
    );
}

function loadContent(contenu){
    alert(contenu);
    $("#textBox").html(contenu);
}

根据要求,我试图制作MCVE

这里是be.htm,“编辑”(我拿出了所有不必要的东西)

<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
</body>
</html>

这里是bv.html,代码必须出现的网页(jquery脚本是lcoally存储在我的计算机上,所以你必须输入自己的路径,抱歉

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Projet</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <!-- <link rel="stylesheet" href="YOURPATHHERE/Projet/jquery-ui.css">- -->
    <script src="YOURPATHHERE/Projet/jquery-2.1.3.js"></script>
    <script src="YOURPATHHERE/Projet/jquery-ui.js"></script>
    <script src="YOURPATHHERE/Projet/bv.js"></script>
    <script src="YOURPATHHERE/Projet/jstree.js"></script>
    <link rel="stylesheet" href="./bv.css">
    <script>
    $(function() {
        init();
    });
    </script>
</head>
<body id="body">
<div id="tabs">
        <ul>
            <li><a href="#tabs-1">Onglet1</a></li>
            <li><a href="#tabs-2">Onglet2</a></li>
            <li><a href="#tabs-3">Onglet3</a></li>
        </ul>
        <div id="tabs-1">
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div>
    </div>


</body>
</html>

我向你提供了我到目前为止的完整javascript代码。

最后这里是由ajax调用的php:

<?php

$filename=$_GET['name'];
$data = file_get_contents("./".$filename);
echo $data;
return $data;
?>

顺便说一句,如果你发现这段代码很丑,我很抱歉,但我已经告诉我了。

0 个答案:

没有答案