Webgen Webgen - 7 months ago 31
Javascript Question

Css style not loading on ajax page in php

i have div in index page which display data from external page, data is displaying but not the css style. css styles are added on both pages yet text is displaying normally.

<script type="text/javascript">
$(document).ready(function() {
$('#not').load('job-notification2.php');

$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: 'assets/css/oneui.min.css'
}).appendTo("head");
});
</script>


How it should look like:enter image description here

And how it looks: enter image description here

More Information:
Index contains:

<ul class="dropdown-menu dropdown-menu-right">

<div id="not"></div>
<ul>


job-notification2.php contains:

<li style="padding:5px" class="hidden-sm hidden-xs">
<a href="#"><i class="fa fa-exclamation"></i>
No notifications </a>

</li>

Answer

Add new style in job-notification page ie:

.xyz {
display: list-item;
text-align: -webkit-match-parent;
line-height: 1.42857143;

}
.xyz a{
display: block;
padding: 7px 12px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap}
.xyz a:hover{
background-color: #f9f9f9
color: #262626;
text-decoration: none;
background-color: #f5f5f5
}


<li class="xyz"> content </li>

The problem is with external css.

Script required would be :

<script type="text/javascript">
$(document).ready(function() {
           $('#not').load('job-notification2.php');});
 </script>
Comments