2

1) I have 2 different domains i) www.xxx.xom ii) www.yyy.com

2) then sent server call from xxx page to yyy page by ajax

3) get html content from yyy to xxx page (content contain html data with inline css)

4) Now i want to append response (html content) into my DOM But without css conflict (It means response content does not affect by parent css)

Note: is there any possible to render without IFRAME

Sample code:

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    var ajax_response = "<div style='color: blue;'>I m blue </div>"; // sample server reponse
    document.getElementById("child").innerHTML = ajax_response;
  }
}
#parent div {
  color: red !important;
}
<div id="parent">
  <div>I m red</div>
  <div id="child"></div>
  <div>I m red too</div>
</div>

Output: red color will be applied for "I m blue" text (Because of '!important' tag)

Muniyan
  • 21
  • 5
  • Welcome to Stack Overflow. So you want the HTML that is added, with the inline Style to be unaffected by the styling of the page it's being added into? I think that is where `!important` should be used. – Twisty Jan 25 '16 at 07:55
  • There is not "out-of-the-box" solution for this. You will have to manually reset all unwanted styles for the included html as per the surrounding container as the seletcor prefix. – connexo Jan 25 '16 at 07:58
  • Thanks for your comment. But here We can't add !important for inline css (Because that data provided by end user – Muniyan Jan 25 '16 at 08:37
  • @Twisty Please see the sample code. – Muniyan Jan 25 '16 at 08:51
  • It's not going to happen: http://stackoverflow.com/questions/5080365/css-to-prevent-child-element-from-inheriting-parent-styles – Twisty Jan 25 '16 at 18:02

3 Answers3

0

If i understand you right, you want to style the first div but not the second div, which comes from your ajax call.

#parent:first-child {
  color: red !important;
}

this will only affect the first div of your div #parent

Charly H
  • 147
  • 9
  • I want to avoid parent css for only one div – Muniyan Jan 25 '16 at 10:02
  • One way is use IFRMAE but i need some other way to solve this problem. Is there any other solution to append html content without conflict? – Muniyan Jan 25 '16 at 10:07
  • You said in your original post: "Now i want to append response (html content) into my DOM But without css conflict (It means response content does not affect by parent css)". My code does exactly that. I don't understand what you want to achieve now? – Charly H Jan 25 '16 at 13:21
  • Please run code snippet above and see output. Both statement printed by red color But second statement has blue color (inline style). Reason: Parent div has red color style with !important tag. When we use iframe instead of div, it never happen because iframe does not inherit parent css I need same feature without using iframe if possible – Muniyan Jan 25 '16 at 15:23
0

I got this to work: https://jsfiddle.net/Twisty/sc6n560t/

HTML

<a id="act" href="">Action</a>

<div id="parent">
  <div>I'm red</div>
  <div id="child"></div>
  <div>Other Text</div>
</div>

CSS

#parent div {
  color: red;
}

div#child.content {
  all: default;
}

JQUERY

$(document).ready(function() {
  $("#act").click(function(e) {
    e.preventDefault();
    var ajax_response = "<div style='color: blue;'>I'm blue </div>"; // sample server reponse
    $("#child").html(ajax_response);
  });
});

This answer was found in the update from this question: CSS to prevent child element from inheriting parent styles

Edit: The CSS Working Group is up to something:

div.content { all: default; }

No idea, when or if ever this will be implemented by browsers.

Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, @Lea Verou!)

Community
  • 1
  • 1
Twisty
  • 30,304
  • 2
  • 26
  • 45
0

create a div in your xxx page. add this to your script..

$("#your_div_id").append(response_from_server)

Shakul Mittal
  • 1