SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax into same page

    Dear All,
    I have tab when I press will call a javascript and in that I call it like this. The problem now the whole page get refresh. The tabTest1.php is the same page not another page. How can I pass the value without refreshing the page.

    Code:
    if(tabID=="driverDetails")
    	{
    		var Result = 55;
        location.href="tabTest1.php?Result=" + Result;
    
    		document.getElementById("driverDetails").className = "show"; 
    		document.getElementById("driverLicenses").className = "hide";

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Legend,
    I have modified it to like this but is still not working as how I want it to be.

    if(tabID=="driverDetails")
    {
    differentiator=Math.floor(Math.random()*50000);

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {

    }
    }
    xmlhttp.open("GET","tabTest1.php?dL=true&d="+differentiator,true);
    xmlhttp.send();





    document.getElementById("driverDetails").className = "show";
    document.getElementById("driverLicenses").className = "hide";


    }

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    See how this goes for you

    Code JavaScript:
    if (tabID == 'driverDetails') {
        var differentiator = Math.floor(Math.random() * 50000);
     
        if (window.XMLHttpRequest) { // IE 7+, Firefox, Chrome, Opera, Safari
            var xmlhttp = new XMLHttpRequest();
        } else { // IE 5&6
            var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
     
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById('driverDetails').className = 'show';
                document.getElementById('driverLicenses').className = 'hide';
            } else {
                alert('An error has occurred while trying to connect to the server!\n\nStatus Code: ' + xmlhttp.status);
            }
        }
     
        xmlhttp.open('GET', 'tabTest1.php?dL=true&d=' + differentiator, true);
        xmlhttp.send(null);
    }

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Legend,
    I have put my page at this link http://183.78.169.54/v3/tabTest1.php. It gives me error of connection. Thus if you notice when I press either one of the bottom tab(Driver Details or Driver Licenses) I want to pass the true value so that the top tabs will be selected (Either Driver List or Driver Profile)

    <?php
    session_start();
    require_once('config.php');
    $searchcm=$_POST['searchcm'];
    $formType="Add";
    $submitTag="Add";

    $driverList=$_GET['dL'];
    $driverProfile=$_GET['dP'];
    $driverNextOfKin='';

    require "KoolTabs/kooltabs.php";

    //Step 2: Create kooltabs object.
    $kts = new KoolTabs("kts");

    //Step 3: Set properties for kooltabs
    $kts->styleFolder = "KoolTabs/styles/silver";

    //Step 4: Add tabs for KoolTabs: addTab($parentid,$id,$text,$link)
    $kts->addTab("root","home","Driver List","tabTest1.php",$driverList);
    $kts->addTab("root","home","Driver Profile","tabTest1.php",$driverProfile);


    //Step 2: Create kooltabs object.
    $kts2 = new KoolTabs("kts");

    //Step 3: Set properties for kooltabs
    $kts2->styleFolder = "KoolTabs/styles/silver";

    //Step 4: Add tabs for KoolTabs: addTab($parentid,$id,$text,$link)
    $kts2->addTab("root","Driver Details","Driver Details","javascript:showTab(\"driverDetails\")",$driverDetails);
    $kts2->addTab("root","Driver Licenses","Driver Licenses","javascript:showTab(\"driverLicenses\")",$driverLicenses);
    //$kts2->addTab("root","Driver Next of Kin","Driver Next of Kin","javascript:showTab(\"driverNextOfKin\")",$driverNextOfKin);

    //require_once('tabList1.php');
    ?>

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="my1.css" media="all">

    <script type="text/javascript">


    window.onload = function () {


    document.getElementById("driverDetails").className = "show";
    document.getElementById("driverLicenses").className = "hide";

    };
    </script>
    <script type="text/javascript">
    function showTab(_id)
    {

    var tabID=_id;

    if (tabID == 'driverDetails')
    {
    var differentiator = Math.floor(Math.random() * 50000);
    if (window.XMLHttpRequest) {
    // IE 7+, Firefox, Chrome, Opera, Safari
    var xmlhttp = new XMLHttpRequest();
    }
    else
    { // IE 5&6
    var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange = function()
    {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
    document.getElementById('driverDetails').className = 'show';
    document.getElementById('driverLicenses').className = 'hide';
    }
    else
    {
    alert('An error has occurred while trying to connect to the server!\n\nStatus Code: ' + xmlhttp.status);
    }
    }
    xmlhttp.open('GET', 'tabTest1.php?dL=true&d=' + differentiator, true);
    xmlhttp.send(null);
    }
    else if(tabID=="driverLicenses")
    {
    var differentiator = Math.floor(Math.random() * 50000);
    if (window.XMLHttpRequest) {
    // IE 7+, Firefox, Chrome, Opera, Safari
    var xmlhttp = new XMLHttpRequest();
    }
    else
    { // IE 5&6
    var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange = function()
    {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
    document.getElementById('driverDetails').className = 'hide';
    document.getElementById('driverLicenses').className = 'show';
    }
    else
    {
    alert('An error has occurred while trying to connect to the server!\n\nStatus Code: ' + xmlhttp.status);
    }
    }
    xmlhttp.open('GET', 'tabTest1.php?dP=true&d=' + differentiator, true);
    xmlhttp.send(null);

    }
    } </script>
    </head>

    <body>
    <?
    echo $kts->Render();
    echo $kts2->Render();
    ?>
    <form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 onSubmit="return validateForm();">
    <div id="driverDetails" class="show" style="position:relative" >
    DD
    </div>
    <div id="driverLicenses" class="hide" style="position:relative" >
    DK
    </div>
    </form>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •