فرم ویرایش پاپ آپ

[Louai_M]

با سلام

من یک جدول دارم که یه سری اطلاعات داخلش ذخیره می شه و درفرمی این اطلاعات بنمایش در میاد مثلا فیلدهای title,subject,content خو در فرم نمایش اطلاعات فقط فیلد title نمایش داده میشه و کنارش یه آیکن ویرایش و یه آیکن حذف هستش تا اینجا مشکلی نیست .

حال می خوام وقتی روی آیکن ویرایش یا حذف کلیک کردم یک فرم یا div بصورت پاپ آپ ظاهر بشه و مثلاً برای ویرایش امکان ویرایش اطلاعات اون رکوردی که انتخاب کردم را فرهم کنه و برای حذف یه متنی آیا برای حذف مطمئن هستید ظاهر بشه و دو گزینه بلی و خیر داشته باشه

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

*- دوستان نیاز فوری دارم -*

[Louai_M]

اساتید کسی نیست کمک کنه

[saeed-71]

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

[id1385]

با سلام
همونطور که دوست عزیزمون گفتن بصورت عادی چکار میکنی خب همون کارو انجام بده منتها div ای که میخوای اطلاعات رو در اون نمایش بدی با css به پاپ آپ تبدیل کن، و. با جیکوئری اطلاعات رو فراخونی کن بعد هم ذخیره.
نمونه زیر رو ببین

popup div style
main cointer:

.layer1{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.82);
z-index: 1000;
text-align: center;
}

popup form:

width: 375px;margin: 22px auto;


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

مثلاً روی همون ویرایش که کلیک میکنی اینو نمایش بدی
نمونه:
مثلا با زدن دکمه insert نمایش داده بشه و با esc مخفی بشه:

$("body").live("keyup", function(e) {
var charCode = (e.which) ? e.which : event.keyCode;
// hide
if (27 === charCode) {
hide_popup_form();
}
// show
if (45 === charCode) {
show_popup_form("", true);
loadData();
}
});


یا با زدن یک باتن نیز نمایش داده بشه که این مورد میتونه برای جدید :

$("button.abb_actions").bind("click", function() {
show_popup_form("", true);
loadData();
});


یا برای ویرایش باشه :

$("a.act_edit").live('click', function() {
var is_current_edit = $(this).hasClass("active_a");
if (is_current_edit) {
return false;
}
if (active_action) {
var conf = confirm(active_edit);
}
if (active_action && !conf) {
return;
}
$("#cancelEdit").click();
var row = $(this).closest('tr').attr('data-token');
//alert(row);
var arr = new Array(row, "byToken", true, "Null", "Null", "Null", "edit", "Null");
savetData(arr);
});



اینم نمونه کد نمایش :

function show_popup_form(tType, showLoading) {
if (tType === "" || tType === undefined || tType === "undefined" || !$.inArray(tType, Array("add", "save_edit"))) {
tType = "add";
}
if (isVis) {
return false;
}
$("button#tSave").attr("data-type", tType);
var pan = $("div.layer1");
var mDiv = $("#popup_frm");
if (pan.length > 0 && !isVis) {
isVis = true;
pan.fadeTo("fast", 1);
mDiv.animate({left: "35%", opacity: "1"}, "fast");
}
if (showLoading) {
cr_loading();
}
}


و کد مخفی سازی یا بستن پاپ آپ فرم:

function hide_popup_form() {
var close = true;
if ($("div.layer1").length > 0) {
var pan = $("div.layer1");
var mDiv = $("#popup_frm");
if (active_action) {
close = confirm("\u0627\u0632 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0635\u0631\u0641 \u0646\u0638\u0631 \u0634\u0648\u062f\u061f");
}
if (close) {
active_action = false;
active_edit = false;
active_proccess = false;
clear_inputs();
if (pan.length > 0) {
mDiv.animate({left: "30%", opacity: "0"}, "fast");
pan.fadeOut();
isVis = false;
isLoaded = false;
r_loading();
}
}
}
}


برای فراخوانی و ذخیره اطلاعات هم میتونی از $.post استفاده کنی
نمونه :

function savetData(eData, e) {
cr_loading();
$.post(erl, {data: eData}, function(Response) {
//alert(Response);
if (Response && Response !== "") {
var json = $.parseJSON(Response);
var result = json[0];
var desc = json[1];
// add response
if (result === "added") {
clear_inputs();
set_values();
r_loading();
var btnType = e.attr("data-actions");
if (btnType !== "" && btnType !== undefined && btnType !== "undefined" && btnType === "c") {
$("#_cat").focus();
return;
}
hide_popup_form();
}
}); // post
}




قبلا تو یکی از پستهای من نمونه کامل ذخیره و بازیابی اطلاعات با php و jquery رو گذاشتم میتونید از اون الگو بگیرید.



موفق باشید

[Louai_M]

ممنون دوست عزیز مطلب خیلی کلی و مفیدی بود

[Louai_M]

دوست عزیز من تو jquery و ajax تازه کارم میشه با یه مثال عملی اینو برام توضیح بدی

|

کد دانشجویی

نام و نام خانوادگی

ویرایش / حذف



12

علی علوی

ویرایش / حذف



|