Javascript mess, help for jquery-(PHP/jQuery) Desktop app

First of all, im new here, and im (not) a pro ;) (but i want to... lol). Okay, im starting a little php application to manage my icons (huge) collection... but i realise that i wrote everything in javascript (no jQuery) and my life would by a little more easier if i use jQuery... So now im trying to understand how to do that i i'll need your hints and your patience to help me... (if someday your make a trip in montreal, i'll pay you a coffee :))

So i'll explain my template structure... (see the screenshot---EDIT: new user, not allowed to post images)

((Image explanation))

Left: Div ID=nav its all folder and sub-folder.

A button Create library calling mkdir() JS function

|-IconShock (X) <--to delete folder

|---Vista collection (X)

|-New folder 1 (X)

At the right: Div ID=container...

Contain icons like in windows explorer, showing icon image, onclick on an icon = show_info(url, height, width, size, etc..), update the bottom div id=show_info that show some information on the icon.

Just take a look at the JS, you'll that i need jquery XD (i already started basic js to jquery)

CODE

//When adding a folder (Create Library), deleting folder, etc...
        function refresh_nav() {
          $.ajax({
            type: 'GET',
         url: './nav.php',
            timeout: 10000,
            success: function(data) {
          $("#nav").html(data);
          folder_selected(folder);
            }
          });
        }
//When deleting file, changing folder or view
//filter_display = thumb or details
        function refresh_container(fd, filter_display) {
         folder = fd;
         filter_display = filter_display;
          $.ajax({
            type: 'GET',
            url: './container.php?path='+fd+'&filter_display='+filter_display,
            success: function(data) {
          $("#container").html(data);
            }
          });
        }

//When clicking "Create library" form NAV
    function mkdir() {
     var dir = prompt("New folder's name", 'New folder');
      $.ajax({
        type: 'GET',
     url: './action.php?action=mkdir&file='+dir,
        timeout: 10000,
        success: function(data) {
       refresh_nav();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
       //?
        }
      });
    }


//delete a directory from NAV 
    function deldir(dir) {
     var answer = confirm('You\'re about to delete '+dir+' and all files inside.');
     if (answer){
      $.ajax({
       type: 'GET',
       url: 'action.php?action=delete_dir&file='+dir,
       success: function() {
        refresh_nav();
       }
        });
     }
    }



//When click Edit menu, Convert
//show_icons is a form that have all div inside containing icon images, and a invisible checkbox
//if an icon (we 
    function convert(file) {
     if(file) { 
      var c_value= "";
      var f_value= "";
      var count = "";
      // For each checkbox
      for (var i=0; i < document.show_icons.file_check.length; i++)
      {
       //If its selected
         if (show_icons.elements[i].checked)
         {
          //Put path in variable and add a spliter
         c_value = c_value + document.show_icons.file_check[i].value + "|";
         //Increase counter
         count++;
         }
      }
      for (var i=0; i < document.show_folders.folder_check.length; i++)
      {
       //If its selected
         if (show_folders.elements[i].checked)
         {
          //Put path in variable and add a spliter
         f_value = f_value + document.show_folders.folder_check[i].value + "|";
         //Increase counter
         count++;
         }
      }
      //If no files checked
      if(c_value.length == 0) {
       //If no folder is checked
       if(f_value.length == 0) {
        //Single file convertion
        newmodal('execConvert/?act=convert&file='+file, 'Convert', 500, 400);
       }
      } else {
       //Else multiple file selected
       var file = c_value;
       newmodal('execConvert/?act=convert&multi_file=1&file='+c_value, 'Convert', 500, 400);
      }
      } else {
       alert('No selected item');
      }
    }



    <body onLoad="refresh_nav(); refresh_container('', '<?=$default_container_display?>'); get_info_erease();">

I dont know if im understandable (?) but if not ill be more precise. I just want to know if there is any way i can get every JS above in jQuery. Because its a mess trying to figure everything with want im doing right now without jquery. Or more simple code... for now, i have a little piece of code in a nav.php file, another code in container.php (showing icons) a func_php f开发者_开发问答ile, a core.js file.. its really hard to understand and code i these situation.. lol

if someone here have tutorials for creating php application with jQuery cause i really need to know jquery..

Thanks for reading me guys! ( :) and girls )

And please say me its not a too big mess XD

Have a nice evening!

---

First of all, I am going to a be a wee bit lame-preachy and tell you that I hope you're not planning on making this interface public because you are putting your computer in serious danger of being around you.

With that said, I get that you're having quite a bit of fun with this and are an avid experimenter, so let's see if i'm getting this clear...

1. You have a database structure ( your file system )
2. You have some PHP back-end which interacts with the aforementioned database.
3. This PHP back-end seems to have some sort of REST-ful API structure

4. Another PHP "container" that serves as a template for the interface (and holds the javascript, tsk tsk tsk :P )

   So far, so good. We can overlook the fact that you did'nt put your javascript in separate file until you do so and we shall also overlook that you have that nasty onload statement which you will have to find a way to clean up (hint: $(function(){ // some code }) == $.ready(function(){//some code }) == <body onload="someCode"> ). Going from this, I dont quite see what your problem is, you're on the right path... you have a good-enough web 2.0 compliant MVC structure right there!

jQuery is, IMHO, as other libs, first and foremost a wrapper around javascript to:

• A. simplify general aspects of common web development patterns.
• B. reduce browser deficiencies

Depending on the intended use and restrictions of your current project, You might not need it. Nonetheless, specifically for this project, look into .get() or get serious and jump directly to learning the full $.ajax(). Then for the DOM manipulation, there's the jQuery('#selector') and $('#myDiv').find('.item') which are probably the main things you'll use (jQuery has a special selector syntax which is from the sizzle library ) and then... you'll start to love and it never want to leave it BUT....

Be warned, you still have a long ways to go with pure javascript even though you might not realize it at the moment. Relying on jQuery could eventually turn you into a jQuery-dependent plugin fiend and that would just be sad. Ever hear of document.querySelectorAll() ? The HTML5 File API ?

Dont get me wrong, I am also in Montreal and use jQuery on a daily basis!

---

jQuery's strength is DOM element selection and manipulation whilst not having to worry about browser incompatibilities. But it doesn't give a great deal of assistance to managing Javascript structures; you still need to look after those yourself. Fortuantely, objects and functions in Javascript are pretty powerful all on their own.

On a practical level, have a look at the jQuery Ajax page. The calls you have could easily be done by a simpler call (e.g. $.get()).