رفتن به مطلب

نمایش زیردسته های وردپرس در یک div دیگه


پست های پیشنهاد شده

با سلام
من میخوام وقتی کاربر روی کمله کلیک فشار داد داخل دایو با آیدی سمپل اجرای کدی که داخل فانکشن نوشتم رو نشون بده
لطفا ببینید کد من چه مشکلی داره
در ضمن کدهایی که نوشتم کد های وردپرس، هرچند فکر نکنم فرقی کنه
در این قسمت <?php query_posts('cat=id&showposts=29'); ?> اون آیدی id که گذاشتم از ورودی وارد میشه که اینجا باید اتومات بشه 5


 

<li id="gozine1" onclick="Setgozine(5)">کلیک</li>    
<div id="sample" class="boxz1"></div>    
<script type="text/javascript">
//<![CDATA[
 function Setgozine(id) {

    var value = '<div class="boxz"><br/>
                <?php query_posts('cat=id&showposts=29'); ?>
                <ul>"
                <?php while (have_posts()) : the_post(); ?>
                <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
                <?php endwhile;?>
                </ul>
                <?php wp_reset_query(); ?>
                </div>';
                
    document.getElementById('sample').innerHTML = value;
    
    }
</script>

لطفا راهنمایم کنید

لینک به ارسال

id  رو می خواهید با جاوا اسکریپت دریافت کنید و بر اساسش کد php رو ران کنید؟!

php سمت سرور اجرا می شه یعنی قبل از اینکه صفحه برای مرورگر خوانا بشه و جاوا اسکریپت سمت کاربر یعنی بعد از لود صفحه در نتیجه می شه متغیری رو از php وارد جاوا اسکریپت کرد ولی برعکسش نمی شه

 شما باید مقدار id رو به وسیله آژاکس با یکی از متدهای GET یا POST به یک اکشن معرفی کنید و کوئریتون رو اونجا بسازید 

 

لینک به ارسال
در 2 ساعت قبل، imanfakhar گفته است :

id  رو می خواهید با جاوا اسکریپت دریافت کنید و بر اساسش کد php رو ران کنید؟!

php سمت سرور اجرا می شه یعنی قبل از اینکه صفحه برای مرورگر خوانا بشه و جاوا اسکریپت سمت کاربر یعنی بعد از لود صفحه در نتیجه می شه متغیری رو از php وارد جاوا اسکریپت کرد ولی برعکسش نمی شه

 شما باید مقدار id رو به وسیله آژاکس با یکی از متدهای GET یا POST به یک اکشن معرفی کنید و کوئریتون رو اونجا بسازید 

 

ببینید کلیت کار به اینصورت هستش:

من دو تا div در صفحه اول دارم دارم که دایو اول دسته های مادر  رو نشون میده که با کلیک بروی هر کدام از دسته ها دایو دوم ظاهر میشه و زیر دسته هارو نشون میده .

مثال : سایت www.pacar.ir رو اگه ببینید اول برند ماشین هارو میاره و وقتی روی هر کدام کلیک می کنیم داخل یه باکس دیگه مدل هاشو میاره.

شما بهترین هستید، از همه سایت هایی که گذاشتم زودتر جواب دادید. امیدوارم همینجا به نتیجه ای که میخوام برسم.

با تشکر

لینک به ارسال

پاسختون رو که عرض کردم با آژاکس باید کار کنید 

اول یک قالب برگه با نام actions.php و کدهای زیر در قالبتون قرار می دید 

<?php 
/*template name: actions*/
if(isset($_POST['setgozine'])) {
$query = new WP_Query(array(
'cat' => $_POST['setgozine'],
'posts_per_page'	=>	29
));
if($query->have_posts()) :
echo '<ul>';
while($query->have_posts()) : $query->the_post();?>
                <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;
echo '</ul>';
endif;
wp_reset_query();
}
?>

دوم یک برگه با نامک actions منتشر می کنید

سوم ساختار پیوند یکتا را می گذارید نام نوشته 

چهارم محتوای فعلیتون را به این شکل می کنید 

<li class="gozine" data-setgozine="5">کلیک</li>    
<div id="sample" class="boxz1"></div>    
<script>
$(".gozine").click(function(){
	var setgozine  = $(this).data('setgozine');
	
	$.ajax({
		type:"POST",
		url:"<?php bloginfo('url');?>/actions",
		data:{setgozine:setgozine}
		})
	.done(function(msg){
		$("#sample").html(msg);
		
		})	

	})

</script>

 

لینک به ارسال
در 3 ساعت قبل، imanfakhar گفته است :

پاسختون رو که عرض کردم با آژاکس باید کار کنید 

اول یک قالب برگه با نام actions.php و کدهای زیر در قالبتون قرار می دید 


<?php 
/*template name: actions*/
if(isset($_POST['setgozine'])) {
$query = new WP_Query(array(
'cat' => $_POST['setgozine'],
'posts_per_page'	=>	29
));
if($query->have_posts()) :
echo '<ul>';
while($query->have_posts()) : $query->the_post();?>
                <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;
echo '</ul>';
endif;
wp_reset_query();
}
?>

دوم یک برگه با نامک actions منتشر می کنید

سوم ساختار پیوند یکتا را می گذارید نام نوشته 

چهارم محتوای فعلیتون را به این شکل می کنید 


<li class="gozine" data-setgozine="5">کلیک</li>    
<div id="sample" class="boxz1"></div>    
<script>
$(".gozine").click(function(){
	var setgozine  = $(this).data('setgozine');
	
	$.ajax({
		type:"POST",
		url:"<?php bloginfo('url');?>/actions",
		data:{setgozine:setgozine}
		})
	.done(function(msg){
		$("#sample").html(msg);
		
		})	

	})

</script>

 

همه کارهارو با دقت انجام دادم ولی در خروجی یعنی div که آیدیشو گذاشتید sample چیزی نشون نداد.

من روی لوکال دارم انجام میدم.

معذرت میخوام من اطلاعات زیادی در مورد آژاکس ندارم

ویرایش شده توسط hoseni_68
لینک به ارسال
در 3 ساعت قبل، imanfakhar گفته است :

برگه actions  رو با استفاده از قالب actions ساختید؟ 

 

 

 

بله

لینک به ارسال

پس حتما قالبتون باjquery  مشکل داره کدهای اکشن رو دست نزنید و کدهای بخش نمایش رو به کدهای زیر تغییر بدید.

<li class="gozine" onclick="setgozine(5)">کلیک</li>    
<div id="sample" class="boxz1"></div>    
<script>
function setgozine(id)
{
var xmlhttp;
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)
    {
    document.getElementById("sample").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","<?php bloginfo('url');?>/actions",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("setgozine="+id);
}
</script>

 

لینک به ارسال

با سلام خدمت همه دوستان بخصوص استاد زحمت کش آقای ایمان فخار

با کمک ایشان این مسئله حل شد و وظیفه خودم دونستم که کاملشو اینجا بذارم که هر کس خواست به راحتی استفاده کنه.(چون خودم خیلی سرچ کردم و کسی منبع کاملی نذاشته بود، حق این سایت هستش که کاربرا بیان داخلش و اینو ببینن، لطفا داخل انجمن های دیگه کپی نکنید)

لطفا مرحله به مرحله برید جلو:

مرحله اول:

کدهای صفحه اصلی :

این کد برای نمایش دسته مادر (باکس اول) بدون زیر دسته :

<?php $categories = get_categories();
	foreach ($categories as $cat)
		{
			if($cat->parent < 1)
				{
						echo ("<li class='gozine' onclick='setgozine($cat->cat_ID)'>$cat->cat_name</li>");
				}
		}
?>

باکسی که قرار زیر دسته ها رو نشون بده (باکس دوم) :

<div id="box2" class="liil" align="center" style="display: none;">

</div>
<ul id="btnBazghshtHome" class="children" style="display: none">
	<li class="bazghsht">بازگشت </li>
</ul>

این دستور هم در انتهای همین صفحه بذارید، کارش اینه که وقتی روی دکمه بازگشت کلیک کردی باکس دوم رو پنهان میکنه و زمانی که میخواد باکس اول رو نشون بده زیباتر به نمایش در میاد.

<script type="text/ecmascript">   
    $(document).ready(function(){
	$("#btnBazghshtHome").click(function() {
		$("#box2").hide();
		$("#btnBazghshtHome").hide();
		$("#box1").fadeIn(500);
		});

	$("#loginb").hide();
	$("#login").click(function()
		{ $("#loginb").toggle(500);});
});
</script>

این کد هم بعدش و داخل همین صفحه قرار بدید.

<script>
function setgozine(id)
{
var xmlhttp;
$("#box1").hide();
$("#box2").fadeIn(500);
$("#btnBazghshtHome").show();
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)
    {
    document.getElementById("box2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","<?php bloginfo('url');?>/actions",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("setgozine="+id);
}
</script>

صفحه اول کدهاش به پایان رسید.

مرحله دوم :

یه فایل درست کنید و اسمشو بذارید actions.php و بازش کنید سپس کدهای زیر رو داخلش قرار بدید. توجه کنید هیچی نمی خواد فقط کدهای زیر، همین

<?php 
/*template name: actions*/
if(isset($_POST['setgozine'])) {
$numberChild = $_POST['setgozine'];
$categories = get_categories("child_of=$numberChild");
echo '<ul>'; 
	foreach ($categories as $category) {	
		echo ('<li><a href="'.get_bloginfo('url')."/category/".$category->category_nicename.'">');
		echo ($category->cat_name);
		echo ('</a></li>');
	}
echo ('</ul>
			');
wp_reset_query();
}
?>

مرحله سوم :

برید داخل قسمت مدیریت > افزودن برگه

عنوان یا همان نامک : actions

از قسمت سمت چپ اونجا که نوشته مادر، قسمت زیرش نوع قالب هستش، از نوار کشویی actions رو انتخاب کنید.

حالا انتشار رو بزنید.

مرحله چهارم :

قرار دادن کدهای css ، اینها رو هم گذاشتم که راحت راحت بشید، کد زیر رو داخل فایل style.css قرار بدید

.liil li { cursor: pointer;margin: 10px;font-family: tahoma; font-size: 12px;color:#3d709c;float:right;}
#box1{border-radius: 2em;box-shadow: 0 0 5px -3px;margin-bottom:15px; width:540px;height:260px;background:#EFEFEF;}
#btnBazghshtHome{ margin: 0 0 18px 40px;float:left;border-radius: 2em;box-shadow: 0 1px 1px black, 0 10px 0 rgba(255, 255, 255, 0.3) inset;font-size:12px;margin-bottom: 10px;    width: 100px;cursor: pointer;}

تمام.

این خروجی رو من قرار بذارم روی سایت "خرید و فروش ابزار دست دوم"

وقتی راه افتاد لینکشو میذارم که خروجیش رو ببینید، ولی فعلا می تونید خروجی با ظاهر متفاوت از این سایت "ابزار و یراق" ببینید . http://sanattools.com

لینک به ارسال
  • 2 هفته بعد...

به دو صورت روی سایت پیاده سازی شد، هم داخل دایو ، هم drop down

لینک > خرید و فروش ابزار دست دوم

لینک به ارسال

یه مشکل هستش

الان من اینکارو کردم داخل  div در مرورگر فایر فاکس ، گوشی و اینترنت اکسپلورر کار می کنه

و یکی دیگه هم درست کردم که داخل تگ select نشون بده که بصورت افتادنی باشه که داخل مروگر فایرفاکس کار می کنه ولی داخل گوشی و اینترنت اکسپلورر کار نمی کنه.

مشکل می تونه از کجا باشه؟

پیشاپیش تشکر

از لینک زیر می تونید تست کنید

(برای تست اول دسته رو انتخاب کنید ، ولی متاسفانه زیردسته هارو داخل select دوم نمیاره.)

لینک > خرید و فروش ابزار دست دوم

لینک به ارسال
<select onchange="setgozineSearch(this.value)">
		<option></option>
		<option class="gozine" value="27">ابزار دقیق(1)</option>
		<option class="gozine" value="29">ایمنی و آتشنشانی(0)</option>
		<option class="gozine" value="20">بادی(5)</option>
		<option class="gozine" value="17">برقی و شارژی(4)</option>
		<option class="gozine" value="89">تراش(0)</option>
		<option class="gozine" value="95">جرثقیل،بالابر(0)</option>
		<option class="gozine" value="107">جوش و برش(0)</option>
		<option class="gozine" value="128">دستی(0)</option>
		<option class="gozine" value="136">ساختمانی(0)</option>
		<option class="gozine" value="139">سایش و برش(0)</option>	
	</select>

تست کنید

لینک به ارسال

متاسفانه خیر ،  کار نکرد.

 

اینم بگم که در قسمت قبلی شما گفتید یه برگه بسازید و از داخل مدیریت اونو انتخاب کنید

ولی

در این صفحه من اینکارو کردم

<?php /*template name: boxSearch.php*/?>

و از داخل صفحه اول به اینصورت فراخوانی کردم

<?php include (TEMPLATEPATH . '/boxSearch.php'); ?>

گفتم اینهارو بگم شاید تاثیر داشته باشه. ولی خوب اگه کار نمی کرد که داخل فایرفاکس هم نباید کار می کرد.

ویرایش شده توسط hoseni_68
لینک به ارسال
<select id="select1">
		<option></option>
		<option value="27">ابزار دقیق(1)</option>
		<option value="29">ایمنی و آتشنشانی(0)</option>
		<option value="20">بادی(5)</option>
		<option value="17">برقی و شارژی(4)</option>
		<option value="89">تراش(0)</option>
		<option value="95">جرثقیل،بالابر(0)</option>
		<option value="107">جوش و برش(0)</option>
		<option value="128">دستی(0)</option>
		<option value="136">ساختمانی(0)</option>
		<option value="139">سایش و برش(0)</option>	
	</select>
	<select id="select2">
	
	</select>
<script>
jQuery(document).ready(function() {
  jQuery("#select1").change(function() {
  var v = jQuery(this).val();
  	jQuery.ajax({
		type:"POST",
		url:"<?php bloginfo('url');?>/actions.php",
		data:{v:v}
		})
	.done(function(msg){
		$("#select2").html(msg);
		})	
  })
});
</script>	

در مورد اکشن هم لازم نیست برای هر مورد یه فایل بسازید ولی اینکلود فایل از چندین جهت اشتباه از جمله ایجاد یک حفره امنیتی تو ایندکس سایت و اینکه با اینکلود فایل سیستم رو مجبور می کنید قبل از هر بار لود صفحات یکبار شرطها رو بررسی کنه که هم باعث فشار به منابعه و هم سیستم رو تو ترافیک بالا دچار اختلال و کندی می کنه 

اکشن قبلی که داشتید به این صورت اصلاح کنید 

<?php 
/*template name: actions*/
if(isset($_POST['setgozine'])) {
$numberChild = $_POST['setgozine'];
$categories = get_categories("child_of=$numberChild");
	foreach ($categories as $category) {	
		echo ('<li><a href="'.get_bloginfo('url')."/category/".$category->category_nicename.'">');
		echo ($category->cat_name);
		echo ('</a></li>');
	}
}
elseif(isset($_POST['v'])) {
$categories = get_categories("child_of=$_POST['v']");
	foreach ($categories as $category) {	
		echo '<option>'.$category->cat_name.'</option>';
	}
}

?>

 

لینک به ارسال

در ضمن بجای این هم 

get_bloginfo('url')."/category/".$category->category_nicename

این رو قرار بدید

get_category_link($category->term_id)

 

لینک به ارسال

متاسفانه زیر دسته هارو نشون نمیده

الان دیگه کلا داخل فایر فاکس هم نشون نمیده.

 

لینک به ارسال

مشکل از این بود که ورژن اینترنت اکسپلوررم قدیمی بود. و حالا که آپدیت کردم همون کدای اول کار کرد.

ولی داخل گوشی اپل واقعا نشون نمیده.

(قسمت همون نشان دادن داخل select در http://stock.sanattools.com )

------------------------------------------------------------------------------------------------

جالبه داخل این سایتم http://sanattools.com هم گذاشتمش ، وقتی که ورود به پنل مدیریت می کنم کار می کنه ولی وقتی خروج می کنم زیر دسته هارو نشون نمیده .

(همون کدی که داخل div در سایت http://stock.sanattools.com کار می کرد.)

من داخل تمام انجمن ها گشتم خیلی ها این ویژگی را داخل وردپرس میخوان داشته باشن ولی مشکل دارن که دسته های مادر داخل یه select بیاد و وقتی انتخاب شد زیردسته هاش داخل select دوم بیاد.

ویرایش شده توسط hoseni_68
لینک به ارسال

در کل خط دستور onclick نباید برای option نوشته شه برای انتخاب صحیح option باید از onchange برای serlect والد استفاده کرد 

در ضمن اونکه اکشن فرم رو اینکلود نکنید هم خیلی مهمه 

برای احضار محتوای دومین سلکتور بر اساس مقدار اولین سلکتور راه های زیادی هست و الزاما نباید با آژاکس انجامش داد 

من فقط توی همین سایت فکر کنم بالای ده شکل مختلفش رو خودم آموزشش رو گذاشتم 

<select id="menu1" onchange="Func()">
	<option data-menu="گزینه 1 از 1, گزینه 2 از 1 , گزینه 3 از 1 " contenteditable="true">گزینه 1</option>
	<option data-menu="گزینه 1 از 2, گزینه 2 از 2 , گزینه 3 از 2 " contenteditable="true">گزینه 2</option>
	<option data-menu="گزینه 1 از 3, گزینه 2 از 3 , گزینه 3 از 3 " contenteditable="true">گزینه 3</option>
</select>
<select id="menu2"></select>
<script>
function Func() {
var menu2 = document.getElementById('menu2');
var menu1=document.getElementById('menu1');
var val=menu1.options[menu1.selectedIndex].getAttribute('data-menu');
var arr=val.split(',');
menu2.options.length = 0;
for(i = 0; i < arr.length; i++)
{
if(arr[i] != "")
{
menu2.options[menu2.options.length]=new Option(arr[i],arr[i]);
}
}
}
</script>

این هم یه نمونه ساده دیگه اش

لینک به ارسال

سلام

داخل نمونه هم روی سلکتور اول کلیک می کنم هیچ اتفاقی نمیفته

 

لینک به ارسال

Screenshot_72.png.8bdc356bfbee8686ca7e4aScreenshot_73.png.e8f7657382708cd75b8132Screenshot_74.png.d3cf300ac198f00cfbd873Screenshot_75.png.cc542144b854a9f9974f72

ببخشید منتظر چه اتفاقی باید باشیم شاید کنسوا جاوا اسکریپ نمایشگر شما غیر فعاله

لینک به ارسال

کاملا درست می فرمایید

داخل فایر فاکس نشون نمیداد، ولی داخل اینترنت اکسپلورر و گوشی تست کردم کار می کنه.

ولی بنظر شما کدای قبلی جاوا بود داخل مرورگر فایرفاکسم نشون میداد ولی داخل گوشی مشکل داشت

و این کد آخر بالعکس داخل گوشی درسته و داخل فایرفاکس مشکل داره.

 

لینک به ارسال

تست کردم جاوا اسکریپت فعال هستش ، شما با فایر فاکس چک کردید؟

من میخوام وقتی کدی گذاشته شد هیچکس با مرورگرش به مشکل نخوره، مخصوصا که الان 85 درصد از فایرفاکس استفاده می کنن

لینک به ارسال

http://jsbin.com/fasupowota/edit?html,output

Screenshot_76.png.0cf435565ea52d2201f83a

البته کدهای قبلی هم درست بودن هم آژاکس جاوا اسکریپت هم جی کوئری و مشکل اجراشون مربوط می شد به قالب شما 

اجرای صحیح آژاکس به موارد زیادی مربوط می شه

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...