1

I'm setting up my web page to use JQuery to update the page without refreshing when the user clicks on the navigation links. The basic structure of my pages looks like:

<!DOCTYPE html >
<html>
<head>
  <title><?php if(x($page,'title')) echo $page['title'] ?></title>
  <script>var baseurl="<?php echo $a->get_baseurl() ?>";</script>
  <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?>
</head>
<body>
    <div class='main-container'>
        <?php if(x($page,'nav')) echo $page['nav']; ?>
        <div class='main-content-loading'><img src="/view/theme/zp/ajax-loader.gif" alt="Please wait..."></div>
        <div class='main-content-container'>
        <aside><?php if(x($page,'aside')) echo $page['aside']; ?></aside>
        <section><?php if(x($page,'content')) echo $page['content']; ?>
            <div id="page-footer"></div>
        </section>
        <right_aside><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></right_aside>
        <footer><?php if(x($page,'footer')) echo $page['footer']; ?></footer>
        </div>
    </div>
</body>
</html>

The main sections are filled in using PHP scripts.

The JQuery functions I'm using to update the page are

$(document).ready(function() {

    $('.nav-load-page-link').click(function() {
        getPageContent( $(this).attr('href') );
        hideNavMenu( '#' + $(this).closest('ul').attr('id') );
        return false;
    });
}

function getPageContent(url) {

    var pos = $('.main-container').position();

    $('.main-container').css('margin-left', pos.left);  
    $('.main-content-container').hide(0, function () {
        $('.main-content-loading').show(0);
    });

    $.get(url, function(html) {
        console.log($('.main-content-container').html());
        $('.main-content-container').html( $('.main-content-container', html).html() );
        console.log($('.main-content-container').html());
        $('.main-content-loading').hide(function() {
            $('.main-content-container').fadeIn(800,function() {
                $('.main-container').css('margin-left', 'auto'); 
            });
        });
    });
}

I have console logging commands as shown, which allow me to see what the HTML is before and after applying the results of the GET request.

So the weird thing that's happening is that for one page in particular, if I load it by entering the URL into the browser address bar, it loads as expected. But if I load it using my JQuery functions, the HTML tags show up garbled. For example, a form that looks like the following when I load by typing the URL into the address bar

<div id="connect-desc">Enter address or web location</div> 
<form action="follow" method="post"> 
<input id="side-follow-url" name="url" size="24" title="Example: bob@example.com, http://example.com/barbara" type="text">
<input id="side-follow-submit" name="submit" value="Connect" type="submit"> 
</form> 
</div>

comes out like the following when I use the JQuery function

<div id="connect-desc">Enter address or web location</div> 
<form action="follow" method="post">
</form> 
<input id="side-follow-url" name="url" size="24" title="Example: bob@example.com, http://example.com/barbara" type="text">
<input id="side-follow-submit" name="submit" value="Connect" type="submit"> 
</div>

Or an image link that looks like the following when I type the URL into the address bar

<a href="https://some-place" title="some-title">
<img src="https://img-loc" alt="">
</a>

comes out like the following with the JQuery function

<a href="https://some-place" title="some-title">
</a>
<img src="https://img-loc" alt="">

Does anyone have any ideas why this is happening?

4

1 回答 1

1

解决方案是确保您从服务器发回的 html 是有效的。Jquery 1.4+ 将强制使用有效的 html。例子：

<table>
  <tr>
     <td>generated html from server</td>
  </tr>
   <tr>
     <td>generated html from server</td>
  </tr>
 <div>
     <form>
        <input type="text">
     </form>

由于缺少</table>标签，上述内容将无法验证。Jquery 会尝试修复它并且经常会混淆它

于 2012-10-17T21:43:44.077 回答