اذهب إلى المحتوى
  • 0

تغير اتجاه الـ select box عند الكتابة فى حقل بحث

Our World عالمنا

بواسطة Our World عالمنا

 مشاركة

السؤال

Our World عالمنا عضو نشيط

Our World عالمنا

نشر
نشر

عند الكتابة فى حقل بحث  input type text   يتغير اتجاه الـ  select box  الموجودة فوقه فى نفس الصفحة  ثم تعود للحالة الاولى بمجرد حذف الكلمة المكتوبة..

عند الكتابة في حقل الادخال يتم ارسال كود اجاكس للمعلجة والعودة بنتائج البحث؛ وهذا هو كود الاجاكس: 

 $("#input-search").on("keyup", function() {
  var search = $(this).val();
  var cont = $('.hidden-countryI').val();
  if ($(this).val().length > 0) {
    $.ajax({
      url: "showSearch.php",
      data: {
        sentSearch: search,
        country: cont
      },
      success: function(data) {
        $('.shown').html(data);
      }
    });
  } else {
    $('.shown').html('');
  }
});

 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية

15 أجوبة على هذا السؤال

Recommended Posts

  • 0
Our World عالمنا عضو نشيط

Our World عالمنا

نشر
  • الكاتب
نشر
بتاريخ On 6/17/2022 at 02:32 قال Adnane Kadri:

سؤالك يفتقر الى التفاصيل اكثر، هل يمكنك ارفاق شيفرة ال html أيضا.

هل يمكنك التقاط فيديو قصير او ارفاق مثال عملي عن السلوك الذي يحدث؟

مرفق فيديو قصير..المشكلة اتضحت لى وهى عند ارسال اتصال بالاجاكس يتم تشغيل ملف التنسيقات البديل(لغه انجليزية) فيتغير الاتجاه وتحدث المشكلة

select box & input problem.mp4

بتاريخ On 6/17/2022 at 09:29 قال عمر قره محمد:

حسناً، هل يمكنك مشاركة ملفات الـ html والـ css الخاصة بالـ select box و الـ input حتى نستطيع المساعدة.

ملف HTML 

<!--div with search box -->
<div class="div-search">
    <form  class="form-index" action="search.php" method="GET">
        <?php 
         $stmt=$conn->prepare(" SELECT * from categories ");
         $stmt->execute();
         $cats=$stmt->fetchAll();
         ?>
       <?php  $country=isset($_GET['d']) && is_numeric($_GET['d']) && $_GET['d']<=4 && $_GET['d']>0  ? intval($_GET['d']) : 1;?>
         <!--div search in index-->
        <!--start select box categories-->
         <select class="select-search-Cat" name="category" id="select-cat">
         <option value="0"> <?php echo $lang['allCategories']?> </option>
             <?php
              if (!empty($cats)){
               if($lang['lang']=='ar'){
                     foreach ($cats as  $cat) {
                     echo "<option value='".$cat['cat_id']."'>".$cat['nameAR']."</option>";
                     } 
                }elseif ($lang['lang']=='en') {
                    foreach ($cats as  $cat) {
                     echo "<option value='".$cat['cat_id']."'>".$cat['name']."</option>";
                     } 
                  } }
                ?>
        </select>
        <!--end select box categories-->
        <!--start select box sub-categories-->
         <select class="select-search-Sub" name="subCat" id="select-subcat">
         <option value="0"><?php echo $lang['allSubCats']?></option>

         </select>
         <!--end select box sub-categories-->
         <?php
         $l=isset($_GET['lang'])?$_GET['lang']:'ar';//to translate database words
         
           $stmt2=$conn->prepare(" SELECT state.*,country.* from state
         join country on country.country_id=state.country_id
         where country.country_id=? ");
         $stmt2->execute(array($country));
         $states=$stmt2->fetchAll();
          ?>
        <!--start input hidden & select box states-->
        
        <select class="select-search-State" name="state" id="select-state">
        <option value="0"><?php echo $lang['allstates']?></option>
            <?php if (!empty($states)){ 
            foreach ($states as  $state) {
             echo "<option value='".$state['state_id']."'>".$state['state_nameAR']."</option>";
             }
            }else{ 
             echo "<option>No search results</option>";
            }
            ?>
        </select>   
            <!--start input search & button-->
            <input type="hidden" name="country" value="<?php echo $country ?>">
            <input type="text" name="input-search" id="input-search" autocomplete="off" >
            <button class="btn btn-success btn-search-index" id="btn-search-index"><?php echo $lang['search']?></button>
        <div class="shown"></div>

        <!--end input search & button-->
    </form>
</div><!--end div with  search box-->

ملف تنسيقات  

#input-search,
.select-search-Cat,.select-search-Sub,.select-search-State{
    height: 14vh;
    width: 28.5vw;
    font-family: sans-serif;
    border: 4px solid #21dedb;
    background-color: #f7f9f9;
    font-size: 1.7vw;
    font-weight: 500;
    color: #7e7e7b;
    border-radius: 5px;
}

.select-search-Cat option,.select-search-Sub option,.select-search-State option{
    background: #d0ede4;
}

.select-search-Cat option:hover,.select-search-Sub option:hover,
.select-search-State option:hover{
    background: #2dad85;
}

#input-search{
    height: 12vh;
    width: 68.5vw;
    display: block;
    margin: 11px auto;
    padding-right: 10px;
    font-size: 17px;
}

.select-search-Cat{
     margin-right: 5vw;
     margin-left: 0vw;
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Wael Aljamal عضو نشيط

Wael Aljamal

نشر
نشر
بتاريخ 38 دقائق مضت قال Our World عالمنا:

مرفق فيديو قصير..المشكلة اتضحت لى وهى عند ارسال اتصال بالاجاكس يتم تشغيل ملف التنسيقات البديل(لغه انجليزية) فيتغير الاتجاه وتحدث المشكلة

select box & input problem.mp4

كيف تتعرف على اللغة و تبدل بين التنسيقات؟

حاول ضبط الإتجاه بالشكل التالي: 

success: function(data) {
  $('.shown').html(data);
  $('.shown').attr("dir", "rtl");
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Our World عالمنا عضو نشيط

Our World عالمنا

نشر
  • الكاتب
نشر

 

بتاريخ 18 ساعات قال Wael Aljamal:

كيف تتعرف على اللغة و تبدل بين التنسيقات؟

حاول ضبط الإتجاه بالشكل التالي: 


success: function(data) {
  $('.shown').html(data);
  $('.shown').attr("dir", "rtl");
}

 

يوجد لينك بأعلى الـ navbar بالضغط عليه يتم التبديل بين اللغتين

هذا هو كود التبديل بين اللغتين 

<div>
  <!-- AR | EN  -->
  <a href="?lang=ar">AR</a>
  <a href="?lang=en">EN</a>
</div>

هذه صفحة php  يتم فيها معالجة  $_GET['lang']



<?php
if(isset($_GET['lang'])){
$lang = $_GET['lang'];
$_SESSION['lang'] = $lang;

}elseif(isset($_SESSION['lang'])){
$lang = $_SESSION['lang'];

}else{
$lang = 'ar';
}

switch ($lang) {
case 'en':
$lang_file = 'english.php';
$style_file = 'en.css';
break;

case 'ar':
$lang_file = 'arabic.php';
$style_file = 'ar.css';
break;

default:
$lang_file = 'arabic.php';
$style_file = 'ar.css';

}


include 'include/languages/'.$lang_file;
?>


هذه صفحة الـ header للتبديل بين ملفات التنسيق

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      <?php echo $title;?>
    </title>
    <!-- site logo -->
    <link rel="shortcut icon" href="layout/images/favicon.ico"  />
    <!--bootstrap-->
    <link rel="stylesheet" type="text/css" href="<?php echo $css;?>bootstrap.min.css">
    <!--fontawesome-->
    <link rel="stylesheet" type="text/css" href="<?php echo $css;?>all.min.css">
    <!--css-->
    <link rel="stylesheet" type="text/css" href="layout/css/ar.css">
    <link rel="stylesheet" type="text/css" href="layout/css/<?php echo $lang['lang'];?>.css"><!--echo $lang['en']OR echo $lang['ar']--> 
  </head>
  <body class="body">

 

بتاريخ 1 دقيقة مضت قال Our World عالمنا:

success: function(data) { $('.shown').html(data); $('.shown').attr("dir", "rtl"); }

هذا الحل لم ينجح

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Wael Aljamal عضو نشيط

Wael Aljamal

نشر
نشر
بتاريخ 4 دقائق مضت قال Our World عالمنا:

هذا الحل لم ينجح

لاحظت أن المشكلة عند استلام نتيجة الطلب، لربما تنسيق الرد غير مهيكل بطريقة صحيحة ما يؤدي لوجود وسم مفتوح وغير مغلق، مما يؤدي لأن العناصر التالية تتغير هرمية وراثتها أو يتغير الأب لها، فلا يعود التنسيق يعمل بشكل جيد.

حاول فتح أدوات المطورين بالضغط على F12 ثم تتبع التغيرات في الصفحة، كما يمكنك عرض محتوى الصفحة أثناء حدوث الخطأ و تفقد التغييرات فيها.

اعمل view page resource أو inspect و راقب التغيرات و أخبرنا بما يحصل

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Our World عالمنا عضو نشيط

Our World عالمنا

نشر
  • الكاتب
نشر
بتاريخ 9 دقائق مضت قال Wael Aljamal:

لاحظت أن المشكلة عند استلام نتيجة الطلب، لربما تنسيق الرد غير مهيكل بطريقة صحيحة ما يؤدي لوجود وسم مفتوح وغير مغلق، مما يؤدي لأن العناصر التالية تتغير هرمية وراثتها أو يتغير الأب لها، فلا يعود التنسيق يعمل بشكل جيد.

حاول فتح أدوات المطورين بالضغط على F12 ثم تتبع التغيرات في الصفحة، كما يمكنك عرض محتوى الصفحة أثناء حدوث الخطأ و تفقد التغييرات فيها.

اعمل view page resource أو inspect و راقب التغيرات و أخبرنا بما يحصل

اثناء حدوث الخطأ يتم تشغيل ملف تنسيق اللغة الانجليزية لذلك يتغير الاتجاه

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Wael Aljamal عضو نشيط

Wael Aljamal

نشر
نشر
بتاريخ 3 دقائق مضت قال Our World عالمنا:

اثناء حدوث الخطأ يتم تشغيل ملف تنسيق اللغة الانجليزية لذلك يتغير الاتجاه

هل تقوم بتحميل التنسيق العربي بشكل افتراضي؟ 

 <!--css-->
    <link rel="stylesheet" type="text/css" href="layout/css/ar.css">
    <link rel="stylesheet" type="text/css" href="layout/css/<?php echo $lang['lang'];?>.css">

<!--echo $lang['en']OR echo $lang['ar']-->

حاول طباعة جميع المتغيرات في صفحة PHP التي تستجيب لطلب ajax وتأكد من قيمهم..

وهل نفس الصفحة الحالية هي من تعالج نتيجة البحث؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Our World عالمنا عضو نشيط

Our World عالمنا

نشر
  • الكاتب
نشر
بتاريخ 16 دقائق مضت قال Wael Aljamal:

لاحظت أن المشكلة عند استلام نتيجة الطلب، لربما تنسيق الرد غير مهيكل بطريقة صحيحة ما يؤدي لوجود وسم مفتوح وغير مغلق، مما يؤدي لأن العناصر التالية تتغير هرمية وراثتها أو يتغير الأب لها، فلا يعود التنسيق يعمل بشكل جيد.

حاول فتح أدوات المطورين بالضغط على F12 ثم تتبع التغيرات في الصفحة، كما يمكنك عرض محتوى الصفحة أثناء حدوث الخطأ و تفقد التغييرات فيها.

اعمل view page resource أو inspect و راقب التغيرات و أخبرنا بما يحصل

قبل المشكلة (ملف تنسيق العربي) 

body {

background-color: #F7F6F6;

direction: rtl;

}

بعد المشكلة (ملف الانجليزي)

body {

background-color: #F7F6F6;

direction: ltr;

}

 

بتاريخ 2 دقائق مضت قال Wael Aljamal:

هل تقوم بتحميل التنسيق العربي بشكل افتراضي؟ 


 <!--css-->
    <link rel="stylesheet" type="text/css" href="layout/css/ar.css">
    <link rel="stylesheet" type="text/css" href="layout/css/<?php echo $lang['lang'];?>.css">

<!--echo $lang['en']OR echo $lang['ar']-->

حاول طباعة جميع المتغيرات في صفحة PHP التي تستجيب لطلب ajax وتأكد من قيمهم..

وهل نفس الصفحة الحالية هي من تعالج نتيجة البحث؟

انا عرضت صفحة الـ header وبها ملفى التنسيق (عربي وانجليزي) هكذا

<!--css--> <link rel="stylesheet" type="text/css" href="layout/css/ar.css"> <link rel="stylesheet" type="text/css" href="layout/css/<?php echo $lang['lang'];?>.css"> <!--echo $lang['en']OR echo $lang['ar']-->

والتبديل تلقائي استجابة لما يحمله المتغير  $lang['lang']

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Wael Aljamal عضو نشيط

Wael Aljamal

نشر
نشر
بتاريخ الآن قال Our World عالمنا:

قبل المشكلة (ملف تنسيق العربي)

المتغير $lang يحمل سلسلة نصية تعبر عن اللغة/ لماذا تجلب القيمة وتعامله كمصفوفة  

<?php echo $lang['lang'];?>
           ^^^^^^^^^^^^

<?php echo $lang;?>

*********

أي أن اللغة تتبدل أثناء المعالجة، لسبب تحميل الصفحة من جديد.

يمكنك إسناد اتجاه الصفحة من PHP  و HTML 

<html dir="rtl" lang="ar">

  =>
  
<html dir="<?= $lang == 'ar' ? 'rtl':'ltr' ?>" lang="<?= $lang ?>">

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Our World عالمنا عضو نشيط

Our World عالمنا

نشر
  • الكاتب
نشر
بتاريخ 9 دقائق مضت قال Wael Aljamal:

المتغير $lang يحمل سلسلة نصية تعبر عن اللغة/ لماذا تجلب القيمة وتعامله كمصفوفة  


<?php echo $lang['lang'];?>
           ^^^^^^^^^^^^

<?php echo $lang;?>

*********

أي أن اللغة تتبدل أثناء المعالجة، لسبب تحميل الصفحة من جديد.

يمكنك إسناد اتجاه الصفحة من PHP  و HTML 


<html dir="rtl" lang="ar">

  =>
  
<html dir="<?= $lang == 'ar' ? 'rtl':'ltr' ?>" lang="<?= $lang ?>">

 

جربت السابق ووضعته فى صفحة الـ header  هكذا

<!DOCTYPE html>
<html dir="<?php $lang=='ar'?'rtl':'ltr' ?>" lang="<?php $lang ?>">
<head>
    <meta charset="utf-8">
    <title>
        <?php echo $title;?>
    </title>
     <!-- site logo -->
    <link rel="shortcut icon" href="layout/images/favicon.ico"  />
    <!--bootstrap-->
    <link rel="stylesheet" type="text/css" href="<?php echo $css;?>bootstrap.min.css">
    <!--fontawesome-->
    <link rel="stylesheet" type="text/css" href="<?php echo $css;?>all.min.css">
    <!--css-->
    <link rel="stylesheet" type="text/css" href="layout/css/ar.css">
    <link rel="stylesheet" type="text/css" href="layout/css/<?php echo $lang['lang'];?>.css"><!--echo $lang['en']OR echo $lang['ar']--> 
</head>
<body class="body">


والمشكلة كما هى لم تحل

بتاريخ 12 دقائق مضت قال Wael Aljamal:

المتغير $lang يحمل سلسلة نصية تعبر عن اللغة/ لماذا تجلب القيمة وتعامله كمصفوفة  


<?php echo $lang['lang'];?>
           ^^^^^^^^^^^^

<?php echo $lang;?>

*********

أي أن اللغة تتبدل أثناء المعالجة، لسبب تحميل الصفحة من جديد.

يمكنك إسناد اتجاه الصفحة من PHP  و HTML 


<html dir="rtl" lang="ar">

  =>
  
<html dir="<?= $lang == 'ar' ? 'rtl':'ltr' ?>" lang="<?= $lang ?>">

 

لاحظ ان اللغه لا تتبدل ولكن التنسيق فقط هو الذي يتبدل.. أنا طبعت 

<?php echo 'language='.$lang['lang']; ?>

قبل وبعد حدوث المشكلة؛ قيمته ثابته لا تتغير الذي يتغير فقط هو التنسيق من عربي الى انجليزي 

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Wael Aljamal عضو نشيط

Wael Aljamal

نشر
نشر
بتاريخ 11 دقائق مضت قال Our World عالمنا:

قبل وبعد حدوث المشكلة؛ قيمته ثابته لا تتغير الذي يتغير فقط هو التنسيق من عربي الى انجليزي 

حسناً، لنفصل الصفحة الخلفية مؤقتاً و نعيد نتيجة ثابتة 

$('.shown').html("Hello");

أو

$('.shown').html("مرحبا");

جرب كل مرة سطر مختلف بدل القيمة الحقيقة، لنعرف سبب المشكلة

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Our World عالمنا عضو نشيط

Our World عالمنا

نشر
  • الكاتب
نشر
بتاريخ 18 دقائق مضت قال Wael Aljamal:

حسناً، لنفصل الصفحة الخلفية مؤقتاً و نعيد نتيجة ثابتة 


$('.shown').html("Hello");

أو

$('.shown').html("مرحبا");

جرب كل مرة سطر مختلف بدل القيمة الحقيقة، لنعرف سبب المشكلة

جربت مرحبا مرة و hello  مرة ثانية ولم تحدث المشكلة.. المشكلة تحدث فقط مع مجيء البيانات (data) من الصفحة الخلفية

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Wael Aljamal عضو نشيط

Wael Aljamal

نشر
نشر
بتاريخ 1 دقيقة مضت قال Our World عالمنا:

جربت مرحبا مرة و hello  مرة ثانية ولم تحدث المشكلة.. المشكلة تحدث فقط مع مجيء البيانات (data) من الصفحة الخلفية

ممكن تعرض data في console لنتاكد من ماهيتها

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Our World عالمنا عضو نشيط

Our World عالمنا

نشر
  • الكاتب
نشر
بتاريخ 3 دقائق مضت قال Wael Aljamal:

ممكن تعرض data في console لنتاكد من ماهيتها

اشكرك اخى الفاضل تداركت الخطأ وتم حل المشكلة..

فى صفحة المعالجة لم ارفق المتغير 

$lang['lang']

 انما ارفقت الملفات القديمة الانجليزية والعربية  

شكرا حسوب

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...