The code:
post_page.js:
Template.postPage.events({
// Updating a post
'submit form': function(e) {
e.preventDefault();
var post = {
title: $(e.target).find('[name=title]').val(),
content: $(e.target).find('[name=content]').val()
};
Posts.update(this._id, {$set: post});
},
'click .move-up': function(e) {
// Moving up a post
e.preventDefault();
var prevPost = Posts.findOne({position: this.position - 1});
if (prevPost) {
Posts.update(prevPost._id, {$set: {position: prevPost.position + 1}});
Posts.update(this._id, {$set: {position: this.position - 1}});
}
},
(...)
Template.postPage.rendered = function() {
// Plugin to turn the text area into a contenteditable div
var editor;
$(function() {
editor = new Simditor({
textarea: $("#input-content"),
placeholder: "...",
pasteImage: true,
toolbar: ["title", "bold", "italic", "underline", "link", "image", "indent", "outdent"],
upload: {
url: "/upload"
}
});
post_page.html:
<template name="postPage">
<div class="posts">
<div class="post">
<div class="post-content">
<span>title: {{title}}, position: {{position}}</span>
<a class="move-up" href="javascript:;">Move Up</a>
<a class="move-down" href="javascript:;">Move Down</a>
See Post
<a class="save-file" href="javascript:;">Save Post</a>
</div>
</div>
</div>
<form class="form" role="form">
<div class="form-group">
<label for="exampleInputEmail1">Title</label>
<input name="title" type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email" value="{{title}}">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Content</label>
<textarea name="content" class="form-control" rows="3">{{content}}</textarea>
</div>
<button type="submit" class="btn btn-default submit">Submit</button> </form> </template>
Is a single page app and everything works but for some reason the content of the contenteditable div disappears if I move up a post that isn't the one currently being displayed (the content in textarea remains and it comes back if I re-render the page):
What could be causing this? How to fix it?
Moving the post up/down causes the template to re-render completely and I suspect that because the simditor expects the DOM to persist, it either doesn't re-run on rendered or runs before Meteor's preserve-inputs package has repopulated the textarea.
You can try to work around the problem (until Meteor gets the Blaze templating engine up) by wrapping your re-rendering sensitive area (at least the textarea and possibly the complete DOM generated by simditor) in {{#constant}}. If you know the exact DOM elements you want to preserve, then you can also use preserve to prevent them from being re-rendered.
Related
I have implemented two ACE editors on my single page. The first editor:
$('#custom_css').val(custom_css_editor.getSession().getValue());
returns all the codes I've typed, but unfortunately the other editor:
$('#custom_script').val(custom_js_editor.getSession().getValue());
returns only one line. What do you think is the cause of such glitch?
Here's what I want to show up:
Here are the codes I have:
var custom_css_editor = ace.edit("custom_css_editor", {
theme: "ace/theme/twilight",
mode: "ace/mode/css",
maxLines: 10
});
var custom_js_editor = ace.edit("custom_js_editor", {
theme: "ace/theme/twilight",
mode: "ace/mode/javascript",
maxLines: 10
});
document.querySelector('#custom_css_editor .ace_text-input')
.setAttribute('name', 'custom_css');
document.querySelector('#custom_css_editor .ace_text-input')
.setAttribute('id', 'custom_css');
document.querySelector('#custom_js_editor .ace_text-input')
.setAttribute('name', 'custom_script');
document.querySelector('#custom_js_editor .ace_text-input')
.setAttribute('id', 'custom_script');
custom_css_editor.session.on('change', function() {
$('#custom_css').val(custom_css_editor.getValue());
});
$('#custom_css').val(custom_css_editor.session.getValue());
custom_js_editor.getSession().on('change', function() {
$('#custom_script').val(custom_js_editor.getValue());
});
$('#custom_script').val(custom_js_editor.session.getValue());
<div class="form-group">
<label class="lbl-input" for="custom_css">Custom CSS</label>
<div id="custom_css_editor"></div>
</div>
<div class="form-group">
<label class="lbl-input" for="custom_script">Custom Scripts</label>
<div id="custom_js_editor"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js"></script>
This happens because you are modifying the value of textarea .ace_text-input. Changing dom inside editor usually breaks it.
Okay, i have to add <input type="hidden" id="custom_css" value="" /> and custom_script" value="" /> to render the full content of css and js editors, magic it worked!
I'm using Colorbox.js for the first time and am having issues with placing a newsletter signup inside of the popup. I am assigning colorbox to my element .newsletter-popup and it is working correctly, however as mentioned the <form> within does not work. I have tested the form and it works correctly when not loading via colorbox?
Also, in the source code of my page I can see some automatically generated colorbox code #cboxOverlay and #colorbox, why do these appear when I've already assigned colorbox to my own element? I'm also not able to set options for colorbox on my element, as they don't work. Have a got this setup incorrectly?
Working Example (Appears after 3 seconds): http://development.ozonecoffee.co.uk/our-journal/
JS
setTimeout(function(){
jQuery('.newsletter-popup').colorbox({
trapFocus: false,
closeButton: true,
onComplete: function(){ $("#email").focus(); }
});
}, 3000);
// Close button
$( ".close-popup" ).click(function() {
$.colorbox.remove();
});
HTML
<div class="newsletter-popup">
<div class="modal">
<div class="close-popup"><span>X</span></div>
<div class="container">
<h4>Title</h4>
<form class="mailing-list-signup" id="subscribe-form" action="http://ozonecoffee.us14.list-manage.com/subscribe/post-json?u=93b92e23751a1d94fe6e57dc9&id=3caae1521b" method="get">
<input id="email" type="email" placeholder="Sign up for our newsletter" value="" name="EMAIL" >
<input type="submit" value="Sign up" name="subscribe" >
</form>
</div>
</div>
</div>
I was getting a "Failed to execute 'insertBefore' on 'Node'" error after clicking a link to another page:
<template name="reminderPage">
New!
{{>reminder}}
<!-- Random comment -->
</template>
<template name="reminder" class="reminder">
<p>Hello reminder</p>
{{>editForm}}
</template>
<template name="editForm">
<div id="dialog-form" title="Edit Reminder">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="taskf-name">Name</label>
<input type="text" name="taskf-name" id="taskf-name" maxlength="20">
<label>Bought</label>
<input type="text" name="taskf-bought" id="taskf-bought">
<label>Expire</label>
<input type="text" name="taskf-expire" id="taskf-expire">
</fieldset>
</form>
</div>
</template>
Apparently, that little comment was interfering with the code because after I deleted it, everything worked perfectly.
While problem was fixed, I would really like to know how could this line be getting in the way of the code.
Does anyone know why? I was using Meteor with Iron-Router.
Thank you!
EDIT
If it helps, I am using Jquery-UI and this was my javascript file
Template.reminder.rendered = function () {
$( "#dialog-form" ).dialog({
autoOpen: false,
modal: true,
open: function () {
},
buttons: [
{
id: "button-ok",
text: "Save",
click: function() {
$(this).dialog("close");
}
},
{
id: "button-cancel",
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}
]
});
}
The "newRemind" page just has the most basic dialog, and it's js file just initiates it.
<template name="newRemindPage">
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</template>
Javascript:
Template.newRemindPage.rendered = function () {
$( "#dialog" ).dialog();
};
Per Spacebars documentation on comments:
{{! Comments can be one line}}
{{!
Or they can be
multi-line
}}
{{!-- They can also be written like this --}}
Please post your updated code if it doesn't work after trying this.
Using i18next, how can I translate JQuery Mobile widgets? Specifically, I'd like to know how to do that without resorting to using data-i18n-target to modify generated inner elements, because that is brittle since future widget versions may change the generated code.
Is there a specific page lifecycle event I can subscribe to in order to be able to have i18next modify the DOM before the widget transformation happens?
In this example (see jsfiddle), some markup is correctly translated, but homeBtn and submitBtn are not:
HTML:
<div id="home_page" data-role="page">
<div data-role="header">
<a id="homeBtn" href="/" data-icon="home" data-i18n>app.home</a>
<h2 data-i18n>app.title</h2>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput1" data-i18n>app.label</label>
<input type="text" name="textinput1" id="textinput1" value=""></input>
</div>
<form action="">
<input id="submitBtn" type="submit" data-i18n="[value]app.button" />
</form>
</div>
<div data-role="footer">
<center>
<p data-i18n>app.footer</p>
</center>
</div>
</div>
JavaScript:
var i18nOpts = {
resStore: {
dev: {
translation: {
app: {
button: 'Button',
home: 'Home',
label: 'Label',
footer: 'Footer',
title: 'i18n Test'
}
}
},
}
};
i18n.init(i18nOpts).done(function() {
$("html").i18n();
});
jQuery Mobile widgets are auto-initialized (Markup enhancement) on two events, pagebeforecreate and pagecreate. The majority of widgets are initialized once pagecreate occurs.
All you need is to wrap i18n code in pagebeforecreate.
$(document).on("pagebeforecreate", function () {
// code
});
Demo
I am in the middle of implementing a feature.
objective :
to have a popover form with ajax request .
bootstrap popover
NOTE : previously i tried to achive the same with the bootstrap editables
but due to the fact that I don't want data(entered in popover) to be shown on page . (which editables are for) .
So ,
with current method (jsfiddle)
ISSUE :
when I am clicking on the popover to enter data inside the from popover disappears.
i am searching for a jquery fix . ( something with event propagation will do )
my code :
<div class="box-icon" >
<div class="popover-markup">
<i class="icon-plus-sign"></i>
<div class="head hide">Enter Email<i class="icon-remove" style="margin-left: 120px;"></i></div>
<div class="content hide">
<input type="text" placeholder="Type email address">
<button type="submit" class="btn">Submit</button>
</div>
<div class="footer hide">test</div>
</div>
</div>
and my scripts are :
$( document ).ready(function() {
$('.popover-markup > .trigger').popover({
html : true,
title: function() {
return $(this).parent().find('.head').html();
},
content: function() {
return $(this).parent().find('.content').html();
}
});
// Attach click handler to document
$(document).bind('click', function (e) {
$(".popover-markup").popover('hide');
});
// Dont hide when I click anything inside #container
$('.popover-markup').bind('click', function(e) {
e.stopPropagation();
});
});