JqueryMobile navigation標題問題

這裏是調用上述方法的html文件。當單擊「callAjax」調用時，我可以顯示列表視圖。這些列表視圖點擊時不會顯示導航欄標題。JqueryMobile navigation標題問題

<body> 
    <div data-role="page" > 
    <div data-role="header" data-theme="b" > 
     <h1>NDUS Directory</h1> 
    </div><!-- /header --> 

    <div data-role="content" > 
     <div id ="divsearch" class ="LogoImage" > 
      <img src="Images/logo.gif" align="middle" /> 
     </div> 
     <p></p> 

     <label for="fname">First Name: </label> 
     <input type="text" name="fname" id="fname" value="" /> 
     <label for="lname">Last Name: </label> 
     <input type="text" name="lname" id="lname" value="" /> 
     <p></p> 

     <input id="callAjax" type="button" value="Search" data-theme="b" /> 

     <!-- TO SHOW PEOCESSING LAG INFORMATION --> 

     <span id="sp" class = "spanRed"></span> 
      <div id="resultLog"> 

      </div> 
      <div id="ajaxBusy" class ="busyAJAX"> 
       <p> 
        <img src="Images/progress.gif"> 
       </p> 
      </div> 


      <span id="placeholder"></span> 

      <ul id = "idul" data-role="listview" data-theme="b" data-inset="true"> 
      </ul> 
     </div><!-- /content --> 
</div><!-- /page --> 
</body> 
</html>

enter image description here 這裏是一個示例AJAX調用該動態地生成的列表視圖。代碼完成它的工作..但顯示有關列表視圖（單擊時）的詳細信息的窗口不會獲得導航欄的任何標題。在code..it需要顯示txt.firstname和txt.lastname。

$.ajax({ 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: "DirectoryData.asmx/TestSearch", 
    data: argument, 
    dataType: "json", 
    beforeSend: function() { 
     $("#resultLog").html("Loading" + '<img src="Images/progress.gif" />'); 
    }, 
    success: function (msg) { 
     var items = []; 

     $("#unfinshed").remove(); 

     var public_tweets = JSON.parse(msg.d); 

     if (public_tweets.length > 0) { 
      // remove older values 
      $("#placeholder").after('<ol id="unfinshed" data-role="listview" data-theme="b" data-inset="true" data-dividertheme="c"></ol>'); 
      $('<li data-role="list-divider">Records found: ' + public_tweets.length + '</li>').appendTo("#unfinshed"); 

      // $('#unfinshed').empty(); 
      for (var x = 0; x < public_tweets.length; x++) { 
       var txt = public_tweets[x]; 
       var imageName; 

       if (txt.type == "Faculty") { 
        imageName = "Images/BusinessPerson.png"; 
       } else { 
        imageName = "Images/StudentPerson.png"; 
       } 
       //<img src="images/gf.png" alt="France" class="ui-li-icon"> 

       $('<li><img src="' + imageName + '" class="ui-li-icon"> 
        <a href="#" >' + txt.firstname + ' ' + txt.lastname + ' 
        </a><p></p><p>' + txt.title + '</p>' + 
        '<ul data-theme="c" data-inset="true">' + 
        '<li><span class="dirHeaderFont">' + 'Institution:</span><p></p> 
        <span class="footerTextFont">' + txt.institution + '</span></li>' + 
        '<li><span class="dirHeaderFont">' + 'Department:</span><p></p> 
        <span class="footerTextFont">' + txt.department + '</span></li>' + 
        '<li><span class="dirHeaderFont">' + 'Title:</span><p></p> 
        <span class="footerTextFont">' + txt.title + '</span></li>' + 
        '<li data-icon="grid"><span class="dirHeaderFont">' + 
        'Phone:</span><p></p><span class="footerTextFont"> 
        <a href="tel:' + txt.phonenumber + '">' + txt.phonenumber + 
        '</a></span></li>' + 
        '<li data-icon="search"><span class="dirHeaderFont">' + 
        'Email:</span><p></p><span class="footerTextFont"> 
        <a href="mailto:' + txt.email + '">' + txt.email + 
        '</a></span></li>' + 
        '<li><span class="dirHeaderFont">' + 'Active:</span><p> 
        </p><span class="footerTextFont">' + txt.active + 
        '</span></li>' + '</ul>' + 
      '</li>').appendTo("#unfinshed"); 

      } 
      $("#unfinshed").page(); 

     } else { 
      // display no records found 
      $("#placeholder").after('<ul id="unfinshed" data-role="listview" data-theme="c" data-inset="true"></ul>'); 
      $('<li>' + 'No records found' + '</li>').appendTo("#unfinshed"); 
      $("#unfinshed").page(); 

     } // end of public_tweets check 

     $("#resultLog").html(' '); // remove the loading image 

    } 
}); // end of ajax 


$("#resultLog").ajaxError(function (event, request, settings, exception) { 
    $("#resultLog").html("Error connecting to database. Try again later."); 
    //$("#resultLog").html("Error connecting to database. Try again later.: " + settings.url + "<br />HTPP Code: " + request.status); 
});

來源

2011-07-25 bp581

我沒有看到你所添加的標題導航代碼，你可以提供這個呢？你是否在頁面轉換/ ajax調用之後設置它？ –

我jsut添加了JavaScript從中調用的hrml代碼。任何幫助都非常重要。 – bp581

你可以嘗試添加自定義標題是這樣的：

$("div:jqmData(role='header')").prepend('<h1>Custom Title</h1>');

可能需要鼓搗出來一點點，但它的工作原理

UPDATE：

活生生的例子：

http://jsfiddle.net/phillpafford/trdYP/51/

JS：

$("div:jqmData(role='header') > h1").replaceWith('<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">New Title</h1>');

HTML：

<div data-role="page" id="home"> 
    <div data-role="header"> 
     <h1 >Home</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Home Page</li> 
      <li><a href="#page2">Page 2</a></li> 
     </ul> 
    </div> 
</div> 
<!-- Page 2 --> 
<div data-role="page" id="page2"> 
    <div data-role="header"> 
     <h1 >Page 2</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Home Page</li> 
      <li><a href="#home">Home Page</a></li> 
     </ul> 
    </div> 
</div>

來源

2011-07-25 19:20:40

你能告訴我在哪裏需要添加這段代碼....我是JqueryMobile的新手。可能在$（「＃unfinshed」）。page（）;之前有 – bp581

。 –

嘗試..但沒有運氣... !!! – bp581

JqueryMobile navigation標題問題

回答

相關問題