0

I have a tabbed menu on my page, the first tab is a data input form and the rest are datatables which colate the information.

<div class="tile" id="tile-1">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <div class="slider"></div>
        <li class="nav-item adddetails-button">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="fas fa-plus-square"></i> Add details</a>
        </li>
        <li class="nav-item Datatablea-button">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="fas fa-folder"></i> Datatable A</a>
        </li>
        <li class="nav-item Datatableb-button">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"><i class="fas fa-truck-moving"></i> Datatable B</a>
        </li>
        <li class="nav-item Datatablec-button">
            <a class="nav-link" id="setting-tab" data-toggle="tab" href="#setting" role="tab" aria-controls="setting" aria-selected="false"><i class="fas fa-address-card"></i> Datatable C</a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="adddetails tab-pane show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <h2>Add Job</h2>
            <form id="dataForm" name="dataform" method="POST" action="/">
                /**form details**/
            </form>
        </div>
        <div class="Datatablea tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <table>
                /**Datatable A**/
            </table>
        </div>
        <div class="Datatableb tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <table>
                /**Datatable B**/
            </table>
        </div>
        <div class="Datatablec tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <table>
                /**Datatable C**/
            </table>
        </div>
    </div>
</div>

I have a dropdown menu in my add details input form which allows me to select a company from the companies table (to prevent duplicate entries)

<select id='clients' name='clients' class='limitedNumbChosen add-company' multiple='false'>
    <?php
        $sql = "SELECT * FROM `datatbasea`";
        $query = mysqli_query($conn, $sql);
        if (mysqli_num_rows($query) > 0) {
            // output data of each row
            while($result = mysqli_fetch_assoc($query)) {
                $company_name = $result['company'];
                echo "<option value='$company_name'>$company_name</option>";
            }
        } else { 
            echo "0 results";
        }
        mysqli_close($conn);
    ?>
</select>
<div id="add-company" class="fas fa-plus"> Add Company </div>

Also, at the bottom there is an option to add company.

What I want is:

If someone adds a a new company to the databse via the add company form... for the new company to then be pulled from the database table and automatically added to the select drop down without having to refresh the page.

I will be looking to use a similar solution to the one given to also update datatables on the page without refresh

The add company code is:

JS

    jQuery(document).ready(function () {
    $("#sbmt").click(function(e) {
        e.preventDefault();
        e.stopPropagation();

        var company_name = document.getElementById("addcompany_name").value;
        var contact_one = document.getElementById("addcontact_one").value;
        var contact_two = document.getElementById("addcontact_two").value;
        var company_phone = document.getElementById("addcompany_phone").value;
        var company_email = document.getElementById("addcompany_email").value;
        var company_street = document.getElementById("companystreet").value;
        var company_town = document.getElementById("companytown").value;
        var company_postcode = document.getElementById("companypostcode").value;

        // Returns successful data submission message when the entered information is stored in database.
        var DataForm = 'company_name1=' + company_name + '&contact_one1=' + contact_one + '&contact_two1=' + contact_two + '&company_phone1=' + company_phone + '&company_email1=' + company_email + '&company_street1=' + company_street + '&company_town1=' + company_town + '&company_postcode1=' + company_postcode;
        if (company_name == '' || contact_one == '' || company_phone == '' || company_email == '' || company_street == '' || company_town == '' || company_postcode == '') {
        alert("Please Fill All Fields");
        } 
        else {
        // AJAX code to submit form.
            jQuery.ajax({
                type: "POST",
                url: 'wp-content/themes/EazyFreight/databasecompany.php',
                data: DataForm,
                dataType:"json", 
                success:function(strMessage) {
                    $("#message").text(strMessage);
                }
            });
            return false;  
        }
    });
});

Then the PHP to add to the mysql database which the select menu pulls the information from:

<?php

    //Register variables
    $company_name = $_POST['company_name1'];
    $contact_one = $_POST['contact_one1'];
    $contact_two = $_POST['contact_two1'];
    $company_phone = $_POST['company_phone1'];
    $company_email = $_POST['company_email1'];
    $company_street = $_POST['company_street1'];
    $company_town = $_POST['company_town1'];
    $company_postcode = $_POST['company_postcode1'];

    $sql = "INSERT INTO `Company`(`id`, `company`, `contact1`, `contact2`, `phone`, `billingemail`, `street`, `town`, `postcode`)
    VALUES (NULL, '$company_name', '$contact_one', '$contact_two', '$company_phone', '$company_email', '$company_street', '$company_town', '$company_postcode')";

    if (mysqli_query($conn, $sql)) {
        echo "New record created successfully";
    } 
    else {
        echo "Error: " . $sql . "<br>" . mysqli_error($conn);
    }
    mysqli_close($conn);
    die();

essentially, I think I need the select dropdown to be refreshed when the form is submitted without refreshing the full page

PaulMcF87
  • 385
  • 5
  • 18
  • @RyanWilson you will see that my code already did what that question is asking. The select input autopopulates with data from the database.... What I want is for a newly added option from my `add company form` to populate immediately without a page refresh... essentially refreshing only the select input – PaulMcF87 Sep 12 '19 at 08:20
  • Exactly, after you successfully post the item to the database via `ajax`, add it to the drop down with `javascript` (append the new option). – Ryan Wilson Sep 12 '19 at 12:17
  • @RyanWilson yes, that is what is currently happening... the issue is tha tI need to refresh the full page in order for it to update and become accessible in the drop down... my question is how to make it immediately accessible without the need to refresh the page, there is nothing about that in the "duplicate" question – PaulMcF87 Sep 12 '19 at 12:47
  • You don't need to refresh the page, that's what I'm trying to tell you, your `ajax` is sending the form data `async`, this gets placed into your database, then on the `success` callback of your `ajax` post, you append the new option into the drop down, I don't understand why this is not making sense. `success:function(strMessage) { $("#message").text(strMessage); //Append the new option into the dropdown here }` It then becomes available immediately with no page refresh. – Ryan Wilson Sep 12 '19 at 12:50
  • @RyanWilson It is making sence... But the drop down selects the details and then links them back to that specific entry in the database... so rather than appending the field, I need the dropdown to be refreshed to pull the all the data including the newly entered data to the dropdown... I will also be using the same solution to automatically update a datatable on the website which again pulls the information from the database... without sounding cheeky, if I wanted to know how to append I would have asked that but i know how to do it, it is essentially similar to a `
    ` refresh i need
    – PaulMcF87 Sep 12 '19 at 12:58
  • Look at this piece of code: `while($result = mysqli_fetch_assoc($query)) { $company_name = $result['company']; echo ""; }` You are doing nothing but placing each company_name which is pulled from the database into the select using the company name as the value and text of each option. If you do this with the newly added company which is posted as ajax what's the difference? – Ryan Wilson Sep 12 '19 at 13:00
  • @RyanWilson The difference is that at the moment my code is basic but going forward I will be improving on it to offer more functionality... Im not here to argue.. I have asked a question looking for a specific answer. I am assuming that based on your replies you are not sure how to do what I am after. and thats fine. but if i use the append optin now, in the not to distant future I will be back asking the same question – PaulMcF87 Sep 12 '19 at 13:03
  • This is your exact post text: "What I want is: If someone adds a a new company via the add company form... for the new company to be automatically added to the select drop down without having to refresh the page." If this is not what you want, then update your post. – Ryan Wilson Sep 12 '19 at 13:05
  • @RyanWilson I am sorry for any confusion caused. I have updated my question slightly. I am hoping that makes it slightly clearer. I struggle sometimes with wording questions, quite new to the who coding scene – PaulMcF87 Sep 12 '19 at 13:10
  • I think what you are looking for is a way to refresh the table element with your database data which was loaded on the page load, is that correct? If so, perhaps this will help you (https://stackoverflow.com/questions/39764230/reloading-a-datatable-without-refreshing-with-ajax). You can rebuild your HTML table via ajax as well and pull down everything from the DB. – Ryan Wilson Sep 12 '19 at 13:11
  • You would just make this ajax call inside of your `success` callback of your form post. – Ryan Wilson Sep 12 '19 at 13:17
  • @RyanWilson Sorry if IVe seemed like a tough customer. not intended. So the answer given in that would then mean that in my form, I would need to run 2 ajax functions one after the other – PaulMcF87 Sep 12 '19 at 13:17
  • Correct. On `success` of your form post ajax, call another `ajax` to repull your database data for populating the datatable tab. This would then prevent any page refresh and get your desired result, at least I think. :) There are also things called `promises` which can be used to chain `async` calls together (https://stackoverflow.com/questions/16026942/how-do-i-chain-three-asynchronous-calls-using-jquery-promises) – Ryan Wilson Sep 12 '19 at 13:18
  • @RyanWilson one last question... can this be repeated a number of times in one function to update multiple tables? ie. `ajax{....success{ajax{.... success{ajax{...}}}}}` – PaulMcF87 Sep 12 '19 at 13:35
  • Yes. You can chain as many together as you like. I gave you a link to `promises` which are something you might want to learn about, its a nice way of chaining asynchronous calls together. – Ryan Wilson Sep 12 '19 at 13:36
  • @RyanWilson thank you for your help, and sorry again for the rocky start lol – PaulMcF87 Sep 12 '19 at 13:37
  • No worries. I misunderstood what your post was about initially. Hope that I was able to help. I can't remove my vote to close this post myself, so I'll see if I can get a moderator to remove it. – Ryan Wilson Sep 12 '19 at 13:38

0 Answers0