CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
Ravi
Ravi

Reputation: 2464

Jquery reload current tab

I use Jquery 1.4.2. Below is the code that uses tabs.

   <div id="tabs">
      <ul>
          <li><a href="#unit"><span>Unit Information</span></a></li>
          <li><a href="#documents"><span>Documents</span></a></li>
          <li><a href="#x"><span>x</span></a></li>
          <li><a href="#y"><span>y</span></a></li>
      </ul>
      <div id="unit"></div>
      <div id="documents">
         <input type="button" id="add_file" onclick="add_file()" />
         <table>
           <tr>
             <td>ID</td>
             <td>File Name</td>
           </tr>
         </table>
      </div>
      <div id="x"></div>
      <div id="y"></div>
    </div>

When I run the command

$('#tabs').tabs('option','selected')

it correctly shows the tabIndex.

But 

$('#tabs').tabs('load',1)

does not seem to work at all. It is not reloading the tab content.

Is this a Jquery version problem?

Upvotes: 1

Views: 2542

Answers (1)

cssyphus
cssyphus

Reputation: 40038

If I understand your question, it is not the jQuery version that is the problem. With all due respect, your design is incorrect. However, since you are using version 1.4.2 of jQuery, you should be aware that you must use jQueryUI 1.8.24 or less. Therefore:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
</head>


Back to your question. Since you are uploading a file, then you are POSTing the file (probably via a form, or better yet AJAX) to another PHP file. Javascript won't have a chance to show it.

What will work (and for everything to happen/display the way you want) is to add the document using AJAX. You can do it manually, or I can recommend one of these plugins:

Just to prove my point, though, in the following example I emulated "adding a file" using js/jQ. As you can see in the demo, the new data appears just fine.

jsFiddle demo

$('#add_file').click(function() {
    $('#documents').find('table').append('<tr><td>002</td><td>another_file.doc</td></tr>');
});

See these SO posts for some simple examples of how AJAX works:

Please upvote any posts that you find helpful.

Below is a code example of what you want to do. The example works, but I am disappointed to see not with your versions of jQuery/jQueryUI sadly. Please try the example (copy/paste code into a .PHP document on your web server) with the current version and then again with the 1.4.2/1.8.24 versions -- current version works fine. (You can switch between versions easily by uncommenting/comment the obvious tags in the head) If nothing else, perhaps you can use this working example as a starting point, at the least.

Note that I did not do anything on the back end to receive/process the uploaded file. I had to cut the example somewhere, so did not write the back-end processing files. But here is a link where you can see an example: http://hayageek.com/ajax-file-upload-jquery/ (scroll down to section "Server Side")

**Fully Working Example: Just copy/paste into PHP doc on your server **

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

<!--
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css" />
-->

    <link href="//cdn.jsdelivr.net/jquery.uploadfile/2.0.7/css/uploadfile.css" rel="stylesheet">
    <script src="//cdn.jsdelivr.net/jquery.uploadfile/2.0.7/js/jquery.uploadfile.min.js"></script>


    <link rel="stylesheet" href="//getbootstrap.com/dist/css/bootstrap.min.css" />
    <script src="//getbootstrap.com/dist/js/bootstrap.js"></script>

        <style>
            *, body {font-size:12px;}
            table, th, td, tr {border-collapse:collapse;border:1px solid lightgrey;}
            th {background:lightgrey;border:1px solid grey;}
            td {height:25px;}
            th.id {width:30px;}
            th.fn {width:125px;}
            #add_file{margin-bottom:15px;}
            .fn {width:200px;height:30px;padding:5px;}
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                var cnt = 2;

                $('#tabs').tabs();
                $('#add_file').button(); //for visual appearance only
                $('#dox').click(); //auto-open the Documents tab for convenience

                //init dialog box
                $('#addbox').dialog({
                    autoOpen:false,
                    title: "Add File:"
                }); //END #addbox.dialog


                $('#add_file').click(function() {
                    //Invisibly upload your file to the server
                    var uploadObj = $("#fileuploader").uploadFile({
                        url: "name_of_php_file_that_receives_your_uploaded_doc.php",
                        method: "POST",
                        allowedTypes:"xls,doc,pdf",
                        fileName: "myfile",
                        multiple: false,
                        autoSubmit: true,
                        showStatusAfterSuccess:false,
                        onSuccess:function(files,data,xhr) {
                            upfilename = $('.ajax-file-upload-filename').html();
                            upfilename = upfilename.split(' ')[1];
                            upfilename = upfilename.split('<')[0];
                            $('#documents').find('table').append('<tr><td>00'+cnt+'</td><td>' +upfilename+ '</td></tr>');
                            $('#addbox').html('');
                            $('#addbox').dialog('destroy');

                            //Add filename and any other data to your MySQL database
                            $.ajax({
                                type:'POST',
                                url: 'your_functions_file_on_server.php',
                                data:'func_name=insert_file_into_db&upfilename=' + upfilename
                            });
                        },
                    });

                    //Open dialog box to display the Add File controls. Although appearing to come
                    //AFTER the #addbox.destroy code, this happens first. The "Upload" button that
                    //launches the entire process is actually in your jQUI #addbox dialog, which 
                    //gets opened NOW... As soon as that button is pressed, the ^above^ code runs.
                    $('#addbox').dialog('open');
                }); //END #addfile.click


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="tabs">
        <ul>
            <li><a href="#unit"><span>Unit Information</span></a></li>
            <li><a href="#documents" id="dox"><span>Documents</span></a></li>
            <li><a href="#x"><span>x</span></a></li>
            <li><a href="#y"><span>y</span></a></li>
        </ul>
        <div id="unit"></div>
        <div id="documents">
            <input type="button" id="add_file" value="Add File" />
            <table>
                <tr>
                    <th class="id">ID</th>
                    <th class="fn">File Name</th>
                </tr>
                <tr>
                    <td>001</td>
                    <td>myfile.doc</td>
                </tr>
            </table>
        </div>
        <div id="x"></div>
        <div id="y"></div>
    </div>
    <div id="addbox">
        <div id="fileuploader"></div>
    </div>

</body>
</html>

Upvotes: 1

Related Questions