I want to move an Html content generated dynamically in php inside an outer div:
Ex.
<div class="top-category>
<div class="cat-container">Category</div>
<div class="categoryA">CatA</div>
<div class="categoryB">CatA</div>
<div class="categoryC">CatA</div>
<div class="categoryD">CatA</div>
</div>
</div>
I want to move all, inside another div under:
<div class="bottom-container">HERE ALL CONTENT</div>
How i can do via jQuery ?
you can use $.detach() to remove required DOM element from body and then append to destination DOM element as follows:
$("div.bottom-container").append($("div.top-category" ).detach());
$('.top-category').clone().appendTo('.bottom-container');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-category">
<div class="cat-container">Category</div>
<div class="categoryA">CatA</div>
<div class="categoryB">CatA</div>
<div class="categoryC">CatA</div>
<div class="categoryD">CatA</div>
</div>
</div>
<br><br>
<div class="bottom-container">HERE ALL CONTENT</div>
I assume you want to move content of "top-category" in to "bottom-container"
Here is jquery code for it
$(function(){
var $child = $(".top-category > div").detach();
$(".bottom-container").append($child);
})
Here is working JSFiddle code
You can do it like this:
<script type="text/javascript">
$(document).ready(function() {
$( ".top-category" ).appendTo( ".bottom-container " );
});
</scrript>
Related
Loading comments others automatically like facebook
**php code updated **
<section class="panel-body">
<div class="container">
<div class="comment">
<div class="commenter" name="comments">
<img width="80px" height="80px" src="uploads/<?php echo $row['photo']; ?>">
</div>
<div class="comment-text-area">
<textarea class="textinput"id="comment" name="comments" placeholder="Comment Here......"></textarea>
<button type="submit" class="butn"name="compost">post comment</button>
</div>
</div>
</div>
</div>
</fotm>
<div id="comments">
<?php include'cajax.php'; ?>
</div>
</section>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(document).ready( function(){
$('#comments').load('cajax.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#comments').load('cajax.php');
refresh();
}, 1000);
}
</script>
how to load comments automatically without page refreshing I know its
possible with ajax but how to implement code please help us
first create another php file named comments.php or whatever you want and cut and paste the code that fetch the comment from DB in that file
And in your main file where you want to show comments create a div , id="comments" or whatever you want .. and inside that div include the new php file like this
<div id="comments">
<?php include'comments.php'; ?>
</div>
now above that code paste the following javascript code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(document).ready( function(){
$('#div_name').load('filename.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#div_name').load('filename.php');
refresh();
}, 1000);
}
</script>
Replace the div_name with the name of your div and filename.php .. with your file name
I can't seem to convert HTML code I retrieve from my database to convert HTML tags such as
<p> or <img>
into regular markup.
Here's what I currently am using.
<script>
$(document).ready(function() {
var titleEditor = $('#titleDiv').summernote();
var contentEditor = $('#contentDiv').summernote();
titleEditor.summernote('code', "{{$Article->name}}")
contentEditor.summernote('code', "{{$Article->content}}")
});
</script>
and my HTML
<div class="panel-heading" style="overflow: hidden;">
<div class="col-md-12">
<div id="titleDiv">
Title Goes Here
</div>
</div>
</div>
<div class="panel-body">
<div id="contentDiv">
Content Goes Here (Don't worry, it'll auto-expand)
</div>
</div>
I've tried every iteration.
Anyone know of any way to fix this? My incessant googling couldn't solve anything.
Zach
you need to tell blade not to escape html code by using {!! !!} syntax
check display data as unescaped.
https://laravel.com/docs/5.3/blade#displaying-data
<script>
$(document).ready(function() {
var titleEditor = $('#titleDiv').summernote();
var contentEditor = $('#contentDiv').summernote();
titleEditor.summernote('code', "{!! $Article->name !!}")
contentEditor.summernote('code', "{!! $Article->content !!}")
});
</script>
I have a page and I want to show and refresh different ads on different locations. I'm getting response from PHP File successfully via AJAX but unable to append them to specific placements.
HTML CODE
<script>var ads = [];</script>
<div id="ad-728x90">fhhfgh</div>
<!-- Page Content -->
<div class="container">
<!-- Heading Row -->
<div class="row">
<div class="col-md-8">
<img class="img-responsive img-rounded" src="http://placehold.it/900x350" alt="">
</div>
<!-- /.col-md-8 -->
<div class="col-md-4">
<h1>Business Name or Tagline</h1>
<p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
<a class="btn btn-primary btn-lg" href="#">Call to Action!</a>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<hr>
<!-- Call to Action Well -->
<div class="row">
<div class="col-lg-12">
<div class="well text-center">
This is a well that is a great spot for a business tagline or phone number for easy access!
</div>
<div id="ad-300x250" class="ads"></div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
Javascript / jQuery code
<script type="text/javascript">ads.push("728x90", "300x250");</script>
<script>
$(document).ready(function()
{
function loadAds()
{
$.post('ads.php', { adID: ads }, function (e) {
if (e.status == 'error')
{
$('.ads').each(function ()
{
$(this).remove();
});
}
else if (e.status == 'ok')
{
var data = e.data;
$.each(data, function (adID)
{
$('#ad-' + adID).find('.ads').html();
});
}
}, 'json');
}
loadAds();
});
</script>
JSON Response:
{"status":"ok","data":{"728x90":"\r\n\t\r\n\t\t\r\n\t\t\t
728x90 ads</p>\r\n\t\t</div>\r\n\t</div>","300x250":"\r\n\t\r\n\t\t\r\n\t\t\t300x250 ads</p>\r\n\t\t</div>\r\n\t</div>"}}
The following should place data in proper id
$.each(data, function (adID, adHtml){
$('#ad-' + adID).html(adHtml);
});
The html shown in question doesn't show any children with class ads in <div id="ad-728x90"> so find('.ads') was removed
Question needs clarification of expected results if this doesn't work
I have three div tags, on click of a link I want to reload the second div tag only instead of loading the complete page, I want to keep the first and third div tag as static and second div tag should be dynamic?
<div class="first">
<?php echo $data->hospital_name;?>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
First of all you should make the difference between your divs by making their IDs unique as Billy said in the comment. Classes are used to make a common selector for all elements. Create your HTML like below:
<div id="first">
<?php echo $data->hospital_name;?>
</div>
<div id="second">
//content//
<div>
<div id="third">
//content//
<div>
Now to load data in only a particular div, you can use Ajax request in three ways using jQuery.
$('#second').load("load.php");
OR
$.post('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.get('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.ajax({
url:"load.php";
data: yourDataObject,
success: function(data){
$('#second').html(data);
}
});
Hope all above will help a little
You can try load
$(".second").load("yourhtml.html");
Give id to second div and then try following
#secondDivId::after {
content:"";
}
it will refresh the second div.
Try this it's working :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#link").click(function(){
$(".second").load("abc.html");
});
});
</script>
</head>
<body>
<div class="first">
<a id="link" href="patientLogin/patientVisit_details/<?php echo $data->patient_visit_id;?>"><?php echo $data->hospital_name;?></a>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
</body>
</html>
Here, abc.html is the file where your content exist that you want to display in <div class="second">...</div> on click the link.
I'm trying to slide one div closed, and another open at the same time using a button. here is my div code:
<div class='toggle_parent'>
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='toggled_content' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
And then the jQuery is as follows:
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none')
$('.toggled_conent').slideDown().css('display', '')
});
});
I've tried so much that my brain doesn't function anymore and I know the answer will be "so easy I should have figured it out", but I'm stuck. I want the toggled content to appear and the toggleHolder to go away when you press the toggler.
Thanks in advance!
Hide your hidden content via javascript instead of the style, and get rid of the .css calls:
$(document).ready(function(){
$('.toggled_content').hide();
$('.toggler').click(function() {
$('.toggleHolder').slideUp();
$('.toggled_content').slideDown();
});
});
Also you had a typo in your .toggled_content selector.
Here's a working JSFiddle.
Have you tried this?
$('.toggler').click(function() {
$('.toggleHolder').slideUp().hide();
$('.toggled_conent').slideDown().show();
});
Please change class name = "toggled_content" to something else in div and jquery so this looks like
jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none');
$('.haveOther').slideDown();
});
});
</script>
HTML
<div class='toggle_parent' style="background-color:#999;">
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='haveOther' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
This will work for you.