jQuery MySQL and PHP help needed

Home Forums Programming jQuery MySQL and PHP help needed

This topic contains 0 replies, has 1 voice, and was last updated by  flexxall 4 years, 6 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #2736

    flexxall
    Participant

    How could i set up a jquery tab page to pull info for each user from a MySQL db and display it on the page .. allowing the user to add new tabs and move items from one tab to another and update the db with the info so when they cam back to the page it is in the same state that they left it. And have this function for each user that interacts with this page individually per there db account id. If you could help with this i would greatly appreciate it.

    Here is what i have started with

    <code><!doctype html>

    <html lang=”en”>

    <head>

    <meta charset=”utf-8″>

    <title>jQuery UI Tabs – Simple manipulation</title>

    <link rel=”stylesheet” href=”../../themes/base/jquery.ui.all.css”>

    <script src=”../../jquery-1.8.3.js”></script>

    <script src=”../../ui/jquery.ui.position.js”></script>

    <script src=”../../ui/jquery.ui.core.js”></script>

    <script src=”../../ui/jquery.ui.widget.js”></script>

    <script src=”../../ui/jquery.ui.mouse.js”></script>

    <script src=”../../ui/jquery.ui.sortable.js”></script>

    <script src=”../../ui/jquery.ui.button.js”></script>

    <script src=”../../ui/jquery.ui.tabs.js”></script>

    <script src=”../../ui/jquery.ui.dialog.js”></script>

    <script src=”../../ui/jquery.ui.droppable.js”></script>

    <link rel=”stylesheet” href=”../demos.css”>

    <style>

    #dialog label, #dialog input { display:block; }

    #dialog label { margin-top: 0.5em; }

    #dialog input, #dialog textarea { width: 95%; }

    #tabs { margin-top: 1em; }

    #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }

    #add_tab { cursor: pointer; }

    #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

    </style>

     

    <script>

    $(function() {

    $( “#sortable1, #sortable2” ).sortable().disableSelection();

     

    var $tabs = $( “#tabs” ).tabs();

     

    var $tab_items = $( “ul:first li”, $tabs ).droppable({

    accept: “.connectedSortable li”,

    hoverClass: “ui-state-hover”,

    drop: function( event, ui ) {

    var $item = $( this );

    var $list = $( $item.find( “a” ).attr( “href” ) )

    .find( “.connectedSortable” );

     

    ui.draggable.hide( “slow”, function() {

    $tabs.tabs( “select”, $tab_items.index( $item ) );

    $( this ).appendTo( $list ).show( “slow” );

    });

    }

    });

    });

    </script>

     

    <script>

    $(function() {

    var tabTitle = $( “#tab_title” ),

    tabContent = $( “#tab_content” ),

    tabTemplate = “<li><a href=’#{href}’>#{label}</a> <span class=’ui-icon ui-icon-close’>Remove Tab</span></li>”,

    tabCounter = 2;

     

    var tabs = $( “#tabs” ).tabs();

     

    // modal dialog init: custom buttons and a “close” callback reseting the form inside

    var dialog = $( “#dialog” ).dialog({

    autoOpen: false,

    modal: true,

    buttons: {

    Add: function() {

    addTab();

    $( this ).dialog( “close” );

    },

    Cancel: function() {

    $( this ).dialog( “close” );

    }

    },

    close: function() {

    form[ 0 ].reset();

    }

    });

     

    // addTab form: calls addTab function on submit and closes the dialog

    var form = dialog.find( “form” ).submit(function( event ) {

    addTab();

    dialog.dialog( “close” );

    event.preventDefault();

    });

     

    // actual addTab function: adds new tab using the input from the form above

    function addTab() {

    var label = tabTitle.val() || “Tab ” + tabCounter,

    id = “tabs-” + tabCounter,

    li = $( tabTemplate.replace( /#\{href\}/g, “#” + id ).replace( /#\{label\}/g, label ) ),

    tabContentHtml = tabContent.val() || “Tab ” + tabCounter;

     

    tabs.find( “.ui-tabs-nav” ).append( li );

    tabs.append( “<div id='” + id + “‘></div>” );

    tabs.tabs( “refresh” );

    tabCounter++;

    }

     

    // addTab button: just opens the dialog

    $( “#add_tab” )

    .button()

    .click(function() {

    dialog.dialog( “open” );

    });

     

    // close icon: removing the tab on click

    $( “#tabs span.ui-icon-close” ).live( “click”, function() {

    var panelId = $( this ).closest( “li” ).remove().attr( “aria-controls” );

    $( “#” + panelId ).remove();

    tabs.tabs( “refresh” );

    });

    });

    </script>

     

    <script>

    $(function() {

    var tabs = $( “#tabs” ).tabs();

    tabs.find( “.ui-tabs-nav” ).sortable({

    axis: “x”,

    stop: function() {

    tabs.tabs( “refresh” );

    }

    });

    });

    </script>

     

    </head>

    <body>

    <div id=”main_container”>

    <div id=”dialog” title=”Tab data”>

    <form>

    <fieldset class=”ui-helper-reset”>

    <label for=”tab_title”>Title</label>

    <input type=”text” name=”tab_title” id=”tab_title” value=”” class=”ui-widget-content ui-corner-all” />

     

    </fieldset>

    </form>

    </div>

     

    <button id=”add_tab”>Add Tab</button>

     

    <div id=”tabs”>

    <ul>

    <li><a href=”#tabs-1″>Main</a></li>

    <li><a href=”#tabs-2″>Tab 2</a></li>

    <!–<li><a href=”#tabs-3″>Tab 3</a></li>  // Additional tabs added to the main–>

    </ul>

    <div id=”tabs-1″>

    <p>Test information.</p>

    </div>

    <div id=”tabs-2″>

    <ul id=”sortable2″ class=”connectedSortable ui-helper-reset”>

    <li class=”ui-state-highlight”>Item 1</li>

    <li class=”ui-state-highlight”>Item 2</li>

    <li class=”ui-state-highlight”>Item 3</li>

    <li class=”ui-state-highlight”>Item 4</li>

    <li class=”ui-state-highlight”>Item 5</li>

    </ul>

    </div>

    </div>

    </div>

    </body>

    </html></code>

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.