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>
Related
I want to randomly display three divs (of the same class ".post-content") from a specific url.
I can display contents of a div from another url (with consent) using the following code, but it lacks the randomisation I need:
<script>
$(function(){
var contentURI= 'http://www.example.com/ .post-content';
$('#response').load('grabber.php?url='+ contentURI);
});
</script>
<?php echo file_get_contents($_GET['url']); ?>
<div id="response"></div>
EDIT This currently outputs a url with just the one div of that class. I need it to output x3 divs of the same class at random.
My skills are somewhat lacking to mash other code I've found into one concise code. Any assistance you can provide would be greatly appreciated. Thank you.
Found the answer...
JQuery
$.get("https://www.example.com", function(data) {
var $quotes = $(data).find(".container-articles-5"),
count = $quotes.length,
$random = function() {
return $quotes.eq(Math.floor(Math.random() * count));
};
$(".blog-ad-1").append($random);
});
HTML
<aside class="blog-ad-4">
<div class="blog-ad-5">
<div class="blog-ad-3">
<div class="blog-ad-1"></div>
</div>
<div class="blog-ad-3">
<div class="blog-ad-1"></div>
</div>
<div class="blog-ad-3">
<div class="blog-ad-1"></div>
</div>
</div>
</aside>
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>
<a href="#">
<div class="col-md-5 campaigns" id="hoverimg">
<img class="featurette-image img-responsive" src="images/tee1.png" >
<li class="progressbar">
<p>
<!--<strong>Orders Completed</strong>--> <span class="pull-right small muted">78%</span>
</p>
<div class="progress tight">
<div class="bar" style="width: 78%;">
</div>
</div>
</li>
<div class="prodheading">
<h2>Heading 1</h2>
</div>
</div>
</a>
jQuery code:
<script>
$('document').ready(function ()
{
$(function ()
{
$("#hoverimg")
.mouseover(function ()
{
var src = $(this).attr("src").match(/[^\.]+/) + "images/tee2.png";
$(this).attr("src", src);
})
.mouseout(function ()
{
var src = $(this).attr("src").replace("images/tee2.png");
$(this).attr("src", src);
});
});
});
</script>
I am not getting the real problem behind this.
Your JavaScript is completely commented out by having // in front of every line. These will have to be removed if you want anything to happen.
There are some issues:
.replace() is a JavaScript String method and requires two arguments:
the regular expression and
the replacement string.
.match(/[^\.]+/) + "images/tee2.png probably does not work as you expect it to do: .match(/[^\.]+/) will return the first part of the string it is applied on that does not cointain a dot ('.'). Is this really what you want to do?
example:
"path/subpath/filename.ext".match(/[^\.]+/) + "images/tee2.png"
will return
"path/subpath/filenameimages/tee2.png"
You have applied the id to the div tag and in jquery you are trying to get the src. You must assign the id to the img tag.
$("#hoverimg1").hover(
function() {$(this).attr("src","images/teee2.png");},
function() {$(this).attr("src","images/teee1.png");
});
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.