كيفية تحميل صفحة باستخدام مربع حوار jquery ui

Question

هل من الممكن تحميل صفحة أخرى باستخدام مربع حوار jquery ui؟

مثل الحوار + اياكس

شكرًا

Answer 1

إذا كنت تريد تحميل المحتوى إلى مربع حوار باستخدام Ajax، فيمكنك بسهولة استخدام $.load:

// initialize dialog
var dialog1 = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dialog1.load('path/to/otherPage').dialog('open');

التحقق من مثال هنا.

Answer 2

إن تصميم مربع حوار JQuery UI يحتاج إلى محتوى موجود للعمل عليه.عادة في الأمثلة هذا هو DIV مأخوذة من الموجود BODY من DOM.

هناك حالات حيث تؤدي إضافة العلامات إلى الصفحات الموجودة فقط لإنشاء مربع حوار - خاصة إذا تم تحميل المحتوى بواسطة AJAX - إلى حدوث مشكلات.على سبيل المثال، قد يكون لديك مكتبة JavaScript يمكن استدعاؤها من عدد من الصفحات ولا تريد إضافة علامة إلى كل واحدة منها.

طريقة بديلة(مستوحاة من هذا) هنا :

الفرق هو أنك تقوم بإنشاء DIV برمجيًا (ستتم إضافته تلقائيًا إلى DOM) - وعندما يُغلق مربع الحوار، نقوم بتدميره بالكامل - وإزالته من DOM في حدث "إغلاق".

function JQDialog(title, contentUrl, params) {
  var dialog1 = $("<div>").dialog(
  {
     autoOpen: false,
     modal: true,
     title: title,
     close: function (e, ui) { $(this).remove(); },
     buttons: { "Ok": function () { $(this).dialog("close"); } }
  });
  dialog1.load(contentUrl).dialog('open');
}

---

يستبدل dialog1.load(contentUrl).dialog('open'); بما يلي إذا كنت لا تريد فتح مربع الحوار (وربما وميضه) حتى يتم تحميل المحتوى.سيسمح هذا أيضًا بتوسيطها بشكل صحيح دون عمل إضافي.

dialog1.load(contentUrl, function () {
    $(this).dialog('open');
});

Answer 3

أفضل الانتظار حتى أحصل على المحتوى لإنشاء مربع الحوار.يبدو الأمر أكثر وضوحًا بالنسبة لي.أيضًا، يبدو أن التحجيم التلقائي لا يعمل بطريقة أخرى:

    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });

Answer 4

بالتأكيد، ما عليك سوى تضمين إطار iframe في ملف HTML لمربع الحوار الخاص بك.

Answer 5

إذا كنت تحتاج أو تريد iFrame على وجه التحديد بدلاً من المحتوى المحقون في dom، فلدي امتداد لذلك هنا: http://plugins.jquery.com/project/jquery-framedialog