Im using summernote wyswyg editor, I write some content in the editor then i save it in the Mysql DB, now when i retrieve the content from DB using php and echo it on summernote, the editor shows the html code instead of the formatted content as we see on wyswyg, please give me some solution for this.
My code:
<textarea id="summernote" class="form-control" placeholder="Article" name="article_content"><?php echo $article_content; ?></textarea>
<script src="summernote-0.7.0-dist/dist/summernote.min.js"></script>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: "300px"
});
});
var postForm = function() {
var content = $('textarea[name="article_content"]').html($('#summernote').code());
}
</script>
The ideea is good, the problem is how you take the data.
You should use $('#summernote').summernote('code') to take the data, then echo in a div/text area
Related
I am very new to web designing. I want to create a web page such that when the user is typing in the form, at the same moment that data must be shown on the left side of the same page as in the image below. Example, as the user types in the about me text box, the data area on the left side with about me title should also get updated instantly and dynamically with the same speed the user is typing.
Can anyone please help me how this is possible? or which language will i have to use to do this?
thanks in advance.
example image
You will have to use javascript to achieve this.
<input type="text" id="input">
<div id="output">
</div>
<script>
var input = document.getElementById('input');
var output = document.getElementById('output');
// add event listener to the input element
input.onkeyup= function() {
// set the output element HTML to what you type in
output.innerHTML = this.value;
}
</script>
Fiddle: https://jsfiddle.net/xpvt214o/124485/
Use the following code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('#name').keyup(function () {
$('#display').text($(this).val());
});
});
</script>
</head>
<body>
<input type="text" id="name"/>
<span id="display"></span>
</body>
</html>
I have two divs, and when one is clicked it empties the div. I want to be able to load data into that div once it's been emptied. I've got it so it loads in both, but I only want to load data into the div that's been emptied.
HTML (I have two of these)
<div class="fl person">
<div class="maintain_size">
<input type="hidden" name="userSaved" value="<?php echo $user_one['id']; ?>" />
<img src="<?php echo "http://graph.facebook.com/".$user_one['id']."/picture?type=large"; ?>" class="circle-mask" />
<img class="hoverimage" src="images/fire_extinguisher.png" />
<div class="meta_data">
<h2><?php echo $user_one['name']; ?></h2>
</div>
</div>
</div>
Javascript
<script>
$("div.person img").click(function () {
$(this).parent("div").fadeOut(1000, function () {
var saved_id_user_who_voted_val = "<?php echo $_SESSION['id']; ?>";
var saved_id_user_voted_on_val = $(this).parent('div').find('input:hidden');
var saved_id_user_voted_on_val = saved_id_user_voted_on_val.val();
$(this).parent("div").empty();
// Load in new data
var current_div = $(this).parent("div");
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
});
});
</script>
The data seems to come through fine if I select a div that's not the current one, or I just use an alert to see if the data is there--which it is, but if I try load the data into the current div it just doesn't work. Any ideas? Thanks.
The code that I think is wrong:
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
Edit: The div I'm trying to get the data into is: div.person - although, there are 2 of these.
Once you empty the div your 'this' is no longer there. Try just declaring var current_div before you empty.
var current_div = $(this).parent("div");
current_div.empty();
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
See fiddle
You need to delegate the event as you are replacing old content with new one
$(document.body).on('click',"div.person img",function () {
Use live() function
Example
$("div.person img").live("click",function () {
//Your code goes here
});
I have a bit of code to record a certain action
$('#record').click(function(){
$.get("../confirm.php", { "id": '<?php echo $record; ?>' }, function(data){});
});
Which works fine, but i don't want the page to be full of javascript and such as i have other things like this on it too, so i am trying to move it to a js file.
In the php file
<script type="text/javascript">var record = "<?= $record ?>";</script>
<script type="text/javascript" src="jsfile.js"></script>
In the js file
$('#record').click(function(){
$.get("../confirm.php", { id: record}, function(data){});
});
But it doesnt want to play ball, any ideas how to do this?
Make 'record' as class of div and assign php variable $record as its id.Use event.target.id to get variable $record from div.
<div class="record" id="<?php echo $record;?>">
Your code here
</div>
And Use this
$('.record').click(function(event){
var record=event.target.id;
//your code here
});
If I may a suggestion to you. Set in the view on the element the ID. Then when the action is clicked, get the id for the data.
Example:
<input type="text" name="inputName" id="<?php echo $record; ?>" class="btnToRecord" />
$('.btnToRecord').click(function(){
var clickedElement = $(this);
$.get("../confirm.php", { id: clickedElement.attr("id") }, function(data){});
});
Edit: Correction for $(this) was pointing to the get instead to the element, putting in a var will fix the problem
I am developing an upload script where you can upload an picture, which is directly previewed. After choosing the file it passes it to an php script which echos the picture. The jQuery in the first code inserts this into my preview . After the picture I am printing some input fields. In the input fields you can enter text you want to have on the picture, if you click preview it modifies the picture and shows it on the position the other picture was, but the input fields should stay there. My code:
<script type="text/javascript"><!--//--><![CDATA[//><!--
$j(document).ready(function() {
$j('#photoimg').live('change', function() {
$j("#preview").html('');
$j("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$j("#imageform").ajaxForm({
target: '#preview'
}
}).submit();
});
});
//--><!]]></script>
In the body I have this:
<div id='preview'>
</div>
I am echoing this:
echo "<img src='uploads/".$actual_image_name."' class='preview'><br />";
echo "</div><div id='preview3'>";
echo "Line 1 <input type='text' id='cardtext1' name='cardtext1' value='1'/>";
So I want to close the preview div in my echo and open another one that I can change the html code in the first div (with the picture) without any change to the input fields. The html code should be like:
<div id='preview'>
<img src='uploads/test.jpg' class='preview'><br />
</div> <====this one is missing
<div id='preview3'>
<input type='text' id='cardtext1' name='cardtext1' value='1'/>
</div>
The problem is, if I check the html code of the site it only shows the begin of the new but the closetag is not echoed. I also tried to put it in an php variable but also not working. Why is this? And how to fix?
Something looks wrong with your JavaScript code (the jQuery part).. It looks like there is an erroneous closing curly brace } here:
$j('#photoimg').live('change', function() {
$j("#preview").html('');
$j("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$j("#imageform").ajaxForm({
target: '#preview'
} // <-- right here
}).submit();
});
Looks like it should be:
$j("#imageform").ajaxForm({
target: '#preview'
}).submit();
Anyway, what you're doing by trying to dynamically close that div and inject a new one could be more tricky than its worth. I've never tried to do that but I feel like that would not be cross-browser compatible even if you got it working in, say, Firefox for example.
Instead of using $preview as your target, why not wrap it in another div container and use that:
<div id="container">
<div id="preview"></div>
</div>
Then, your jQuery would look like this:
$j('#photoimg').live('change', function() {
$j("#container").html('')
.html('<img src="loader.gif" alt="Uploading...."/>');
$j("#imageform").ajaxForm({
target: '#container'
}).submit();
});
In which case, the resulting PHP would end up like:
echo '<div id="preview">',
"<img src=\"uploads/{$actual_image_name}\" class=\"preview\"><br />",
'</div><div id="preview3">',
'Line 1 <input type="text" id="cardtext1" name="cardtext1" value="1"/>';
I am trying to display search query results on a separate page. I copied the code from a forum, but since the display page isn't php, I'm not sure it will work.
Here is the code from the home page:
<form action="search" method="post">
<input type="text" name="q" />
<input type="submit" name="search" value="Search" />
</form>
I want the search results to show on mysite.com/search (obviously)
The code on mysite.com/search is as follows:
<div id="cse" style="width: 100%;">Loading</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">//
google.load('jquery', '1');
google.load('search', '1');
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('XXXXX');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
$(".gsc-input").val("<?php echo $_POST['q']; ?>");//insert into search field requested search text
$(".gsc-search-button").click();//call button click event, show results
}, true);
// ]]></script>
Do I have any options? Is there a workaround?
since the display page isn't php
Then you can't use $(".gsc-input").val("<?php echo $_POST['q']; ?>");, but could use something like
$.get('path-to-php-script/query.php', function(data) {
$(".gsc-input").html(data);
alert('Load was performed.');
});
The idea is that you just use jQuery to retrieve and manipulate the data that you need to run through PHP script(s) before they're returned to the HTML-only display page.
You can achive like this
Put this code in your head tag
<script language="javascript">
function changeData(fromDiv)
{
document.getElementById('toDiv').innerHTML = fromDiv.innerHTML;
}
</script>
And This in your body tag
<div id="toDiv"></div>
<div id="fromDiv" onclick="changeData(this)">Hello World I am here</div>