Question

$("#html").load('edit.html #html');

我想重新加载同一页面中已更改的html内容而不刷新

这就是下面的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

性标题

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

<link href="style_edit.css" type="text/css" rel="stylesheet" />
<link href="settings_style.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script  language="javascript" type="text/javascript">

    function display_crear_post_container(){
        document.getElementById('postname').value='Título del post';
        document.getElementById('postname').style.color='#c0c0c0';
        document.getElementById('postname').style.borderColor='#c0c0c0';
        document.getElementById('coment').value='Descripción';
        document.getElementById('coment').style.color='#c0c0c0';
        document.getElementById('coment').style.borderColor='#c0c0c0';
        $("#crear_post_container").fadeIn();
        $("#pre_crear_post_container").fadeIn();
        document.getElementById('content').style.display='block';
    }

    function close_crear_post_container(){
        $("#crear_post_container").fadeOut();
        $("#pre_crear_post_container").fadeOut();
        document.getElementById("reset_button").click();
        $("#prevImage").attr('src','#');
        document.getElementById('seleccionar_archivo').style.display="inline";
        document.getElementById('archivo_seleccionado').style.display="none";
        document.getElementById('seleccionar_archivo').style.borderColor='transparent';
        document.getElementById('publicar').style.display='none';
        document.getElementById('postname').style.backgroundColor='white';
        document.getElementById('coment').style.backgroundColor='white';
        document.getElementById('coment').style.backgroundColor='white';
        document.getElementById('content').style.display='none';
    }





    function display_ver_posts_container(){
        $("#ver_posts_container").fadeIn();
        $("#pre_ver_posts_container").fadeIn();
        document.getElementById('content_ver_posts_container').style.display='block';
    }

    function close_ver_posts_container(){
        $("#ver_posts_container").fadeOut();
        $("#pre_ver_posts_container").fadeOut();
        document.getElementById('content_ver_posts_container').style.display='none';
    }





    function display_settings_container(){
        $("#settings_container").fadeIn();
        $("#pre_settings_container").fadeIn();
        document.getElementById('content_settings_container').style.display='block';
    }

    function close_settings_container(){
        $("#settings_container").fadeOut();
        $("#pre_settings_container").fadeOut();
        document.getElementById('content_settings_container').style.display='none';
    }





    function onfocus_postname_box(){
        while(document.getElementById('postname').value=='Título del post'){
            document.getElementById('postname').value='';
        }
        document.getElementById('postname').style.color='black';
        document.getElementById('postname').style.borderColor='black';
        document.getElementById('postname').style.backgroundColor='white';
    }

    function onblur_postname_box(){
        if(document.getElementById('postname').value==''){
            document.getElementById('postname').value='Título del post';
            document.getElementById('postname').style.color='#c0c0c0';
            document.getElementById('postname').style.borderColor='#c0c0c0';
        }
        else{
            document.getElementById('postname').style.color='green';
            document.getElementById('postname').style.borderColor='green';
            document.getElementById('postname').style.backgroundColor='lightgreen';
        }
    }





    function onfocus_coment_box(){
        while(document.getElementById('coment').value=='Descripción'){
            document.getElementById('coment').value='';
        }
        document.getElementById('coment').style.color='black';
        document.getElementById('coment').style.borderColor='black';
        document.getElementById('coment').style.backgroundColor='white';
    }

    function onblur_coment_box(){
        if(document.getElementById('coment').value==''){
            document.getElementById('coment').value='Descripción';
            document.getElementById('coment').style.color='#c0c0c0';
            document.getElementById('coment').style.borderColor='#c0c0c0';
        }
        else{
            document.getElementById('coment').style.color='green';
            document.getElementById('coment').style.borderColor='green';
            document.getElementById('coment').style.backgroundColor='lightgreen';
        }
    }





    function select_file(){
        document.getElementById('imgfile').click();
        document.getElementById('seleccionar_archivo').style.borderColor='transparent';
    }





    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('prevImage').src=e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
        document.getElementById('seleccionar_archivo').style.display="none";
        document.getElementById('archivo_seleccionado').style.display="inline";
        $("#publicar").fadeIn();
    }

    window.reset = function (e) {
        e.wrap('<form>').closest('form').get(0).reset();
        e.unwrap();
    }

    function send(){
        var errores = 0;

        if(document.getElementById('postname').value=='Título del post'){
            errores++;
            document.getElementById('postname').style.borderColor='red';
            document.getElementById('postname').style.backgroundColor='#ffaaaa';
            document.getElementById('postname').style.color='red';
        }

        if(document.getElementById('coment').value=='Descripción'){
            errores++;
            document.getElementById('coment').style.borderColor='red';
            document.getElementById('coment').style.backgroundColor='#ffaaaa';
            document.getElementById('coment').style.color='red';
        }

        if (document.getElementById('prevImage').getAttribute('src') == '#'){
            errores++;
            document.getElementById('seleccionar_archivo').style.borderColor='red';
        }

        if(errores==0){
            document.getElementById('send').click();
        }

        if(errores!=0){
            return false;
        }
    }





    function tickbox1(){
            document.getElementById('tickbox1').style.display='none';
            document.getElementById('tickbox1ticked').style.display='block';
            document.getElementById('c1').value='1';
    }

    function tickbox1ticked(){
            document.getElementById('tickbox1').style.display='block';
            document.getElementById('tickbox1ticked').style.display='none';
            document.getElementById('config1p').style.color='black';
            document.getElementById('config1p').style.fontSize='120%';
            document.getElementById('config1p').style.textShadow='none';
            document.getElementById('c1').value='0';
    }



    function tickbox2(){
            document.getElementById('tickbox2').style.display='none';
            document.getElementById('tickbox2ticked').style.display='block';
            document.getElementById('c2').value='1';
    }

    function tickbox2ticked(){
            document.getElementById('tickbox2').style.display='block';
            document.getElementById('tickbox2ticked').style.display='none';
            document.getElementById('config2p').style.color='black';
            document.getElementById('config2p').style.fontSize='120%';
            document.getElementById('config2p').style.textShadow='none';
            document.getElementById('c2').value='0';
    }



    function savesettings(){
        var code=0;

        if(document.getElementById('c1').value==1){
            code=code+'c11';
        }
        if(document.getElementById('c1').value==0){
            code=code+'c10';
        }

        if(document.getElementById('c2').value==1){
            code=code+'c21';
        }
        if(document.getElementById('c2').value==0){
            code=code+'c20';
        }



        if(code=='0c11c20'){
            alert('ha seleccionado el primer ajuste pero no el segundo');
        }
        if(code=='0c10c20'){
            $("#result").load("0c10c20.php");
            $("#settings_container").fadeOut();
            $("#pre_settings_container").fadeOut();
            document.getElementById('content_settings_container').style.display='none';
            $("#html").load('edit.html #html');
            //alert('no ha seleccionado ninguno');
        }
        if(code=='0c11c21'){
            alert('ha seleccionado todos');
        }
        if(code=='0c10c21'){
            $("#result").load("0c10c21.php");
            $("#settings_container").fadeOut();
            $("#pre_settings_container").fadeOut();
            document.getElementById('content_settings_container').style.display='none';
            $("#html").load('edit.html #html');
            //alert('ha seleccionado el segundo ajuste pero no el primero');
        }
    }

    function settingsset(){
        if($('#tickbox2ticked').css('display') == 'block'){
            document.getElementById('c2').value=1;
        }
    }

</script>

<div style="display: none;" id="result"></div>
<div style="width: 100%; height: 0.1px;"></div>

<div id="pre_crear_post_container">
    <div id="crear_post_container" class="crear_post_container">

        <div id="content">
        <div style="padding: 10px;">

        <ul style="width: 780px; height: 50px; border-bottom: 3px solid black; line-height: 50px;"><!-- #509a4f -->
        <a href="#" onclick="close_crear_post_container()"><div id="close_crear_post_container"></div></a>
        <a href="#" onclick="alert('info: muy pronto');"><div id="info"></div></a>
        </ul>

        <form enctype="multipart/form-data" method="post" id="form" method="post" action="edit.php">

            <center><p style="border-bottom: 3px solid black; font-size: 200%; color: black; width: 780px; height: 50px; background-color: white; line-height: 50px;">Crea tu post</p></center>
            <div style="float: left; width: 390px; height: 477px;">
            <input style="margin-top: 8px;" class="textbox" value="Título del post" onfocus="onfocus_postname_box()" onblur="onblur_postname_box()" name="postname" type="text" id="postname" />
            <textarea style="margin-top: 8px; height: 400px; max-height: 400px; max-width: 378px;" class="textbox" value="Descripci&oacute;n" onfocus="onfocus_coment_box()" onblur="onblur_coment_box()" name="coment" type="text" id="coment"></textarea>
            </div>

            <div style="float: left; width: 390px; height: 477px;">
            <div style="background-color: white; margin-left: 10px; margin-top: 10px; width: 370px; height: 370px;"><img style="float: right; max-width: 370px; max-height: 370px;" width="auto" height="auto" id="prevImage" src="#" alt="your image" /></div>
            <li style="border: 1px solid transparent; margin-left: 10px; margin-top: 10px;" id="seleccionar_archivo" class="seleccionar_archivo" onclick="select_file()"><a href="#">Seleccionar Im&aacute;gen</a></li>
            <li style="display: none; margin-left: 10px; margin-top: 10px; margin-right: 10px; border-radius: 10px; background-color: green; height: 40px; float: left;" id="archivo_seleccionado"><p style="cursor: default; color: white; display: block; padding-left: 10px; padding-right: 10px; height: 40px; line-height: 40px; font-size: 130%;">Im&aacute;gen Seleccionada<img style="margin-left: 5px; float: right;" src="img/tick.png" /></p></li>
            <div style="display: none;"><input onchange="readURL(this)" id="imgfile" name="uploadedfile" accept=".jpg" type="file" /></div>
            <a style="display: none;" id="reset_button" onclick="reset($('#imgfile'))" href="#">Reset file</a>
            <li onclick="send()" style="display: none; float: right; margin-left: 10px; margin-top: 10px;" id="publicar"><a href="#">Publicar</a></li><button id="send" style="display: none;">send</button>
            </div>

        </form>

        </div>

        </div>
    </div>
</div>





<div id="pre_ver_posts_container">
    <div id="ver_posts_container" class="ver_posts_container">

        <div id="content_ver_posts_container">
        <div style="padding: 10px;">

        <ul style="width: 780px; height: 50px; border-bottom: 3px solid black; line-height: 50px;"><!-- #509a4f -->
        <a href="#" onclick="close_ver_posts_container()"><div id="close_crear_post_container"></div></a>
        <a href="#" onclick="alert('info: muy pronto');"><div id="info"></div></a>
        </ul>

        <form enctype="multipart/form-data" method="post" id="form" method="post" action="edit.php">

            <center><p style="border-bottom: 3px solid black; font-size: 200%; color: black; width: 780px; height: 50px; background-color: white; line-height: 50px;">Hecha un vistazo</p></center>
            <iframe src="posts.php" width="780px" height="474px" style="background-color: white; border: none;"></iframe>

        </form>

        </div>

        </div>
    </div>
</div>





<div id="pre_settings_container">
    <div id="settings_container">

        <div id="content_settings_container">
        <div style="padding: 10px;">

        <ul style="width: 280px; height: 50px; border-bottom: 3px solid black; line-height: 50px;"><!-- #509a4f -->
        <a href="#" onclick="close_settings_container()"><div id="close_settings_container"></div></a>
        <a href="#" onclick="alert('info: muy pronto');"><div id="info"></div></a>
        </ul>

            <center><p style="border-bottom: 3px solid black; font-size: 200%; color: black; width: 280px; height: 50px; background-color: white; line-height: 50px;">Ajustes<img src="img/ajustesbigblack.png" style="position: absolute; margin-left: 5px;" /></p></center>
            <div style="width: 280px; max-height: 475px; background-color: white;">

                <input id="c1" style="display: none;" /><div id="config1" style="height: 50px; border-top : 1px solid black; margin-top: 10px; border-bottom: 1px solid black;"><div id="tickbox1" onclick="tickbox1()"></div><div id="tickbox1ticked" onclick="tickbox1ticked()"></div><p id="config1p" style="float: left; line-height: 35px; font-size: 120%; margin-top: 10px;">Conexi&oacute;n autom&aacute;tica</p></div>
                <input id="c2" style="display: none;" /><div id="config2" style="height: 50px; border-bottom: 1px solid black;"><div id="tickbox2" onclick="tickbox2()"></div><div id="tickbox2ticked" onclick="tickbox2ticked()"></div><p id="config2p" style="float: left; line-height: 35px; font-size: 120%; margin-top: 10px;">Quitar fondo</p></div>

                <div id="savesettings" onclick="savesettings()"><a href="#">Guardar</a></div>

            </div>

        </div>

        </div>
    </div>
</div>





<ul id="navitop">
<li id="crear_post_button" class="crear_post_button" onclick="display_crear_post_container()"><a href="#">Crear un post</a></li>
<li onclick="display_ver_posts_container()" id="ver"><a href="#">Ver posts</a></li>
<li id="eliminar"><a href="#">Eliminar posts</a></li>
<li id="updates"><a href="#">Actualizaciones<img src="img/updates.png" style="float: right; margin-left: 5px;" /></a></li>
<li id="updates"><a href="#">Extensiones<img src="img/extensiones.png" style="float: right; margin-left: 7px;" /></a></li>
<li onclick="display_settings_container()" id="updates"><a href="#">Ajustes<img src="img/ajustes.png" style="float: right; margin-left: 5px;" /></a></li>
</ul>

为什么下面的代码只显示没有新内容的白色？

0 个答案: