1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

“jQuery EasyUI” tab panel

Discussion in 'Programming' started by anarchos78, Nov 3, 2011.

0
  1. #1
    Hello,

    I am new in the whole JQuery/Javascript stuff. I have a question concerning
    “jQuery EasyUI” tab panel:

    I want to load .html content ('demo.html' 'demo1.html' see the code below) into a dynamically created tab but I don’t want to load it into a iframe. I want to load it into the tab panel body(var content = '<div title="" closable="true" style="padding:20px;display:block;">';). The reason is that iframe doesn’t stretches with the content. How can I do that?
    The code I use is:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
    function addTab(title, url){
    if ($('#tt').tabs('exists', title)){
    $('#tt').tabs('select', title);
    } else {
    var content = '<iframe frameborder="0" src="'+url+'" style="width:100%; height:100%;" ></iframe>';
    // add a new tab panel
    $('#tt').tabs('add',{
    title:title,
    content:content,
    closable:true

    });

    }
    }
    </script>
    </head>

    <body>

    <a href="#" class="easyui-linkbutton" onclick="addTab('demo','demo.html')">demo</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('demo1','demo1.html')">demo1</a>

    <div id="tt" class="easyui-tabs" style="width:600px; margin:0px auto;">
    <div title="Tab1" closable="true" style="padding:20px;display:block;">

    </div>
    <div title="Tab2" closable="true" style="padding:20px;display:block;">
    </div>

    <div title="Tab3" closable="true" style="padding:20px;display:block;">
    </div>
    </div>


    </body>
    </html>
    Thank you in advance
     
    anarchos78, Nov 3, 2011 IP
  2. proactiv3

    proactiv3 Peon

    Messages:
    55
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    0
    #2
    Get the content via AJAX request and append it to the div?

    var myContent = $.('http://myurl.com/demo1.html', {}, function(data){
    $('#tt').tabs('add', {
           title: title,
           content: myContent,
           closable: true
    });
});
    Code (markup):
     
    proactiv3, Nov 5, 2011 IP
  3. anarchos78

    anarchos78 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hello,
    First of all thank you for showing interest into my post. You have understood correct. Yes I want to load via Ajax content into the tabs. Notice that tabs are created dynamically (<a href="#" class="easyui-linkbutton" onclick="addTab('demo','demo.html')">demo</a>). The two things that I need to get help are:
    > Load content (see the code for the demo.html and demo1.html after the body tag-into the link tag).
    >Load content via Ajax from a database. If you explain me the whole mechanism it would be better for me to understand. One last thing: can you suggest me a book list (for beginners) for Ajax and Javascript? Thank you in advance, Tom Greece
     
    anarchos78, Nov 5, 2011 IP
  4. proactiv3

    proactiv3 Peon

    Messages:
    55
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    0
    #4
    Here, take a look: codetidy.com/1402/

    When using javascript, you should try to work with events. This enables you to clearly separate what is content (HTML) and what is an action or behavior.

    Anyway, directly answering your questions:

    > The tough answer would be that in order to do an asynchronous request, you'd should take a look to the XMLHttpRequest object (w3schools.com/xml/xml_http.asp).

    jQuery offers a layer of abstraction to these kind of things (although if you're really interested in learning JS, you should take a look at them before you start using jQuery). This takes me to the simple answer - an AJAX request using jQuery can be done through the $.ajax() function or it's alias $.get() and $.post().

    To explain this in detail would be time consuming and lead to a very large post. Take a look at the jQuery documentation for further details - api.jquery.com/jQuery.ajax/.


    > Understand the concept of the client side portion of your application (in which the Javascript code resides) and what's on the server side (where the database access/retrieval is made).

    What AJAX enables you is to fetch a page without necessarily having to "refresh" your browser. To retrieve something from the database, you simply point a page to the AJAX request where the database interaction occurs and then process the information via Javascript.

    Again this would be a very large topic in order for me to cover it here. Take a look at this example: w3schools.com/php/php_ajax_database.asp - it should help you to get on the right track.


    > As for reading material, this would be the path I'd recommend:

    1. "Pure" javascript, no frameworks. This one is a good investment (and it serves as a reference book further down the line): shop.oreilly.com/product/9780596101992.do
    2. Then move on to Javascript: The Good Parts. Simply put and in my modest opinion, the best book on the subject (although it's not "novice friendly" at all).
    3. Finally if you're in to it, go with jQuery, mooTools or whatever works for you. These frameworks are time savers and release the programmer of a lot of stuff.

    Good luck!
     
    proactiv3, Nov 5, 2011 IP