4 Надежных выпадающих меню в SQL, ajax и PHP (все готово на моем бесплатном wix-сайте) - PullRequest
Новая
       6

4 Надежных выпадающих меню в SQL, ajax и PHP (все готово на моем бесплатном wix-сайте)

0 голосов
/ 01 ноября 2019

Мне уже удалось выполнить то, что я хочу с Wix. Я загрузил базу данных, с которой хотел поработать, и позаимствовал несколько патчей кодов из разных мест в Google и установил свое видение в коде Wix. Код работает безупречно, извлекает и заполняет раскрывающееся меню друг от друга. Как вы знаете, клиенты жесткие, и в основном они не хотят Wix. Они хотят сайт с нуля, то есть php, ajax, jquery, html и всю красоту, которая приходит с ним. Прошло уже несколько лет с тех пор, как я коснулся всего этого, но мне удалось найти шаблон (за который я заплачу после того, как я закончу), и теперь я пытаюсь найти способ написать то, что я сделал наwix - в php, ajax, jquery и т. д. Теперь я нашел пару хороших видео, которые делают это, но все они работают с 2 или 3 примерами баз данных, когда я работаю только с 1, большим 1. Я хотел бы получить некоторую помощьпо этому вопросу, чтобы я мог закончить эту работу.

Вот фрагмент моего кода в wix (он должен быть действительно простым для чтения и понимания, поскольку здесь нет ничего сложного): 

import wixData from 'wix-data';

$w.onReady(function () {
$w("#dropdown1").placeholder = "Please choose";
$w("#dropdown2").placeholder = "Please choose";
$w("#dropdown3").placeholder = "Please choose";
$w("#dropdown4").placeholder = "Please choose";
getUniqueListFromDatabase();
$w("#dropdown1").enable();

});

async function getUniqueListFromDatabase() {

const List1 = await wixData.query("db1")
     //limiting to 1000 because wix can't work more than 1000 records per once.
    .limit(1000)

    .ascending("field1")

    .find()

const List2 = await wixData.query("Updated_Database")

    .limit(1000)

    .skip(1000)

    .ascending("field1")

    .find()

     const List3 = await wixData.query("Updated_Database")

    .limit(1000)

    .skip(2000)

    .ascending("field1")

    .find()

//adding everything together
const mergedLists = List1.items.concat(List2.items).concat(List3.items);

const uniqueItems = getUniqueTitles(mergedLists);

//populating the dropdown
$w("#dropdown1").options = buildOptions(uniqueItems);

function getUniqueTitles(items) {

    const titlesOnly = items.map(item => item.field1);

    return [...new Set(titlesOnly)];

}

function buildOptions(uniqueList) {

    return uniqueList.map(curr => {

        return { label: curr, value: curr };

    });

}

}

export function dropdown1_change(event, $w) {
//Add your code for this event here: 
$w("#dropdown4").value = "";
$w("#dropdown3").value = "";
$w("#dropdown2").value = "";
$w("#text11").hide("fade");
getUniqueListFromDatabase2();
$w("#dropdown2").enable();

 }

и есть 4 функции, подобные этой, которые делают одно и то же только для разных выпадающих меню. В основном, я хочу все это в php, ajax, mysql и jquery.

Я просто не очень хорошо говорю с php и ajax, чтобы все работало на веб-сайте "с нуля". Я был бы признателен за любую помощь, так как я устал от этого проекта и хотел бы завершить его как можно скорее.

Большое вам спасибо!

РЕДАКТИРОВАНИЕ:

Это код из примера, который я нашел уместным для моей причины:

Javascript 

<script>
$(document).ready(function(){
$('#country').on('change', function(){
    var countryID = $(this).val();
    if(countryID){
        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'country_id='+countryID,
            success:function(html){
                $('#state').html(html);
                $('#city').html('<option value="">Select state first</option>'); 
            }
        }); 
    }else{
        $('#state').html('<option value="">Select country first</option>');
        $('#city').html('<option value="">Select state first</option>'); 
    }
});

$('#state').on('change', function(){
    var stateID = $(this).val();
    if(stateID){
        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'state_id='+stateID,
            success:function(html){
                $('#city').html(html);
            }
        }); 
    }else{
        $('#city').html('<option value="">Select state first</option>'); 
    }
});
});
</script>

PHP 

<?php 
// Include the database config file 
include_once 'dbConfig.php'; 

if(!empty($_POST["country_id"])){ 
// Fetch state data based on the specific country 
$query = "SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC"; 
$result = $db->query($query); 

// Generate HTML of state options list 
if($result->num_rows > 0){ 
    echo '<option value="">Select State</option>'; 
    while($row = $result->fetch_assoc()){  
        echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>'; 
    } 
}else{ 
    echo '<option value="">State not available</option>'; 
} 
}elseif(!empty($_POST["state_id"])){ 
// Fetch city data based on the specific state 
$query = "SELECT * FROM cities WHERE state_id = ".$_POST['state_id']." AND       status = 1 ORDER BY city_name ASC"; 
$result = $db->query($query); 

// Generate HTML of city options list 
if($result->num_rows > 0){ 
    echo '<option value="">Select city</option>'; 
    while($row = $result->fetch_assoc()){  
        echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>'; 
    } 
}else{ 
    echo '<option value="">City not available</option>'; 
} 
} 
?>

HTML 

<form action="" method="post">
<!-- Country dropdown -->
<select id="country" name="country">
    <option value="">Select Country</option>
</select>

<!-- State dropdown -->
<select id="state" name="state">
    <option value="">Select state</option>
</select>

<!-- City dropdown -->
<select id="city" name="city">
    <option value="">Select city</option>
</select>

<input type="submit" name="submit" value="Submit"/>
</form>

The table that I am working on

Я работаю со следующей таблицей. Вы можете видеть здесь, что у меня есть 2 столбца. Бренды и Размер. На данный момент, чтобы начать, позже будет более 8 столбцов, но я буду работать только с 4 из них, как в Wix.

Мой код:

Javascript 

<script>
$(document).ready(function(){
$('#brand').on('change', function(){
    var brand = $(this).val();
    if(brand){
        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'brand='+brand,
            success:function(html){
                $('#size').html(html);
            }
        }); 
    }else{
        $('#size').html('<option value="">Select brand first</option>');
    }
});

$('#size').on('change', function(){
    var size = $(this).val();
    if(size){
        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'size='+size,
        }); 
    }
 });
});
</script>

PHP 

<?php 
// Include the database config file 
include_once 'config.php'; 

if(!empty($_POST["brand"])){ 
// Fetch state data based on the specific country 
$query = "SELECT * FROM wiperbrands WHERE brand = ".$_POST['brand']."  ORDER BY brand ASC"; 
$result = $db->query($query); 

// Generate HTML of state options list 
if($result->num_rows > 0){ 
    echo '<option value="">Select size</option>'; 
    while($row = $result->fetch_assoc()){  
        echo '<option value="'.$row['size'].'">'.$row['size'].'</option>'; 
    } 
 }else{ 
    echo '<option value="">Size not available</option>'; 
 } 
}

?>

HTML 

<form action="" method="post">
<!-- Country dropdown -->
<select id="brand" name="brand">
    <option value="">Select brand</option>
</select>

<!-- State dropdown -->
<select id="size" name="size">
    <option value="">Select size</option>
</select>

<input type="submit" name="submit" value="Submit"/>
<?php 
if(isset($_POST['submit'])){ 
 echo 'Selected Country ID: '.$_POST['brand']; 
 echo 'Selected State ID: '.$_POST['size']; 
} 
?>
</form>

Моя текущая цель - извлечь бренд из таблицы и представить все бренды пользователю в первом выпадающем меню. Конечно, без дубликатов. Затем во втором выпадающем меню у пользователя будет возможность выбрать размер. Важное примечание: размеры зависят от марки, которую выбрал пользователь.

После достижения этой цели я не вижу проблем в добавлении 2 других надежных раскрывающихся меню, исправьте меня, если яя не прав.

...