изменить стиль элемента HTML-страницы, который был динамически загружен в DIV через Jquery и AJAX - PullRequest
Новая
       1

изменить стиль элемента HTML-страницы, который был динамически загружен в DIV через Jquery и AJAX

1 голос
/ 15 февраля 2012

У меня есть вызов ajax, который загружает HTML-страницу в div через Ajax.Как только страница загружена в div, можно манипулировать содержимым HTML-страницы, которая была загружена.Например, когда страница загружена в div, я хотел бы стилизовать одно из изображений с идентификатором «1», чтобы вокруг него была граница в 1 пиксель.

Ниже приведен код ajax, который я использовал для загрузки содержимого в 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 );  
   }  
 });

}

Затем на странице, где выполняется этот код, я попытался

$ ('# 1'). 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>

Но так как идентификатор "# 1" загружается в div в виде потока HTML, он кажется недоступным со страницы, котораясделал звонок.

Можно ли манипулировать свойствами css элемента ID # 1, загруженного на страницу через jquery AJAX, или мне нужно использовать iFrame?

Заранее спасибо.

1 Ответ

1 голос
/ 06 марта 2012

$ ("..."). Css работает на responseText с $.ajax, добавленным к div: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...