Cannot load variable data into Summernote - javascript

I want summernote to display the content if it's exists when loading. But I am unable to load value of a variable into Summernote during it's initialization in codeview.
Here's the code:
$(document).ready(function() {
$('.summernote').on('summernote.init', function () {
$('.summernote').summernote('codeview.activate');
}).summernote({
height: 300,
placeholder: 'Paste content here...',
codemirror: {
theme: 'monokai'
}
}).summernote('code', '<?php echo isset($profiledata["Profile"])?$profiledata["Profile"]:"" ?>');
});
<form>
<div class="form-group">
<label for="summernote"><strong>Paste the HTML code here:</strong></label>
<textarea class="summernote" name="profile" id="profile"> </textarea>
</div>
<button type="submit" class="btn btn-success" id="submitButton">Submit</button>
</form>
I posted the solution that worked for me. However, I welcome any suggestions. Thanks,

You can get the existing content in Summernote by setting it between the textarea tags.
<form>
<div class="form-group">
<label for="summernote"><strong>Paste the HTML code here:</strong></label>
<textarea class="summernote" name="profile" id="profile"><?php echo
((isset($yourcontent)) ? '' . $yourcontent . '' : ''); ?></textarea>
</div>
<button type="submit" class="btn btn-success"
id="submitButton">Submit</button>
</form>

The content is not being displayed in codeview mode. So, I used a hack - Deactivated codeview and displayed the content and re-activated the codeview. Here is the solutions that worked for me. However, I welcome any suggestions. Thanks,
$(document).ready(function() {
$('.summernote').on('summernote.init', function () {
$('.summernote').summernote('codeview.activate');
});
$('#profile').summernote({
height: 300,
placeholder: 'Paste content here...',
codemirror: {
theme: 'monokai'
}
});
codeviewOn = $('#profile').summernote('codeview.isActivated');
if (codeviewOn) {
$('.summernote').summernote('codeview.deactivate');
$('#profile').summernote('code', '<?php echo json_encode($profiledata["Profile"]);?>');
$('.summernote').summernote('codeview.activate');
}
});

Related

jQuery datepicker doesn't appear, but the element appeared at the corner of the screen

I'm currently having an issue with the jquery datepicker.
Here's my code :
<div class="form-group print" id="div_tempat_print" style="margin-top:50px;text-align: center;display:none">
<div style="top:10%;width:100%;padding-top: 5px;color:black;background-color:#E0E0E0;">
<div class="print" id="show_remark" style="margin-left:300px;">
<div style="width:100%;text-align:left;font-weight:bold" >Remark</div>
<textarea class="form-control" name="remark_all" style="width:500px;height:75px;"><?php echo $data_by_id['remark'] ?></textarea>
<?php if($data_by_id['task_id_reference']=='' && strpos($data_by_id['site_id_destination'],'WDHL') !== false) { ?>
<div style="width:100%;text-align:left;font-weight:bold">Planned Inbound Date</div>
<input class="form-control" style="width:500px;" type="text" name="planned_inbound_date" id="planned_inbound_date">
<?php } ?>
</div>
.
.
.
<script type="text/javascript">
$(function(){
$("#planned_inbound_date").datepicker(
{format:'yyyy-mm-dd'}
);
});
</script>
Here's how it looks on my website :
In that pic, I'm positioning my cursor by clicking in the planned_inbound_date input field. Here's how it looks normal in the other form :
If you need another code, I'll update my post :)
Thanks!
Please use the z-index option because it's hiding in the background.

LocalStorage on button click

i have page register here
and i wanna use LocalStorage to show email verifiaction after register.
but i still confuse with method after click and before click.
i have notification here
<div class="alert success">
and i have input button here
<input type="submit" class="btn btn-default size-new-account" value="<?php esc_attr_e( 'Create new account', 'woocommerce' ); ?>" />
i set a localstorage on script like
localStorage.setItem('register1','.alert.success');
jQuery('input.btn.btn-default.size-new-account').click(function(){
var reg = localStorage.getItem('register1');
});
but it wont works.
the div notification i set display: none; in .css
LocalStorage not for showing or hiding element, it store string, use .show(), .hide() instead
localStorage.setItem('register1', 'Im string from localStorage');
jQuery('input.btn.btn-default.size-new-account').click(function() {
var reg = localStorage.getItem('register1');
$('.alert.success').html(reg);
$('.alert.success').show();
});
.alert.success {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="alert success">I'm hidden</div>
<input type="submit" class="btn btn-default size-new-account" value="submit" />

Post button without refreshing page

I'm a newbie in coding and I need your expertise help.
This is my index.php codes
<div class="container">
<div class="row text-center"><h1>Stamford Network</h1></div>
<div class="row">
<div class="col-md-9">
<input type="textarea" name="text" placeholder="What's on your mind?" class="form-control" id="info" />
<input type="button" name="post" value="Post" class="btn btn-primary" id="post" />
</div>
<div class="col-md-3">
<h3>Hello,
<?php echo $_SESSION['username']; ?>
</h3>
<a class="btn btn-primary" href="login.php" role="button" >Logout</a>
</div>
</div>
<div class="row">
<div class="col-md-9">
<h4 id="display"></h4>
</div>
<div class="col-md-3"></div>
</div>
</div>
My .js code which link to the above index.php
window.onload = function() {
var button = document.getElementById("post");
button.addEventListener("click",
function() {
document.getElementById("display");
});
}
Can anyone tell me how create a post and display it without refreshing the page. Simply just click on the Post button then the information should appear below the posting form. While the words in the textarea should be gone when the button is clicked.
Please only show me the javascript way
var button = document.getElementById('post'),
info = document.getElementById('info'),
display = document.getElementById('display');
button.addEventListener('click', function(){
display.innerText = info.value;
info.value = '';
});
If you want the value to be uploaded to server for processing, you will need to add ajax XMLHttpRequest in the event listener.
Learn more about ajax here.
You should do it asynchronously.
First, use the tag to surround the data that you want to post:
<form>
...
</form>
Tutorial about forms:
https://www.w3schools.com/html/html_forms.asp
To post form asynchronously, you can use jquery or js. The simple and quick way is jquery. Here is a link to the documentation:
https://api.jquery.com/jquery.post/
There is an example at the end of the page of the jquery post doc's page, that explains how to use it, and basically do the thing that you wanted.
try this.
<script type="text/javascript">
window.onload = function() {
var button = document.getElementById("post");
button.addEventListener("click",
function() {
//document.getElementById("display");
document.getElementById('display').innerHTML = document.getElementById('info').value;
document.getElementById("info").style.display = "none";
});
}
</script>

TinyMCE: Retrieving information from popup

I'm having trouble with the documentation on TinyMCE for plugin development.
I simply want to display a popup to choose between internal links / external links then either choose another page on the site or let the user insert an external link.
To launch the window I'm using the following code :
tinymce.PluginManager.add( 'insumolinks', function( editor, url ) {
// Add a button that opens a window
editor.addButton( 'insumolinks', {
text: 'Link',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open( {
title: 'Insert Link',
url: '/admin/pages/add_link',
onsubmit: function( e ) {
// Insert content when the window form is submitted
// editor.insertContent( '' + editor.selection.getContent() + '' );
console.log( e.data );
}
});
}
});
});
The page that is being loaded inside the window is :
<div>
<select name="link_type" class="link_type" style="margin-top: 20px;">
<option value="none">No Link</option>
<option value="other-page">Other Page</option>
<option value="external-link">External Link</option>
</select>
</div>
<div>
<select name="link" class="resource-link" style="display: none;">
<?php foreach( $pages as $page ) : ?>
<option value="<?= $page->id ?>" data-url="<?= $page->url ?>">
<?= $page->title ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div>
<input type="text" name="link" class="resource-link" value="http://" style="display: none;">
</div>
<div>
<button type="submit" class="btn btn-primary">Add Link</button>
</div>
What code would I have to run to send the link values through to the onsubmit call?
In the docs they use the WindowManager to create the page but I can't find much information about how to create different elements.
Thanks in advance
Old question, but still relevant.
Here's how I did it. I'm using tinymce v4.
I am finding the popup/iframe in jQuery, but it could easily be done in vanilla JS.
I created my JS plugin, included it externally in my init section
tinymce.init({
selector: "textarea.tinymce",
external_plugins: { 'myplugin': 'url-to-my-plugin' }
});
Plugin:
tinymce.PluginManager.add('myplugin', function(editor, url) {
// Adds a menu item to the tools menu
editor.addMenuItem('myplugin', {
id: 'myPluginId',
text: 'My Plugin Menu Title',
context: 'insert',
onclick: function() {
editor.windowManager.open({
title: 'Title Of My Plugin',
url: 'myplugin.html',
//we create the submit buttons here instead of in our HTML page
buttons: [{
text: 'Submit',
onclick: 'submit'
}, {
text: 'Cancel',
onclick: 'close'
}],
width: 500,
height: 325,
onsubmit: function(e) {
//find the popup, get the iframe contents and find the HTML form in the iFrame
form = $('#myPluginId iframe').contents().find('form');
//once you have the form, you can do whatever you like with the data from here
}
});
}
});
});

using a JS blur to bring focus to a div

Sorry I'm just getting into JS functions but we have a search box on our page and when the call is made (i think its using ajax) it populates the search data into the div. We used to use jquery live search.
Within the search query we have a number of link which have a class, this class relates to a jquery modal. The older version used to work using a blur function. I am trying to port the functionality over to the new search.
What we used to have...
The jquery search:
<form method="post" action="<? echo constructurl($platform_name,"https") ?>/process/feedbackcreateuser" enctype="multipart/form-data" class="form-right">
<input name="q" type="text" placeholder="Enter your idea or feedback ... " name="title..." style="width:100%; " value="<? echo $captchamessage ?>">
<div id="jquery-live-search" style="display:none;"></div>
<script src="<? echo $asset_url ?>/3rdparty/feedback/jquery.liveSearch.js"></script>
<script>
jQuery('input[name="q"]').liveSearch({url: '<? echo constructurl($platform_name,"https")?>/process/searchfeedbackuser/?c=<? echo $id ?>&q='});
</script>
</form>
The JS that made it work:
<script type="text/javascript"> <!-- this allows search results to have same js functions -->
$(document).ready(function() {
$("input[name='q']").blur(function() {
$("div#jquery-live-search [rel='clickover']").clickover({ html : true} );
$("div#jquery-live-search input, div#jquery-live-search textarea").placeholder();
$("div#jquery-live-search .dialog-iframe-card").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
$("div#jquery-live-search .dialog-iframe-report").dialog2IFrame( {
height:900,
closeOnOverlayClick: false,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
});
});
</script>
What we have now ...
the JS search (not jQuery anymore)
<script type="text/javascript">
$(document).ready(function() {
$('#form form').submit(function(){
$('#content').load('<? echo constructurl($platform_name,"https")?>/process/searchfeedback/?c=<? echo $id ?>', { 'q': $('input[name="query"]').val()}).slideDown('500')
return false;
});
});
$(function(){
$('form').each(function () {
var thisform = $(this);
thisform.prepend(thisform.find('button.default').clone().css({
position: 'absolute',
left: '-999px',
top: '-999px',
height: 0,
width: 0
}));
});
});
</script>
<div id="form">
<form class="form">
<div class="input-group" style="margin-bottom:10px">
<input type="text" name="query" placeholder="Enter your idea or feedback ... " class="feedback-search validate[required] form-control search-main" >
<span class="input-group-btn">
<input type="submit" name="submit" value="Go!" class="btn btn-search">
</span>
</div>
</div></form>
<form method="post" action="<? echo constructurl($platform_name,"https") ?>/process/feedbackcreate" enctype="multipart/form-data" class="form" class="form-right">
</form>
<div id="content">
</div>
I have been trying something similar with no luck.
<script type="text/javascript"> <!-- this allows search results to have same js functions -->
$(document).ready(function() {
$("#form").blur(function() {
$("div#content [rel='clickover']").clickover({ html : true} );
$("div#content input, div#jquery-live-search textarea").placeholder();
$("div#content .dialog-iframe-card").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
$("div#content .dialog-iframe-report").dialog2IFrame( {
height:900,
closeOnOverlayClick: false,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
});
});
</script>
You HTML has problems:
It doesn't appear that you have closed out your <form class="form"> tag at all before beginning a new one. So you have nested forms and that can't happen, so you should fix that first, since $('form').each(function () { isn't gonna do anything for you most likely. Not entirely sure why you would prepend a cloned button into the form with a width=0 and height=0 and no where on the page. Kinda seems awkward doing that. Why not use the same button to begin with? Why make a clone of it?
Also, you haven't added a semi-colon at the end of this line here:
$('#content').load('<? echo constructurl($platform_name,"https")?>/process/searchfeedback/?c=<? echo $id ?>', { 'q': $('input[name="query"]').val()}).slideDown('500')
which will give a syntax error.
You should turn javascript error reporting on in your browser to be able to see all of your jQuery/javascript errors and correct these errors one by one. After you do that, it might even fix itself.
Also, be sure to load jQuery, since you are still using it in your coding... Here's a good CDN for jQuery to use:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
I couldn't figure this one out so I just popped the working JS call into the dynamic content's page, and it worked!

Categories