একটি jQuery UI ডায়ালগে ডেটা পাঠানো

Question 1

আমি একটি ASP.Net MVCসাইট বিকাশ করছি এবং এটিতে আমি ActionLinkএকটি নির্দিষ্ট সারিতে বুকিং বাতিল করার জন্য একটি টেবিলে একটি ডাটাবেস ক্যোয়ারী থেকে কিছু বুকিং তালিকাবদ্ধ রাখি BookingId:

আমার বুকিং

<table cellspacing="3">
    <thead>
        <tr style="font-weight: bold;">
            <td>Date</td>
            <td>Time</td>
            <td>Seats</td>      
            <td></td>              
            <td></td>
        </tr>
    </thead>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">13:00 - 14:00</td>
        <td style="width: 100px;">2</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/15">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/15">change</a></td>
    </tr>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">15:00 - 16:00</td>
        <td style="width: 100px;">3</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/10">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/10">change</a></td>
    </tr>  
</table>

কি সুন্দর হবে যদি আমি jQuery Dialogব্যবহারকারী বার্তাটি বুকিং বাতিল করতে চান কিনা তা জিজ্ঞাসা করে পপআপ ব্যবহার করতে পারি । আমি এটির কাজ করার চেষ্টা করছি তবে আমি কীভাবে jQuery ফাংশন তৈরি করব যা পরামিতিগুলি গ্রহণ করে যাতে আমি প্রতিস্থাপন করতে পারি তাতে আটকে থাকি

<a href="https://stackoverflow.com/Booking.aspx/Cancel/10">cancel</a>

সঙ্গে

<a href="#" onclick="ShowDialog(10)">cancel</a>।

ShowDialogফাংশন তারপর ডায়ালগ খুলতে হবে এবং যাতে তাহলে ব্যবহারকারী ক্লিক হ্যাঁ তারপর এটি সূরা পোস্ট করতে হবে এছাড়াও ডায়ালগে প্যারামিটারের 10 পাস:/Booking.aspx/Change/10

আমি এই জাতীয় স্ক্রিপ্টে jQuery ডায়ালগ তৈরি করেছি:

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        buttons: {
            "Yes": function() {
                alert("a Post to :/Booking.aspx/Cancel/10 would be so nice here instead of the alert");},
            "No": function() {$(this).dialog("close");}
        },
        modal: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    });
});

এবং কথোপকথন নিজেই:

   <div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div>

সুতরাং শেষ পর্যন্ত আমার প্রশ্নের: আমি কীভাবে এটি সম্পাদন করতে পারি? বা এটি করার আরও ভাল উপায় আছে?

Question 2

আপনি এটি এইভাবে করতে পারে:

<a>একটি ক্লাস সহ চিহ্ন চিহ্নিত করুন , "বাতিল" বলুন

শ্রেণি = "বাতিল" দিয়ে সমস্ত উপাদানগুলিতে অভিনয় করে ডায়ালগটি সেট আপ করুন:

$('a.cancel').click(function() { 
  var a = this; 
  $('#myDialog').dialog({
    buttons: {
      "Yes": function() {
         window.location = a.href; 
      }
    }
  }); 
  return false;
});

(প্লাস আপনার অন্যান্য বিকল্প)

এখানে মূল বিষয়গুলি হ'ল:

এটি যতটা সম্ভব নিরবচ্ছিন্ন করুন
আপনার যদি প্রয়োজন সমস্ত URL থাকে তবে আপনার ইতিমধ্যে এটি href এ রয়েছে।

তবে, আমি আপনাকে প্রস্তাব দিচ্ছি যে আপনি এটি একটি জিইটি এর পরিবর্তে একটি পোস্ট করুন, কারণ বাতিলকরণের ক্রিয়াটির পার্শ্ব প্রতিক্রিয়া রয়েছে এবং এটি জিইটি শব্দার্থবিজ্ঞানের সাথে সম্মতি দেয় না ...

Question 3

jQuery একটি পদ্ধতি সরবরাহ করে যা আপনার জন্য ডেটা সঞ্চয় করে, একটি ডামি অ্যাট্রিবিউট ব্যবহার করার প্রয়োজন নেই বা আপনার সমস্যার সমাধান পাওয়ার দরকার নেই।

ক্লিক ইভেন্ট বাঁধুন:

$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .data('link', this)  // The important part .data() method
        .dialog('open');
});

এবং আপনার কথোপকথন:

$("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height:200,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Delete': function() {
            $(this).dialog('close');
            var path = $(this).data('link').href; // Get the stored result
            $(location).attr('href', path);
        }
    }
});

Question 4

আপনি jQuery দিয়ে যা করছেন তার ক্ষেত্রে, আমার বোধগম্যতা হল আপনি নিজের মতো ফাংশনগুলি শৃঙ্খলাবদ্ধ করতে পারেন এবং অভ্যন্তরীণগুলিকে বাইরের দিক থেকে ভেরিয়েবলের অ্যাক্সেস থাকতে পারে। আপনার শোডায়ালগ (এক্স) ফাংশনটিতে এই অন্যান্য ফাংশন রয়েছে, আপনি তাদের মধ্যে এক্স ভেরিয়েবলটি পুনরায় ব্যবহার করতে পারেন এবং এটি বাহ্যিক ফাংশন থেকে প্যারামিটারের রেফারেন্স হিসাবে নেওয়া হবে।

আমি মশকের সাথে একমত, আপনার এই পোস্টগুলির ব্যবহারের জন্য সত্যই পলটি ব্যবহার করা উচিত যা <form>প্রতিটি উপাদানকে ঘিরে একটি ট্যাগ যুক্ত করবে , তবে একটি ইভেন্ট স্বয়ংক্রিয় স্ক্রিপ্ট বা সরঞ্জামটিকে বাতিল ইভেন্টটিকে খুব কম সম্ভাবনা তৈরি করবে। পরিবর্তনের ক্রিয়াটি যেমন রয়েছে তেমন থাকতে পারে কারণ এটি (সম্ভবত সম্ভবত একটি সম্পাদনা ফর্মটি খোলে)।

Question 5

আমি এখন আপনার পরামর্শগুলি চেষ্টা করে দেখেছি যে এটি দুর্দান্ত কাজ করে,

ডায়ালগ ডিভ সমানভাবে সরলরেখায় লেখা
P। পোষ্ট সংস্করণটির সাহায্যে এটি আসলে এমন পদে কাজ করে যা নিয়ামককে ডেকে আসে এবং প্রকৃতপক্ষে বুকিং বাতিল করে, তবে ডায়লগটি খোলা থাকে এবং পৃষ্ঠাটি রিফ্রেশ হয় না। উইন্ডোটির সাথে সংস্করণটি পান l

আমার "নতুন" স্ক্রিপ্টটি নীচে দেখুন:

$('a.cancel').click(function() {
        var a = this;               
        $("#dialog").dialog({
            autoOpen: false,
            buttons: {
                "Ja": function() {
                    $.post(a.href);                     
                },
                "Nej": function() { $(this).dialog("close"); }
            },
            modal: true,
            overlay: {
                opacity: 0.5,

            background: "black"
        }
    });
    $("#dialog").dialog('open');
    return false;
});

});

কোন সংকেত সনাক্ত করুন?

ওহ এবং আমার অ্যাকশন লিঙ্কটি এখন এর মতো দেখাচ্ছে:

<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new  { @class = "cancel" })%>

Question 6

আপনার কোডটি দেখার জন্য আপনাকে উইন্ডোটি বন্ধ করতে এবং পৃষ্ঠা আপডেট করার জন্য কার্যকারিতা যুক্ত করতে হবে। আপনার "হ্যাঁ" ফাংশনে আপনার লেখা উচিত:

        buttons: {
            "Ja": function() {
                $.post(a.href);
                $(a). // code to remove the table row
                $("#dialog").dialog("close");
            },
            "Nej": function() { $(this).dialog("close"); }
        },

সারণি সারিটি সরিয়ে দেওয়ার কোডটি মজাদার নয় তাই আমি আপনাকে মজাদার কৌতুকপূর্ণ বিশদটি মোকাবেলা করতে দেব, তবে মূলত, আপনাকে ডায়ালগটি পোস্ট করার পরে কী করা উচিত তা আপনাকে জানাতে হবে। এটি একটি স্মার্ট সংলাপ হতে পারে তবে এটির জন্য একরকম দিকনির্দেশ প্রয়োজন।

Question 7

বিভিন্ন ঘন্টা চেষ্টা / ধরার পরে অবশেষে আমি এই কার্যকরী উদাহরণটি নিয়ে এসেছি, নতুন সারি যুক্ত এজাক্স পোস্টে এটির কাজটি ফ্লাইয়ের টেবিলের সাথে সংযুক্ত হয়েছে (এটি আমার আসল সমস্যা ছিল):

থা যাদুটি লিঙ্কটি নিয়ে এলো:

<a href="#" onclick="removecompany(this);return false;" id="remove_13">remove</a>
<a href="#" onclick="removecompany(this);return false;" id="remove_14">remove</a>
<a href="#" onclick="removecompany(this);return false;" id="remove_15">remove</a>

এটি আজেক্স পোস্ট এবং জ্যাকুরি ডায়ালগের সাথে চূড়ান্ত কাজ করছে:

  <script type= "text/javascript">/*<![CDATA[*/
    var $k = jQuery.noConflict();  //this is for NO-CONFLICT with scriptaculous
     function removecompany(link){
        companyid = link.id.replace('remove_', '');
    $k("#removedialog").dialog({
                bgiframe: true,
                resizable: false,
                height:140,
                autoOpen:false,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: {
                    'Are you sure ?': function() {
                        $k(this).dialog('close');
                        alert(companyid);
                        $k.ajax({
                              type: "post",
                              url: "../ra/removecompany.php",
                              dataType: "json",
                              data: {
                                    'companyid' : companyid
                                    },
                              success: function(data) {
                                    //alert(data);
                                    if(data.success)
                                    {
                                        //alert('success'); 
                                        $k('#companynew'+companyid).remove();
                                    }
                          }
                        }); // End ajax method
                    },
                    Cancel: function() {
                        $k(this).dialog('close');
                    }
                }
            });
            $k("#removedialog").dialog('open'); 
            //return false;
     }
    /*]]>*/</script>
    <div id="removedialog" title="Remove a Company?">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        This company will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>

Question 8

এই কাজটি আমার জন্য:

<a href="#" onclick="sposta(100)">SPOSTA</a>

function sposta(id) {
        $("#sposta").data("id",id).dialog({
            autoOpen: true,
            modal: true,
            buttons: { "Sposta": function () { alert($(this).data('id')); } }
        });
    }

আপনি যখন ডায়ালগ সতর্কতা প্রদর্শন 100 তে "স্পোস্টা" এ ক্লিক করেন

Question 9

ঠিক আছে ডিভ ট্যাগ সহ প্রথম সংখ্যাটি যথেষ্ট সহজ ছিল: আমি style="display:none;"এটিতে একটি যুক্ত করেছি এবং তারপরে ডায়ালগটি দেখানোর আগে আমি এটি আমার সংলাপ স্ক্রিপ্টে যুক্ত করেছি:

$("#dialog").css("display", "inherit");

তবে পোস্ট সংস্করণের জন্য আমি এখনও ভাগ্যের বাইরে।

Question 10

আপনাকে কিছু ধারণা দেয় যাতে আপনি পুরোপুরি নিয়ন্ত্রণ করতে পারেন ডায়লগ, আপনি ডিফল্ট বোতামের বিকল্পগুলি এড়ানোর চেষ্টা করতে পারেন এবং নিজের # ডায়ালগ ডিভিউতে নিজের দ্বারা বোতাম যুক্ত করতে পারেন। আপনি ক্লিকের মতো লিঙ্কের কিছু ডামি গুণাবলীতেও ডেটা রাখতে পারেন। যখন আপনার প্রয়োজন হয় তখন কল অ্যাটর ("ডেটা")

Question 11

বরিস গুয়ারি দ্বারা অনুপ্রাণিত একটি সমাধান যা আমি নিযুক্ত করেছি তা দেখতে এরকম দেখাচ্ছে: লিঙ্ক:

<a href="#" class = "remove {id:15} " id = "mylink1" >This is my clickable link</a>

এটিতে একটি ক্রিয়া বাঁধুন:

$('.remove').live({
        click:function(){
            var data = $('#'+this.id).metadata();
            var id = data.id;
            var name = data.name;
            $('#dialog-delete')
                .data('id', id)
                .dialog('open');    
            return false;
        }
    });

এবং তারপরে আইডি ক্ষেত্রটি অ্যাক্সেস করতে (এই ক্ষেত্রে 15 এর মান সহ:

$('#dialog-delete').dialog({
    autoOpen: false,
    position:'top',
    width: 345,
    resizable: false,
    draggable: false,
    modal: true,
    buttons: {            
        Cancel: function() {

            $(this).dialog('close');
        },
        'Confirm delete': function() {
            var id = $(this).data('id');
            $.ajax({
                url:"http://example.com/system_admin/admin/delete/"+id,
                type:'POST',
                dataType: "json",
                data:{is_ajax:1},
                success:function(msg){

                }
            })
        }
    }
});

Question 12

আশা করি এটা কাজে লাগবে

$("#dialog-yesno").dialog({
    autoOpen: false,
    resizable: false,
    closeOnEscape: false,
    height:180,
    width:350,
    modal: true,
    show: "blind",
    open: function() {
        $(document).unbind('keydown.dialog-overlay');
        },
    buttons: {
        "Delete": function() {
            $(this).dialog("close");
            var dir = $(this).data('link').href;
            var arr=dir.split("-");
            delete(arr[1]);
        },
    "Cancel": function() {
        $(this).dialog("close");
        }
    }
});



<a href="product-002371" onclick="$( '#dialog-yesno' ).data('link', this).dialog( 'open' ); return false;">Delete</a>