2012-02-15 21 views
1

Ajax経由でHTMLページをdivにロードするajax呼び出しがあります。ページがdivに読み込まれると、読み込まれたHTMLページのコンテンツを操作することができます。たとえば、ページがdivに読み込まれると、その周りに1ピクセルの境界線を持つID「1」の画像の1つをスタイルしたいと思います。以下はJQueryとAJAXを介してDIVに動的にロードされたHTMLページ要素のスタイルを変更します。

私はその後のページにこのコードは、私が

$( '#1' を試してみました実行されている場所のdiv

function getMessage(){ 
var sTitle = null; 
var sBody = null; 
var sImage = null; 
sImage = GetImageID(); 
$.ajax({ 
    type: "POST", 
    url: "xt_getAJAXData.asp", 
    data: {"cid":"3586", 
    "elid"   :"2425", 
    "sText"   : sBody, 
    "title"   : sTitle, 
    "img"   : sImage 
    }, 
    success: function(resp){ 
    // we have the response 
    var toLoad = 'sys_show_template.asp?step3=1&campaignid=3586' 
     $('.content').fadeOut('fast', loadContent); 
     $('#load').remove(); 
     $('#waiting').append('<div id="load">Loading<br><img src="' + loadinggif + '" alt="Loading" /></div>'); 

     $('#load').fadeIn('normal'); 
     function loadContent() { 
      $('.content').load(toLoad, '', function(response, status, xhr) { 
       if (status == 'error') { 
        var msg = "Sorry but there was an error: "; 
        $(".content").html(msg + xhr.status + " " + xhr.statusText); 
       }    
      }).fadeIn('slow', hideLoader()); 
     } 
     function hideLoader() { 
      $('#load').fadeOut('fast'); 
     } 
     return false; 
    }, 
    error: function (xmlHttpRequest, textStatus, errorThrown){ 
    alert('Error: ' + xmlHttpRequest + " "+ textStatus + "" + errorThrown); 
    } 
}); 

}

にコンテンツをロードするために使用されるAjaxコードです).css( 'border'、 'solid 1px red');

ここにHTMLがあります。これは私が

<table width="99%" border="0" cellspacing="1" cellpadding="2">  
     <tr>  
      <td><img id="1" src="http://xxx.xxx.xx.xxx/upload/66/img_2873.jpg" border="0" width="180" alt="Property Picture"></td>  
      <td><img id="2" src="http://xxx.xxx.xx.xxx/upload/DD/img_2875.jpg" border="0" width="180" alt="Property Picture"></td>  
      <td><img id="3" src="http://xxx.xxx.xx.xxx/upload/77/img_2877.jpg" border="0" width="180" alt="Property Picture"></td>  
     </tr>  
     </table> 

テーブルを使用しかし、HTMLをストリームとしてID「#1」のdivにロードされているので、作られたページからアクセスできるように表示されない理由であるメールマーケティングアプリケーション用ですコール。

jquery AJAX経由でページに読み込まれた要素ID#1のCSSプロパティを操作することはできますか、iFrameを使用する必要がありますか?

ありがとうございます。

+2

IDは数字で始めることはできません。 –

+0

私はそれを知らなかった。しかし、私はIDを何でも作ることができる質問の目的のためにIDの名前は無関係です。 – Rob

+0

変更しようとしているHTMLを表示してください。 –

答えて

1

$は、( "...")CSSがdivに追加$.ajaxからresponseTextに動作します。

<!doctype html> 
<html> 
    <head> 
    <meta charset="UTF-8"/> 
    <title>Example document</title> 
    </head> 
    <body> 
    <p>Example paragraph</p> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
     function reskin() 
     { 
     $("#betamax").html(String(arguments[0].responseText).match(/<p.*/g)[0]); 
     $("#betamax p").css("color","blue"); 
     } 

     function beta() 
     { 
     var alpha = alpha || $.ajax({complete: reskin}); 
     $("body").append(String('<div id="betamax"></div>')); 
     } 
     beta(); 
    </script> 
    </body> 
</html> 
関連する問題