2011-07-25 8 views
0

ここに、上記のメソッドを呼び出す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呼び出しです。コードはその仕事をしますが、リストビュー(クリックされたとき)の詳細を示すウィンドウはナビゲーションバーのタイトルを取得しません。コードでは、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); 
}); 
+0

?ページ遷移/ ajaxコールの後で設定していますか? –

+0

私はjavascriptが呼び出されるhrmlコードを追加しました。どんな助けも大歓迎です。 – bp581

答えて

0

あなたは、このようなカスタムタイトルを追加しようとすることができます:

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

はそれで少しをいじくり回す必要があるかもしれませんが、それは

UPDATE作品:

ライブ例:

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> 
+0

このコードを追加する必要がある場所を教えてください....私はJqueryMobileの初心者です。 – bp581

+0

おそらく$( "#unfinshed")の前です。 –

+0

試してみましたが、運がいい... !!! – bp581

関連する問題