CODEWITHSUNDEEP
javascriptajaxdomjquery
Rob
Rob

Reputation: 333

change style of an HTML page element that was loaded dynamically into a DIV via Jquery and AJAX

I have a an ajax call that loads an HTML page into a div via Ajax. Once the page is loaded into the div is it possible to manipulate the content of the HTML page that was loaded. For instance, once the page is loaded into the div I would like to style one of the images with the ID "1" to have a 1 pix border around it.

Below is the ajax code I used to load the content into the 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 );  
   }  
 });

}

Then on page where this code is running I tried

$('#1').css('border', 'solid 1px red');

Here is the HTML. THis is for an email marketing application which is why I used tables 

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

But since the id "#1" is loaded into the div as an HTML stream it does not appear to be accessible from the page that made the call.

Is is possible to manipulate the css properties of the element ID #1 loaded into page via jquery AJAX or do I have to use an iFrame?

Thanks in advance.

Upvotes: 1

Views: 1630

Answers (1)

Paul Sweatte
Paul Sweatte

Reputation: 24617

$("...").css works on responseText from $.ajax appended to a 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>

Upvotes: 1

Related Questions