jQuery: अजाक्स

के माध्यम से लोड मॉडल संवाद सामग्री को वर्तमान में मेरे मॉडल संवाद इसjQuery: अजाक्स

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" /> 
</head> 
<body> 
    <div id="dialog" title="Title Box"> 
    <p>Stuff here</p> 
    </div> 
    <script type="text/javascript"> 
    jQuery(
    function() { 
    jQuery("#dialog") 
     .dialog(
     { 
     bgiframe: true, 
     autoOpen: false, 
     height: 100, 
     modal: true 
     } 
    ); 
    jQuery('body') 
     .bind(
     'click', 
     function(e){ 
     if(
     jQuery('#dialog').dialog('isOpen') 
     && !jQuery(e.target).is('.ui-dialog, a') 
     && !jQuery(e.target).closest('.ui-dialog').length 
     ){ 
     jQuery('#dialog').dialog('close'); 
     } 
     } 
    ); 
    } 
    ); 
    </script> 
    <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a> 
</body> 
</html>

डिव कि भरी हुई है एक ही पृष्ठ में शामिल है की तरह है। संवाद को दिखाए जाने पर मैं उस div को दूसरे पृष्ठ पर कैसे ले जा सकता हूं और अजाक्स के माध्यम से सामग्री लोड कर सकता हूं? और क्या मैं आवश्यकता के अनुसार अलग-अलग सामग्री लोड करने के लिए स्क्रिप्ट का पुन: उपयोग कर सकता हूं?

स्रोत

2010-10-01 abel

निमिकोर से इस ब्लॉग पोस्ट को देखें, जो आप चाहते हैं जो करना चाहिए।

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

मूल रूप से, 'खुला', तो आप 'लोड' पहली अन्य पृष्ठ से सामग्री कॉल करने से पहले।

jQuery('#dialog').load('path to my page').dialog('open');

स्रोत

2010-10-01 07:24:01 Sam

+16

हालांकि यह काम करता है यह पूरा करने के लिए लोड के लिए इंतजार से तुरंत नहीं बल्कि संवाद खुल जाएगा। कॉलबैक फ़ंक्शन का उपयोग करना बेहतर होगा: '$ ('# dialog')। लोड ('पथ-से-मेरा-पृष्ठ', फ़ंक्शन() {$ ('# संवाद')। संवाद ('खुला'); }); ' – billynoah

इसका उपयोग करने का प्रयास करें।

$(document).ready(function(){ 
$.ajax({ 
    url: "yourPageWhereToLoadData.php", 
    success: function(data){ 
     $("#dialog").html(data); 
    } 
}); 

$("#dialog").dialog(
     { 
     bgiframe: true, 
     autoOpen: false, 
     height: 100, 
     modal: true 
     } 
); 
});

स्रोत

2010-10-01 07:28:14

var dialogName = '#dialog_XYZ'; 
$.ajax({ 
     url: "/ajax_pages/my_page.ext", 
     data: {....}, 
     success: function(data) { 
      $(dialogName).remove(); 

      $('BODY').append(data); 

      $(dialogName) 
      .dialog(options.dialogOptions); 
     } 
});

अजाक्स अनुरोध संवाद लोड करते हैं, उन्हें वर्तमान पृष्ठ के शरीर के लिए जोड़ सकते हैं और संवाद को खोलने के।

आप केवल सामग्री लोड करने whant यदि आप कर सकते हैं:

var dialogName = '#dialog_XYZ'; 
$.ajax({ 
      url: "/ajax_pages/my_page.ext", 
      data: {....}, 
      success: function(data) { 
       $(dialogName).append(data); 

       $(dialogName) 
       .dialog(options.dialogOptions); 
      } 
});

स्रोत

2010-10-01 07:40:01 Floyd

$(function() { 
    $('<div>').dialog({ 
     modal: true, 
     open: function() 
     { 
      $(this).load('Sample.htm'); 
     },   
     height: 400, 
     width: 400, 
     title: 'Dynamically Loaded Page' 
    }); 
});

http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html

स्रोत

2013-02-04 19:10:22 temp2010

मुझे यह उत्तर सबसे लोकप्रिय, धन्यवाद के लिए अधिक उपयोगी लगता है। – stemie

<button class="btn" onClick="openDialog('New Type','Sample.html')">Middle</button> 

<script type="text/javascript"> 
    function openDialog(title,url) { 
     $('.opened-dialogs').dialog("close"); 

     $('<div class="opened-dialogs">').html('loading...').dialog({ 
      position: ['center',20], 
      open: function() { 
       $(this).load(url); 

      }, 
      close: function(event, ui) { 
        $(this).remove(); 
      }, 

      title: title, 
      minWidth: 600    
     }); 

     return false; 
    } 
</script>

स्रोत

2013-04-06 08:40:31

इस कोड को आप कुछ विचार दे सकता है हो सकता है।

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

$(document).ready(function() { 
    $('#page-help').each(function() { 
     var $link = $(this); 
     var $dialog = $('<div></div>') 
      .load($link.attr('href')) 
      .dialog({ 
       autoOpen: false, 
       title: $link.attr('title'), 
       width: 500, 
       height: 300 
      }); 

     $link.click(function() { 
      $dialog.dialog('open'); 

      return false; 
     }); 
    }); 
});

स्रोत

2014-06-26 12:43:53 Thomas

jQuery: अजाक्स

उत्तर

संबंधित मुद्दे