چطور یک div به شکل alert ایجاد کنم

[jahromy]

سلام
در برنامه ام پس از کلیک روی دکمه سفارش با ارسال id و فراخوانی تابع اسکریپت به کمک onClick در تابع اسکریپت #BasketContent باعث میشه که در تگ div با id="BasketContent" خروجی تابع اسکریپت نمایش پیدا کند حالا مسئله اینجاست این div را قصد دارم بشکل Alert و زمانیکه تابع با Id مدنظر فراخوانی شد بشکل Ajax نمایش پیدا کند یعنی در ان لحظه یک صفحه کوچک در پیج اصلی برای نمایش جزئیات سفارش انتخابی نمایش پیدا کند

ممنون می شوم راهنمایی بفرمایید



<input type="button" value="Add To Cart" onClick="AddToCart('.$Rows['ID'].')" title="Click Here To Add This Product To Your Basket"/>




<script type="text/javascript">

function AddToCart(id)
{
var ID = id;

$.post('Functions/Basket.php',{PID:ID},function(data){$("#BasketContent").html(data)});
}
function EmptyBasket()
{
<?php session_destroy(); ?>
window.location.href='';
}
</script>



<div id="Basket">
<p id="AddResult"></p>
<div id="BasketContent">Your basket is empty</div>
<p><input type="button" value="Empty Basket" onClick="EmptyBasket();"/><input type="button" value="Accept Items" onClick="AcceptItems();"/>
</div>

[jahromy]

قصد دارم با کلیک روی یک دکمه یک پنجره بشکل جاوا باز شود که یک جدول حاوی سلول هایی شامل اطلاعات بانک داده را نشان می دهد باشد.

[k-pax]

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

http://bootboxjs.com/

[jahromy]

از روشی که فرمودین استفاده کردم منتهی خروجی برگشتی تابع Basket در id -div مشخص شده نمایش پیدا نمی کند
ممکنه ببینید مشکلش چیه؟




<script src="./inc/js/jquery.js"></script>
<script src="./inc/js/bootbox.js"></script>
<script type="text/javascript">
function AddToCart(id)
{
var ID = id;
//alert(id);
$.post('./inc/functions/basket.php',{PID:ID},function(data){$("#BasketContent").html(data)});

}




bootbox.dialog({
title: "Shopping Cart",
message: '<div id="Basket">'+
'<p id="AddResult"></p>'+
'<div id="BasketContent">Your basket is empty</div>'+
'<p><input type="button" value="Empty Basket" onClick="EmptyBasket();"/>'+
'<input type="button" value="Accept Items" onClick="AcceptItems();"/>'+
'</div>'
});
</script>

[k-pax]

کدتون رو بصورت زیر اصلاح کنید

<script src="./inc/js/jquery.js"></script>
<script src="./inc/js/bootbox.js"></script>
<script type="text/javascript">
function AddToCart(id)
{
var ID = id;
//alert(id);
$.post('./inc/functions/basket.php',{PID:ID},function(data){
bootbox.dialog({
title: "Shopping Cart",
message: '<div id="Basket">'+
'<p id="AddResult"></p>'+
'<div id="BasketContent">'+ data +'</div>'+
'<p><input type="button" value="Empty Basket" onClick="EmptyBasket();"/>'+
'<input type="button" value="Accept Items" onClick="AcceptItems();"/>'+
'</div>'
});
});

}
</script>

[jahromy]

برای تغییر With , Height و کلا استایل آن از کجا باید انجام دهم

[xwoman2]

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


<div style="display:none;position:absolute;left:30px;top:30px; width:100px;height:100px;" id="test"></div>
<button onclick="myf(this.id);" id="test2">test</button>
<script>
function myf (ids)
{
document.getElementById("test").style.display="block";
var myvar="target.php?show&id="+ids;
$("#test").load(myvar);
};
</script>

[k-pax]

برای تغییر With , Height و کلا استایل آن از کجا باید انجام دهم

برای تغیر ظاهر میتونی با css انجام بدی
توضیحات کاملش اینجا هستش
http://bootboxjs.com/documentation.html#bb-custom-dialog

[jahromy]

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



function EmptyBasket()
{
<?php session_destroy(); ?>
window.location.href='';
}


مشکلی که داره:
1. کل سشن حتی لاگین کاربر رو حذف می کنه (نمی دونم اگر از unset() استفاده کنم دقیقا چی باید داخلش بگذارم)
2. بجای اینکه کل صفحه رفرش بشه فقط کادر سبد خرید رفرش شود و پیغام سبد خرید خالی در همان کادر bootbox نشان بده!

ممکنه راهنمایی بفرمایید؟

[k-pax]

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


var_dump($_SESSION);

به جای

window.location.href='';
هم از از دستور جکوئری استفاده کن تا سبد خریدت خالی نشون بده


$("#Cart").html('');

[jahromy]

به جای

window.location.href='';
هم از دستور جکوئری استفاده کن تا سبد خریدت خالی نشون بده


$("#Cart").html('');

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






<script src="./jquery.js"></script>
<script src="./bootbox.js"></script>
<script type="text/javascript">
function AddToCart(id)
{
var ID = id;
$.post('./inc/functions/basket.php',{PID:ID},function(data){
bootbox.dialog({
title: "سبد خرید",
message: '<div id="Basket">'+
'<p id="AddResult"></p>'+
'<div id="BasketContent">'+ data +'</div>'+
'</div>',

buttons: {
success: {
label: "پرداخت",
className: "btn-success",
callback: function() {
AcceptItems();
}
},
danger: {
label: "حذف سبد خرید!",
className: "btn-danger",
callback: function() {
EmptyBasket();
}
},
main: {
label: "ادامه خرید",
className: "btn-primary",

}
}
});
});

}
function EmptyBasket()
{
<?php
unset($_SESSION['pcount']);
session_destroy();
?>
$("#Cart").html('');
}

function AcceptItems()
{
<?php

?>
}

</script>



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

[xwoman2]

این مورد رو باید با ajax انجام بدید.یه دستوری چیزی با متود گت توسط ایجکس به صفحه ی مورد نظر بفرستید که سبد رو خالی کنه.بعد توی صفحه ی فعلی با جاوا سبد رو خالی کنید

[jahromy]

با ایجکس اشنایی ندارم ممکنه راهنمایی کنید
در تابع EmptyBascket() با php اینکار انجام شده مشکل فقط تو نمایش خالی شدن جدول دارم

[xwoman2]

ببینید شما با کمک ایجکس میتونید درخواستی به یک صفحه ی دیگه که موازی با صفحه ی اصلیتون اجرا میشه بفرستید و و دستور رو به جای اینکه در صفحه ی اصلی اجرا کنید در اون صفحه اجرا کنید.اینجوری صفحه ی اصلیتون لازم نیست با هر تغییر کوچیکی کلا ریفرش بشه.متاسفانه راهی نیست که بتونید بدون ایجکس کاری رو که میخواید انجام بدید.بر فرض اینکه انجام هم بدید زیاد جالب نیست.مشتری بیاد تو سایت بعد واسه خالی کردن سبد یه بار ریفرش بشه.
ببینید چیز خیلی سختی نیست.جی کوئری که بلدید.پی اچ پی هم که بلدید.ایجکس رو توی 2 ساعت میتونید آشنایی پیدا کنید باهاش.توی سایت w3 مثال های خیلی خوبی زده.
نحوه ی کلی کار به این صورت هست که اول متغیر اصلی ایجکس رو ایجاد میکنیم.
در گام بعد با یک دستور ایف چک میکنیم که درخواست ها به پیج مد نظر میرسه و پاسخ رو دریافت میکنیم یا نه ؟ اگر پاسخ ارسال و دریافت شد میایم درخواست اصلی رو که قرار هست کاری انجام بده رو میفرستیم به اون پیج مد نظرمون.
http://www.w3schools.com/ajax/default.asp

(http://www.w3schools.com/ajax/default.asp)

[k-pax]

دوست گرامی من کد زیر تستی و برای آموزش گذاشتم

$("#Cart").html('');
شما به جای Cart در متن بالا باید id سبد خریدتون رو بزارید !
حل میشه !

- - - Updated - - -


با ایجکس اشنایی ندارم ممکنه راهنمایی کنید
در تابع EmptyBascket() با php اینکار انجام شده مشکل فقط تو نمایش خالی شدن جدول دارم

همون دستور $.post خودش ایجکس هستش !
شما فقط الان مشکل خالی شدن سبد را دارید با راهنمایی بالا حل میشه

[jahromy]

دوست گرامی من کد زیر تستی و برای آموزش گذاشتم

$("#Cart").html('');
شما به جای Cart در متن بالا باید id سبد خریدتون رو بزارید !
حل میشه !



درسته ولی Id جدول(table) روی Cart قبلا تنظیم کرده بودم




print '<table id="Cart" width="95%" height="90%" border="1">
<tr>
<td>ردیف</td>
<td>نام </td>
<td align="center">تعداد</td>
<td align="center">فی ('.$_SESSION['price_code'].')</td>
<td>مبلغ کل ('.$_SESSION['price_code'].')</td>
</tr>';


در فایل دیگری هم تابع جاوا را بدین شکل دارم


function EmptyBasket()
{
<?php
unset($_SESSION['ProdactsCount']);
//session_destroy();
?>
$("#Cart").html('');
}


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