کمال

6 سال پیش توسط کمال مطرح شد

برگرداندن نام با ajax داخل li

سلام دوستان من یک input درست کردم که توش چند حرف قرار میدهم و خودش بصورت ajax میره توی دیتابیس و اسامی شبیه رو پیدا میکنه و برمیگردونه

function findnames() {
        $.ajax({
            url: '<?= $url ?>',
            data: {
                'name': document.getElementById('name').value,
            },
            success: function (json) {
                data = jQuery.parseJSON(json);

                $.each(data, function (key, user) {

                })
            }, error: function () {
                console.log('error');
            }
        });

البته در console.log
من چی بنویسیم که بصورت html بهم خروجی بده
من میخوام بگم به ازای هر اسم یک li درست کن و داخلش قرار بده اسم رو
باید چیکار کنم
مثلا مینویسم

  $.each(data, function (key, user) {
$(li).text(user.name);
                })

ولی فقط یکی رو برمیگردونه نه بیشتر !

ثبت پرسش جدید

کمال

تخصص : برنامه نویس ارشد وب

@kamalj 6 سال پیش مطرح شد

خودم متوجه شدم

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    a{
        display: block;
        padding: 5px 0;
        background: #999999;
        margin: 5px 0;
    }
</style>
<input type="text" placeholder="name" id="name">

{{--<select name="test" id="branchname">--}}
{{----}}
{{--</select>--}}
<ul id="branchname">

</ul>

<?php
$url = url('/names');
?>
<script src="/js/app.js"></script>

</body>
<script>
    $(document).ready(function () {
        var name = $('#name');
        name.keyup(findnames);

        function findnames() {
            if(name.val().length <= 0){
                $('a').remove();
            }
            if(name.val().length > 0) {
                $.ajax({
                    url: '<?= $url ?>',
                    data: {
                        'name': document.getElementById('name').value,
                    },
                    success: function (json) {
                        data = jQuery.parseJSON(json);
                        var branchName = $('#branchname').empty();
                        $.each(data, function (key, user) {
                            $('<a/>', {
                                href:user.id,
                                text: user.name,
                            }).appendTo(branchName);
                        })
                    }, error: function () {
                        console.log('error');
                    }
                });
            }else{
                $('a').remove();
            }
        }
    });
</script>
</html>

الان درست شد

ارسال پاسخ

سیدعلی موسوی

تخصص : سی شارپ و پی اچ پی

@juza66 6 سال پیش آپدیت شد

سلام

شما تویی همون کنترلر li ها رو تویی یه حلقه ایجاد کن و بریز تویی یه متغییر و متغییر رو برگردون سمت ویو و سمت ویو کدهای جی کوئری در success ،دیتا دریافتی رو append کن و بصورت html

$('.bids').append(html)

ارسال پاسخ

کمال

تخصص : برنامه نویس ارشد وب

@kamalj 6 سال پیش آپدیت شد

@juza666

من توی کنترلر کاری نکردم کل کد ها اینه
Route

Route::get('/test','AjaxController@test');
Route::view('/names','names');

controller

  public function test()
    {
        return view('test');
    }

test.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<input type="text" placeholder="name" id="name">

<ul>
    <li></li>
</ul>

<?php
$url = url('/names');
?>
<script src="/js/app.js"></script>
<script>
    $(document).ready(function () {
        var name = $('#name');
        name.keyup(findnames);
    });

    function findnames() {
        $.ajax({
            url: '<?= $url ?>',
            data: {
                'name': document.getElementById('name').value,
            },
            success: function (json) {
                data = jQuery.parseJSON(json);

                $.each(data, function (key, user) {

                })
            }, error: function () {
                console.log('error');
            }
        });
    }
</script>

</body>
</html>

names.blade.php
صفحه ajax

<?php
$name = $_GET['name'];
if(!empty($name)){
    $result = [];
    $users = AppUser::where('name', 'LIKE', '%' . $name . '%')->get();

    if($users){
        foreach($users as $key => $value){

            $result[$key] = $value;

        }
    }

    echo json_encode($result);
}

?>

میشه لطفا دقیقا راهنمایی کنید کجا باید چی بنویسم
من هنوز توی ajax راه نیافتادم!

ارسال پاسخ

کمال

تخصص : برنامه نویس ارشد وب

@kamalj 6 سال پیش مطرح شد

خودم متوجه شدم

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    a{
        display: block;
        padding: 5px 0;
        background: #999999;
        margin: 5px 0;
    }
</style>
<input type="text" placeholder="name" id="name">

{{--<select name="test" id="branchname">--}}
{{----}}
{{--</select>--}}
<ul id="branchname">

</ul>

<?php
$url = url('/names');
?>
<script src="/js/app.js"></script>

</body>
<script>
    $(document).ready(function () {
        var name = $('#name');
        name.keyup(findnames);

        function findnames() {
            if(name.val().length <= 0){
                $('a').remove();
            }
            if(name.val().length > 0) {
                $.ajax({
                    url: '<?= $url ?>',
                    data: {
                        'name': document.getElementById('name').value,
                    },
                    success: function (json) {
                        data = jQuery.parseJSON(json);
                        var branchName = $('#branchname').empty();
                        $.each(data, function (key, user) {
                            $('<a/>', {
                                href:user.id,
                                text: user.name,
                            }).appendTo(branchName);
                        })
                    }, error: function () {
                        console.log('error');
                    }
                });
            }else{
                $('a').remove();
            }
        }
    });
</script>
</html>

الان درست شد

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

برگرداندن نام با ajax داخل li

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید