Empty newlines not show up on preview using parsedown and codeigniter - codeigniter

I am using parsedown and codeigniter. On my textarea if I have added a few empty lines they do not show up in preview. It only adds one \n in preview box
As shown in this image Note: preview is the bottom box in image
As you can see in the top box which is a textarea. There is a large gap just before the last line. It does not show that in preview? If I try and replace the newlines with br or nlbr it effects the indented code on parsedown
Question using codeigniter and parsedown how can I make sure when I
echo it from controller that the will show same ammount of lines.
Script
<script type="text/javascript">
$( document ).ready(function() {
$('#editor').on('paste cut mouseup mousedown mouseout keydown keyup', function(){
var postData = {
'html' : $('#editor').val(),
};
$.ajax({
type: "POST",
url: "<?php echo base_url('example/preview');?>",
data: postData,
dataType: 'json',
success: function(json){
$('#output').html(json['output']);
}
});
});
});
</script>
Controller
<?php
class Example extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->library('parsedown');
}
public function index()
{
$this->load->view('example_view');
}
public function preview() {
$data['success'] = false;
$data['output'] = '';
if ($this->input->post('html')) {
$data['success'] = true;
// Using br or nlbr effect the code indents so can not use it.
$data['output'] = str_replace('\n', '<br/>', $this->parsedown->text($this->input->post('html')));
}
echo json_encode($data);
}

You need to use double break tags to create a blank line.
ie
Something on this line
<br><br>
This line has a blank line above it.
You can work out what is needed for more than one blank line.
Have a play in http://parsedown.org/demo to test it.

Related

CKEditor not editable in IE11 after ajax call

Example:
Jsfiddle
If the page is loaded the first time, the CKEditor is working right and the value of the editor can be edited. After hitting the button "ajax" which is calling the following function (cursor must be in the editor field):
function ajax_call() {
var html = "<textarea id=\"textarea\"><p>test 1</p><p>test 2</p><p>test 3</p></textarea><script type='text/javascript'>jQuery(document).ready(function() { ckEditor('textarea'); });<\/script>";
$.post("/echo/html/", { html: html }, function(data){
jQuery('#target').html(data);
});
}
it isn't possible to click on the text in IE11 to edit the value. Clicking beyond the text or left of it enabels the editor again.
Looks like creation of new textarea after CKEDITOR is initiated brakes editor in IE. Though i just tried to set data directly on instance of CKEDITOR and it worked fine,rather than creating new textarea tag.
function ajax_call() {
var html = "<p>test 4</p><p>test 5</p><p>test 6</p>";
$.post("/echo/html/", { html: html }, function(data){
//jQuery('#target').html(data); <-- Removed from original
CKEDITOR.instances['textarea'].setData(data)// <-- Added
});
}
function ckEditor(id) {
CKEDITOR.replace(id, {
language : 'de',
});
}
jQuery(document).ready(function() {
ckEditor('textarea');
});
Here is working example:
http://jsfiddle.net/2wq86gqs/15/

Packery not arranging additional divs when loaded via AJAX

I am using packery to arrange blog posts in a masonry format. This works fine for posts that are initially displayed on the page but when I load new posts - when the pagination links are clicked - via AJAX the posts just get added to the container but do no 'repack' or re-arrange in a masonry format.
I am using WordPress and using my own AJAX call, see code below:
// For jQuery noConflict
(function($) {
$(document).ready(function() {
// Find out the page number
var pageNumber;
$('.custom-pagination a.page-numbers').click(function() {
pageNumber = $(this).html();
});
// AJAX call to load more posts when pagination links are clicked
$(document).on( 'click', '.custom-pagination a.page-numbers', function( event ) {
event.preventDefault();
page = pageNumber;
$.ajax({
url: ajaxpagination.ajaxurl,
type: 'post',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function( html ) {
var $container = $('#all-posts').packery();
$container.append( html );
$container.packery( 'appended', html );
}
});
});
});
})(jQuery);
// End jQuery noConflict
Can anyone point me in the right direction on how to call packery again to re-arrange my posts in a masonry format after they are loaded via AJAX?
Thanks.
I had the same issue, and took care of it server-side (web2py/python), in accordance with the instructions here:
# this function is called via ajax
def function_that_loads_the_new_content():
...
new_divs = #generate new content
new_divs_as_string = ''.join([str(x) for x in new_divs])
# this script runs when the new content is appended to the container
update_results = \
"var $items = $('%s');$pack.append($items).packery( 'appended', $items );" \
% new_divs_as_string
return update_results
The idea is to use packery's appending functionality after the new elements have been added to the container element. The above script is essentially equivalent to this template offered in the packery page:
$('.append-button').on( 'click', function() {
// create new item elements
var $items = $('<div class="grid-item">...</div>');
// append items to grid
$grid.append( $items )
// add and lay out newly appended items
.packery( 'appended', $items );
});

Can I call a jScript function from url or when an image changes?

I'm using the free Securimage package for captcha validation in my signup form.
I'm using jScript / AJAX / PHP to check the code while the user types it, and output "incorrect" or "correct" next to the input box and giving it a red border if it's left empty or incorrect.
The issue here is: if the user first enter the correct key, then for some reason clicks the "select another image" url the key will change but the input box will not change and therefore not be validated and this might confuse the user to think that the right key is entered when it has actually changed and should be re-entered.
The check captcha function is invoked when something is typed in the captcha input box (keyup) or when done typing (blur). The code looks something like this:
$(document).ready(function()
{
var chckcaptcha = function()
{
var captcha = encodeURIComponent($("#captcha").val());
$.ajax(
{
type: "POST",
url: "lib_ajax/somescript.php",
data: "captcha="+ captcha,
success: function(msg_captcha)
{
$("#status_captcha").ajaxComplete(function(event, request, settings)
{
// ... some validation code here
});
}
});
}
$("#captcha").bind('keyup',chckcaptcha)
$("#captcha").blur(chckcaptcha);
});
The image:
<img src="/lib_class/securimage/securimage_show.php" alt="CAPTCHA Image" name="captcha_img" width="100%" height="100" id="captcha_img" />
The refresh url:
refresh image
I need a way to invoke the check captcha function in the jScript when that url is clicked, or when the new image is created. I have absolutely no clue on how to do this.
I have already tried (among many other things) to add this to the jScript:
$("#captcha_img").change(chckcaptcha);
But that didn't help. Any tips to a solution would be much appreciated!
The above answer didn't work but gave me an idea to a solution. This worked for me...
Function:
function refreshImage()
{
// New image
document.getElementById('captcha_img').src =
'/lib_class/securimage/securimage_show.php?' + Math.random();
// New validation
chckcaptcha();
}
Refresh link:
refresh image
You can define the chckcaptcha function and the function that refreshes the image outside the document ready handler, and then call them in succession when the image is refreshed?
refresh image
...
function chckcaptcha()
{
var captcha = encodeURIComponent($("#captcha").val());
$.ajax(
{
type: "POST",
url: "lib_ajax/somescript.php",
data: "captcha="+ captcha,
success: function(msg_captcha)
{
$("#status_captcha").ajaxComplete(function(event, request, settings)
{
// ... some validation code here
});
}
});
}
$(document).ready(function()
{
$("#refresh-link").click(function() {
document.getElementById('captcha_img').src = '/lib_class/securimage/securimage_show.php?' + Math.random();
chckcaptcha();
});
$("#captcha").bind('keyup',chckcaptcha);
$("#captcha").blur(chckcaptcha);
});

Ajax URL # isn't updating

I have a little problem with my script here. For some reason, it doesn't enable the #-tags and I don't know why. I created this javascript using the help of this tutorial. (The loading of the pages works well with no problems at all.)
Could someone please look it over and tell me why it doesn't work?
var default_content="";
$(document).ready(function(){ //executed after the page has loaded
checkURL(); //check if the URL has a reference to a page and load it
$('ul li a').click(function (e){ //traverse through all our navigation links..
checkURL(this.hash); //.. and assign them a new onclick event, using their own hash as a parameter (#page1 for example)
});
setInterval("checkURL()",250); //check for a change in the URL every 250 ms to detect if the history buttons have been used
});
var lasturl=""; //here we store the current URL hash
function checkURL(hash)
{
if(!hash) hash=window.location.hash; //if no parameter is provided, use the hash value from the current address
if(hash != lasturl) // if the hash value has changed
{
lasturl=hash; //update the current hash
loadPage(hash); // and load the new page
}
}
function loadPage(url) //the function that loads pages via AJAX
{
// Instead of stripping off #page, only
// strip off the # to use the rest of the URL
url=url.replace('#','');
$('#loading').css('visibility','visible'); //show the rotating gif animation
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0) //if no errors
{
$('#content').html(msg); //load the returned html into pageContet
} $('#loading').css('visibility','hidden');//and hide the rotating gif
}
});
}
You can simplify this immensely by adding a function to listen to the hashchange event, like this:
$(window).on("hashchange", function() {
loadPage(window.location.hash);
});
This way you don't need to deal with timers or overriding click events on anchors.
You also don't need to keep track of lasthash since the hashchange even will only fire when the hash changes.

How to resolve jQuery conflict

I have a few lines of jQuery codes that load external pages when the links are clicked.
$(document).ready(function() {
$(".link").click(function (e) {
e.preventDefault();
var $urlToLoad = $(this).attr('href');
$("#loadarea").load($urlToLoad, function(data){
$("#loading").fadeIn('fast').fadeOut('fast');
$("#loadarea").hide().fadeIn('slow');
return false;
});
});
});
This works fine. However, when I add this one single line of additional code, which is essential on this page, "$ is undefined" error shows up.
I've tried every single technique at http://api.jquery.com/jQuery.noConflict/ but, I can't resolve the conflict.
function goto(id, t){
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#slide a').removeClass('active');
$(t).addClass('active');
}
I've tried var jq=jQuery.noConflict(); to replace $ but this doesn't solve the problem.
I guess I do not understand enough of jQuery to resolve this conflict and I would really appreciate anyone who can explain what is going on so that I can learn from this.
So all together, it looks like this:
<script>
$(document).ready(function() {
$(".link").click(function (e) {
e.preventDefault();
var $urlToLoad = $(this).attr('href');
$("#loadarea").load($urlToLoad, function(data){
$("#loading").fadeIn('fast').fadeOut('fast');
$("#loadarea").hide().fadeIn('slow');
return false;
});
});
});
function goto(id, t){
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#slide a').removeClass('active');
$(t).addClass('active');
}
</script>
Then I have one inline code to fire the script.
(a class="active" href="#" onClick="goto('#kr', this); return false">test
Strange thing is, that even with the error, it fires on second click.
/////////////////////////////////////
The conflict/error was resolved by converting the inline javascript.
Thanks to Huangism below.
I would just rewrite the anchor from
<a class="active" href="#" onClick="goto('#kr', this); return false">test</a>
To
<a class="active" href="#kr">test</a>
For the jquery
$('.active').on('click', function() {
var $this = $(this);
var id = $this.attr('href');
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#slide a').removeClass('active');
$this.addClass('active');
return false;
});
$(document).ready(function() {
});
Should be rewritten as:
jQuery(function($) {
});
That might help you out here.
It's probably to do with the order that you're including your js files in, make sure that jquery is the first loaded file.

Resources