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

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 🙂

check username availability on keypress using jquery

Tags

ajax, availability, jquery, keypress, keyup, validation

Username or email availability or any other types of availability check we can do in this way. When user type on a text box an ajax request has made and check what if its available or not.  we only required jquery.js

HTML CODE:

<input name="username" type="text" id="username" />
<label id="user_msg" style="color:#CC0000;"></label>

Javascirpt:

$(document).ready(function() {

		var timeOut = null;	// this used for hold few seconds to made ajax request

		var loading_html = '<img src="ajax-loader.gif" />'; // just an loading image or we can put any texts here

		//when button is clicked
		$('#username').keyup(function(e){

			// when press the following key we need not to make any ajax request, you can customize it with your own way
			switch(e.keyCode)
			{
				//case 8:   //backspace
				case 9:		//tab
				case 13:	//enter
				case 16:	//shift
				case 17:	//ctrl
				case 18:	//alt
				case 19:	//pause/break
				case 20:	//caps lock
				case 27:	//escape
				case 33:	//page up
				case 34:	//page down
				case 35:	//end
				case 36:	//home
				case 37:	//left arrow
				case 38:	//up arrow
				case 39:	//right arrow
				case 40:	//down arrow
				case 45:	//insert
				//case 46: 	//delete
					return;
			}
			if (timeOut != null)
			    clearTimeout(ajaxCallTimeoutID);
			timeOut = setTimeout(is_available, 1000);  // delay delay ajax request for 1000 milliseconds
			$('#user_msg').html(loading_html); // adding the loading text or image
		});
  });
function is_available(){
	//get the username
	var username = $('#username').val();

	//make the ajax request to check is username available or not
	$.post("availability.php", { username: username },
	function(result)
	{
		if(result != 0)
		{
			$('#user_msg').html('Not Available');
		}
		else
		{
			$('#user_msg').html('<span style="color:#006600;">Available</span>');
		}
	});

}

PHP: Put your way to searching, you can make any array search or you can check it from database or flat file. I check it from database here is the code

<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('db_name');
$username = mysql_real_escape_string($_POST['username']);
$result = mysql_query('select username from user_table where username = "'. $username .'"');
$cnt = mysql_num_rows($result);
print($cnt);
?>

Its work with me very well 🙂

cross-domain ajax request

Tags

ajax request, cross domain, external domain ajax

When we trying to create the variable assignment, we make an ajax request and pass the URL to get the response and create the variable assignment. Ajax requests are bound to same domain as the webpage. If we are on http://www.abcd.com we’ll get an error if we try to make an Ajax request to http://www.someotherdomain.com.

I’ve faced the same problem but I’ve done it very simple way.

I’ve used the prototype js for ajax calling, and two pages ‘mypage.php’, ajax_response.php’

mypage.php

<span style="color:#008000;">&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="prototype.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
var url = "ajax_req.php";
new Ajax.Request(url, {method: 'post',parameters: '',
onSuccess: function(data){
document.getElementById('ajax_response').innerHTML = data.responseText;
}
});
&lt;/script&gt;
&lt;div id="ajax_response"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</span>

ajax_response.php

<span style="color:#008000;">&lt;?php
// you can request an xml file, parse the xml file and print the elements
$url = "http://www.google.com/search?hl=en&amp;q=javascript&amp;btnG=Search";
$string = file_get_contents($url);
// you can apply regular expression here for parsing
echo $string
?&gt;</span>

When ‘mypage.php’ run automatically called the an ajax request then it called the ajax_response.php page, the file_get_contents(‘url’) function will return any external web page. we can do here anything whaterver we want.

I’ve already used it and worked very well.