• About Sarwar
  • Portfolio
  • আমার বাংলা

sarwar's weblogs

~ story of web applications…..

sarwar's weblogs

Category Archives: ckeditor

jquery UI tab – ajax loading CKEDITOR in a tab and some issues

28 Thursday Jul 2011

Posted by Sarwar in Ajax, CakePHP, ckeditor, jQuery UI, PHP

≈ 42 Comments

Tags

ajax, ckeditor, Jquery UI, PHP


I tried to load CKEDITOR in a jquery tab via ajax. I got problem that only first time the ckeditor is working but when I click on other tab and again got o ckeditor tab its not working. in Load section for tab I put the following code.

load: function(event, ui) {
  if(ui.index == 3){ // Checked tab no 4
    var instance = CKEDITOR.instances['reditor']; // reditor is text area id, check if instances exists for readitor or not 
    if(instance){ 
       CKEDITOR.remove(instance); //if existed then remove it
    }
    CKEDITOR.replace( 'reditor' ); // Create instance for 'reditor'
 }
}

in this way we can get rid the problem of “CKEditor instance already exists”

Here is whole configuration

$(document).ready(function () {
           var $tabs = $("#tabs").tabs({ 
                                
                                alignment: "top",
                                spinner : false,
                                ajaxOptions: {
                                    error: function( xhr, status, index, anchor ) {
                                                    $( anchor.hash ).html( "Couldn't load this tab. Please try again.");
                                                },
                                    complete: function(){
                                        
                                        
                                    }
                                    
                                },
                                load: function(event, ui) {
                                    if(ui.index == 3){
                                        var instance = CKEDITOR.instances['reditor'];
                                        if(instance){
                                            CKEDITOR.remove(instance);
                                        }
                                    }
                                },
                                select: function(e, ui){
                                            $(ui.panel).html('<img src="img/ajax_loader.gif" />'); // Loader after click on each tab
                                        }
                                
                                });
           $tabs.tabs('select', <?=$tab_no?>); // used for selected default tab
           
        });
        

Here is HTML/PHP (I used cakephp syntax for url ) used “TEXT” in a link to show the loading text on tab otherwise it will not show the loading tabl

<div id="tabs">
    <ul>
        <li>
            <?=$html->link("<span>Information</span>", array("controller" => "listings", "action" => "information", $id), array("escape" => false, "title" => "Information"))?>
            
        </li>
        <li>
            <?=$html->link("<span>Detail</span>", array("controller" => "listings", "action" => "detail", $id), array("escape" => false))?>
        </li>
        <li>
            <?=$html->link("<span>Peoples</span>", array("controller" => "listing", "action" => "peoples", $id), array("escape" => false))?>
        </li>
        <li>
            <?=$html->link("<span>Enhance</span>", array("controller" => "listings", "action" => "enhance", $id), array("escape" => false))?>
       </li>
    </ul>
 </div>

In this way I did and it work for me 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

Author

  • Sarwar

Categories

  • .htaccess
  • Apache
  • API
  • CSS
  • Debug
  • Framework
    • CakePHP
  • HTML
  • JavaScript
    • Ajax
    • ckeditor
    • jquery
    • jQuery UI
    • tinymce
  • Joomla
    • Virtumart
  • Linux
  • MySQL
  • PHP
  • SVN
  • Twitter
  • WHM/cPanel
View Sarwar Hossain's profile on LinkedIn
Follow bdsarwar on Twitter

Tweets

  • “Running a small business without a plan is a lot like driving without directions.” — @GoldmanSachs via @appexchange    4 years ago
  • RT @TechCrunch: 5K people turn up to catch Pokémon in Chicago tcrn.ch/2aaLRys https://t.co/VVQSd7nmN4    4 years ago
  • linkedin.com/slink?code=eZ2… @ibneha, @mdthanvirahmed, @shafi_aszad, @ashrafulkauser, @digitalstatusbd, @eternolimited, @mamunha34354847    4 years ago
  • linkedin.com/slink?code=eYt… @html50, @bdwasif, @81faabfaa6f34a8, @saimonsajid, @voipworldcalls, @sarwar31945, @tomamuns    4 years ago
  • linkedin.com/slink?code=ewd… @ataharhh, @shariful51, @akhtar_h, @litetechno, @tahsin_wsit, @noormd25522880, @abmukid11    4 years ago
  • linkedin.com/slink?code=ewA… @solamanraji, @mycomplain, @washimk118_s, @audacity_it_ltd, @jibonbikash, @salimshalimm784, @mukul_politeboy    4 years ago

Flickr Photos

From Helipad ViewAbove the CloudHillNear to SkySunset Moment#sunset #beach #ocean #coxsbazar#jamroll #food #deliciousfood #homemade  #homemadefood#seaside #ocean #oceanview #travelphotography #coxsbazar #bayofbengal #travel #longestbeach#beach #lifeguard #seaside #holiday #tour #longestbeach #travel #travelphotography #coxsbazar #bayofbengal#resort #mountains
More Photos

Archives

  • February 2012 (1)
  • January 2012 (2)
  • August 2011 (1)
  • July 2011 (1)
  • June 2011 (2)
  • May 2011 (2)
  • April 2011 (1)
  • March 2011 (3)
  • December 2010 (3)
  • November 2010 (1)
  • October 2010 (4)
  • September 2010 (1)
  • June 2010 (1)
  • May 2010 (2)
  • April 2010 (1)
  • March 2010 (1)
  • January 2010 (2)
  • July 2009 (1)
  • January 2009 (1)
  • August 2008 (1)

Recent Comments

  • SolkAgoks on quick setup of Auth Component for CakePHP 2.0
  • Kush on how to cakephp in a sub-directory, access it from root using .htaccess
  • CharlesLaula on Drag and Drop dashboard using jquery and save state of each change
  • ror on set & reset form text value onfocus, onblur, onclick using javascript
  • Mr Griever on Access session data in a model -cakephp
  • RSS - Posts
  • RSS - Comments

Meta

  • Register
  • Log in
  • Entries feed
  • Comments feed
  • WordPress.com

Create a free website or blog at WordPress.com.

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
<span>%d</span> bloggers like this: