header parallax image
uncoditional

code liberated

  • Home
  • Pete
  • Home
  • Pete
ckEditorJQuery and CSS

jQuery Dialog not playing well with ckeditor

July 25, 2014Peter Lombardo3509 views

So in updating our web app to use jquery dialogs with ajax-obtained content, two key problems came up.  Either, ckeditor took over the popup window and wouldn’t allow you to edit other text fields; OR after an open/close of a dialog box, the next  open event on another dialog box would close almost immediately.

So, after some digging, two solutions came up.

  1. Per the last post on this bug report the solution (mostly to the second problem) was to use jqueryUI version 1.9.1.  simple as that.  1.10.x caused the auto close problem.
  2.  Per this rather cryptic note on solving the problem, my co-worker wrote me this: 

    maybe you can rewrite the javascript so instead of

    1.) create form for question in the div

    2.) show div via jquery.dialog();

    you can do

    1.) show div via jquery.dialog()

    2.) once it’s shown, create the form.

    So that was it.  Here’s the working code snippet :

    $("#surveyJqDialog").dialog({
    	width: 700,
    	modal: true,
    	//must do it this way else conflicts between dialog and ckeditor
    	open: function(){
    		qTextEditor = CKEDITOR.replace('questionText');
    	},
    	close: function(){
    		qTextEditor.destroy();
    	}
    });
    
  • tweet
previous story

Ellipse for Select list in mobile format

next story

com.amazonaws.ClientConfiguration Errors

Peter Lombardo

Peter Lombardo

Web developer too long.

you might also like

com.amazonaws.ClientConfiguration Errors

September 18, 2014

Ellipse for Select list in mobile format

July 2, 2014

Simply position the top of the jquery dialog box

July 1, 2014

Leave a Response Cancel reply

You must be logged in to post a comment.

about me

uncoditional

Pete Lombardo

I like people and coding. Both change. Twenty years of full-stack development. I live in Maryland.

Recent Posts

  •   lives on!
    									
  • Cannot find module ‘…/…’ or its corresponding type declarations.
  • *ngIf – use parentheses
  • Angular component code block execution order
  • material dialog- how to get response data .subscribe()

Recent Comments

    Archives

    • June 2022
    • March 2022
    • June 2020
    • June 2019
    • November 2017
    • October 2017
    • September 2017
    • August 2017
    • June 2017
    • June 2015
    • May 2015
    • April 2015
    • October 2014
    • September 2014
    • July 2014
    • June 2014
    • May 2013
    • February 2013
    • January 2013
    • November 2012
    • October 2012

    Categories

    • angular
    • AWS
    • before the code
    • Browser Support
    • CFML & Mach-II
    • Chromebook
    • ckEditor
    • CloudSearch
    • ColdFusion
    • Java
    • javascript/typescript
    • JQuery and CSS
    • Languages
    • Life
    • material design
    • project
    • Projects
    • SNS
    • SQL
    • Tools
    • Uncategorized
    • unCODitional

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org
    0
    Followers
    0
    Followers
    0
    Followers
    0
    Followers

    Follow @ Instagram

    Configuration error or no pictures...