Ask A Question

Notifications

You’re not receiving notifications from this thread.

simple mde duplicates

TG asked in Javascript

hi,
i followed your tutorial but still simple mde is been diplicated
am using rails 5

var simplemde;

simplemde = null;

$(document).on('ready turbolinks:before-visit', function() {
  if (simplemde != null) {
    simplemde.toTextArea();
    return simplemde = null;
  }
});

$(document).on('ready turbolinks:load', function() {
  return simplemde = new SimpleMDE({
    element: $("#textarea2")[0],
    showIcons: ["code", "table"]
  });
});
Reply

You've added "ready" to the event listeners which I did not have. Remove those so that it matches mine and your code will work.

You don't want to use the "ready" event for Turbolinks because that will cause your code to run twice on the first page load. Just use the Turbolinks events like I showed and you'll be fine.

Reply

i have removed thr ready but still the turbolinks duplicates the teaxtarea when i go forward and backward

var simplemde;

simplemde = null;

$(document).on('turbolinks:before-visit', function() {
  if (simplemde != null) {
    simplemde.toTextArea();
    return simplemde = null;
  }
});

$(document).on('turbolinks:load', function() {
  return simplemde = new SimpleMDE({
    element: $("#textarea2")[0],
    showIcons: ["code", "table"]
  });
});

Reply

I have the same issue

simplemde = null

$(document).on 'turbolinks:before-visit', ->
  if simplemde?
      simplemde.toTextArea()
        simplemde = null

$(document).on 'turbolinks:load', ->
  simplemde = new SimpleMDE(
      element: $('.simplemde')[0]
        spellChecker: false
    )

See my screenshot

Reply

For reference, here's what I'm using on GoRails. It's in Coffeescript and requires jQuery.

simplemde = null

cleanupSimpleMDE = ->
  # Clean up if already exists
  if simplemde?
    simplemde.toTextArea()
    simplemde = null

$(window).on 'popstate', cleanupSimpleMDE
$(document).on 'turbolinks:before-visit', cleanupSimpleMDE

$(document).on 'turbolinks:load', ->
  $mde = $(".simplemde")
  if $mde.length > 0
    simplemde = new SimpleMDE({
      element: $mde[0]
      toolbar: ["bold", "italic", "heading", "|", "code", "quote", "unordered-list", "ordered-list", "clean-block", "|", "link", "image", "|", "preview", "side-by-side", "fullscreen", "guide"],
      spellChecker: false
    })
Reply

@Chris After spending almost half a day on searching why the bug was still occuring even if I tried your code, I finally found the solution from this answer on StackOverflow, as I was also getting this error on firebug

jquery-ujs has already been loaded!

When I moved javascript_include_tag from the footer inside <head> the error and the bug was gone!

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 78,890+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2023 GoRails, LLC. All rights reserved.