সংরক্ষিত পরিবর্তনগুলি সনাক্ত করা হচ্ছে

Question 1

আমার এএসপি। নেট অ্যাপ্লিকেশনটিতে "রক্ষিত পরিবর্তনগুলি" প্রম্পটটি প্রয়োগ করার দরকার রয়েছে। যদি কোনও ব্যবহারকারী কোনও ওয়েব ফর্মের নিয়ন্ত্রণগুলি পরিবর্তন করে এবং সংরক্ষণের আগে নেভিগেট করার চেষ্টা করে, একটি প্রম্পট তাদের সতর্কতা অবলম্বন করবে যাতে তাদের সংরক্ষণ না করা পরিবর্তন রয়েছে এবং তাদের বর্তমান পৃষ্ঠায় বাতিল এবং থাকার বিকল্প প্রদান করবে। যদি ব্যবহারকারী কোনও নিয়ন্ত্রণকে স্পর্শ না করে তবে প্রম্পটটি প্রদর্শিত হবে না।

আদর্শভাবে আমি এটি জাভাস্ক্রিপ্টে প্রয়োগ করতে চাই, তবে আমি নিজের কোডটি রোলিংয়ের পথে নামার আগে, কি এটি অর্জনের জন্য কোনও বিদ্যমান ফ্রেমওয়ার্ক বা প্রস্তাবিত নকশার নিদর্শন রয়েছে? আদর্শভাবে আমি এমন কিছু চাই যা ন্যূনতম পরিবর্তন সহ একাধিক পৃষ্ঠায় সহজেই পুনরায় ব্যবহার করা যায়।

Question 2

JQuery ব্যবহার:

var _isDirty = false;
$("input[type='text']").change(function(){
  _isDirty = true;
});
// replicate for other input types and selects

প্রয়োজনীয় হিসাবে onunload/ onbeforeunloadপদ্ধতির সাথে একত্রিত করুন ।

মন্তব্যগুলি থেকে, নিম্নলিখিত নকল কোড ছাড়াই সমস্ত ইনপুট ক্ষেত্রগুলি উল্লেখ করেছে:

$(':input').change(function () {

ব্যবহার $(":input")সব ইনপুট, পাঠ্য এলাকা, নির্বাচন এবং বাটন উপাদানের বোঝায়।

Question 3

ধাঁধা এক টুকরা:

/**
 * Determines if a form is dirty by comparing the current value of each element
 * with its default value.
 *
 * @param {Form} form the form to be checked.
 * @return {Boolean} <code>true</code> if the form is dirty, <code>false</code>
 *                   otherwise.
 */
function formIsDirty(form) {
  for (var i = 0; i < form.elements.length; i++) {
    var element = form.elements[i];
    var type = element.type;
    if (type == "checkbox" || type == "radio") {
      if (element.checked != element.defaultChecked) {
        return true;
      }
    }
    else if (type == "hidden" || type == "password" ||
             type == "text" || type == "textarea") {
      if (element.value != element.defaultValue) {
        return true;
      }
    }
    else if (type == "select-one" || type == "select-multiple") {
      for (var j = 0; j < element.options.length; j++) {
        if (element.options[j].selected !=
            element.options[j].defaultSelected) {
          return true;
        }
      }
    }
  }
  return false;
}

এবং অন্যটি :

window.onbeforeunload = function(e) {
  e = e || window.event;  
  if (formIsDirty(document.forms["someForm"])) {
    // For IE and Firefox
    if (e) {
      e.returnValue = "You have unsaved changes.";
    }
    // For Safari
    return "You have unsaved changes.";
  }
};

এগুলি সমস্ত জড়িয়ে রাখুন, এবং আপনি কী পাবেন?

var confirmExitIfModified = (function() {
  function formIsDirty(form) {
    // ...as above
  }

  return function(form, message) {
    window.onbeforeunload = function(e) {
      e = e || window.event;
      if (formIsDirty(document.forms[form])) {
        // For IE and Firefox
        if (e) {
          e.returnValue = message;
        }
        // For Safari
        return message;
      }
    };
  };
})();

confirmExitIfModified("someForm", "You have unsaved changes.");

beforeunloadইভেন্ট LIBRARY_OF_CHOICEইভেন্টের নিবন্ধকরণটি ব্যবহার করার জন্য আপনি সম্ভবত ইভেন্ট হ্যান্ডলারের নিবন্ধকরণও পরিবর্তন করতে চাইবেন ।

Question 4

.Aspx পৃষ্ঠায়, ফর্ম তথ্যটি "নোংরা" কিনা তা জানাতে আপনার জাভাস্ক্রিপ্ট ফাংশন দরকার

<script language="javascript">
    var isDirty = false;

    function setDirty() {
        isDirty = true;
    }

    function checkSave() {
        var sSave;
        if (isDirty == true) {
            sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
            if (sSave == true) {
                document.getElementById('__EVENTTARGET').value = 'btnSubmit';
                document.getElementById('__EVENTARGUMENT').value = 'Click';  
                window.document.formName.submit();
            } else {
                 return true;
            }
        }
    }
</script>
<body class="StandardBody" onunload="checkSave()">

এবং কোডবিহাইডে, ইনপুট ক্ষেত্রগুলিতে ট্রিগার যুক্ত করুন পাশাপাশি জমা / বাতিল বোতামগুলিতে পুনরায় সেট করুন ...

btnSubmit.Attributes.Add("onclick", "isDirty = 0;");
btnCancel.Attributes.Add("onclick", "isDirty = 0;");
txtName.Attributes.Add("onchange", "setDirty();");
txtAddress.Attributes.Add("onchange", "setDirty();");
//etc..

Question 5

নিম্নলিখিত কোনও ব্রাউজারের অনবিতুন আনলোড ফাংশন এবং যেকোন অন্বেষণ ইভেন্ট ক্যাপচারের জন্য jquery ব্যবহার করে। আইটি পতাকাটি পুনরায় সেট করতে যে কোনও জমা বা রিসেট বোতাম অনুসন্ধান করে তা নির্দেশ করে যে পরিবর্তনগুলি ঘটেছে।

dataChanged = 0;     // global variable flags unsaved changes      

function bindForChange(){    
     $('input,checkbox,textarea,radio,select').bind('change',function(event) { dataChanged = 1})
     $(':reset,:submit').bind('click',function(event) { dataChanged = 0 })
}


function askConfirm(){  
    if (dataChanged){ 
        return "You have some unsaved changes.  Press OK to continue without saving." 
    }
}

window.onbeforeunload = askConfirm;
window.onload = bindForChange;

Question 6

প্রত্যুত্তোরের জন্য সবাইকে ধন্যবাদ। আমি JQuery এবং সুরক্ষা-ডেটা প্লাগ-ইন ব্যবহার করে একটি সমাধান প্রয়োগ করেছি । এটি আমাকে পৃষ্ঠার সমস্ত নিয়ন্ত্রণে স্বয়ংক্রিয়ভাবে মনিটরিং প্রয়োগ করতে দেয় apply

কয়েকটি ক্যাভেট রয়েছে তবে বিশেষ করে যখন এএসপি নিয়ে কাজ করে। নেট অ্যাপ্লিকেশন:

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

আশা করি এটি অন্য যে কোনও ব্যক্তির জন্য অনুরূপ কিছু বাস্তবায়ন করতে সহায়তা করবে।

Question 7

সাধারণ সমাধান প্রদত্ত পৃষ্ঠায় একাধিক ফর্মকে সমর্থন করে ( কেবলমাত্র আপনার প্রকল্পে অনুলিপি করুন এবং আটকান )

$(document).ready(function() {
    $('form :input').change(function() {
        $(this).closest('form').addClass('form-dirty');
    });

    $(window).bind('beforeunload', function() {
        if($('form:not(.ignore-changes).form-dirty').length > 0) {
            return 'You have unsaved changes, are you sure you want to discard them?';
        }
    });

    $('form').bind('submit',function() {
        $(this).closest('form').removeClass('form-dirty');
        return true;
    });
});

দ্রষ্টব্য: এই সমাধানটি অন্যের সমাধান থেকে একত্রিত করে একটি সাধারণ সংহত সমাধান তৈরি করে।

বৈশিষ্ট্য:

আপনার অ্যাপ্লিকেশনটিতে কেবল অনুলিপি করুন এবং আটকান।
একাধিক ফর্ম সমর্থন করে।
আপনি স্টাইল বা ক্রিয়াকলাপগুলিকে নোংরা ফর্ম তৈরি করতে পারেন, যেহেতু তাদের "ফর্ম-ময়লা" শ্রেণি রয়েছে।
আপনি 'উপেক্ষা-পরিবর্তন' ক্লাস যুক্ত করে কিছু ফর্ম বাদ দিতে পারেন।

Question 8

নিম্নলিখিত সমাধানটি প্রোটোটাইপের জন্য কাজ করে (এফএফ, আই 6 এবং সাফারিতে পরীক্ষিত)। এটি একটি জেনেরিক ফর্ম পর্যবেক্ষক ব্যবহার করে (যা আগুনের সূত্র: পরিবর্তিত হয় যখন ফর্মের কোনও ক্ষেত্র পরিবর্তিত হয়), যা আপনি অন্যান্য স্টাফের জন্যও ব্যবহার করতে পারেন।

/* use this function to announce changes from your own scripts/event handlers.
 * Example: onClick="makeDirty($(this).up('form'));"
 */
function makeDirty(form) {
    form.fire("form:changed");
}

function handleChange(form, event) {
    makeDirty(form);
}

/* generic form observer, ensure that form:changed is being fired whenever
 * a field is being changed in that particular for
 */
function setupFormChangeObserver(form) {
    var handler = handleChange.curry(form);

    form.getElements().each(function (element) {
        element.observe("change", handler);
    });
}

/* installs a form protector to a form marked with class 'protectForm' */
function setupProtectForm() {
    var form = $$("form.protectForm").first();

    /* abort if no form */
    if (!form) return;

    setupFormChangeObserver(form);

    var dirty = false;
    form.observe("form:changed", function(event) {
        dirty = true;
    });

    /* submitting the form makes the form clean again */
    form.observe("submit", function(event) {
        dirty = false;
    });

    /* unfortunatly a propper event handler doesn't appear to work with IE and Safari */
    window.onbeforeunload = function(event) {
        if (dirty) {
            return "There are unsaved changes, they will be lost if you leave now.";
        }
    };
}

document.observe("dom:loaded", setupProtectForm);

Question 9

এখানে একটি জাভাস্ক্রিপ্ট / jquery সমাধান যা সহজ। এটি ব্যবহারকারীর দ্বারা "পূর্বাভাস" হিসাবে আসে, এটি অ্যাপ্লিকেশন স্বাচ্ছন্দ্যের জন্য কোনও ফাংশনের মধ্যে আবদ্ধ হয়, এবং এটি জমা দেওয়ার ক্ষেত্রে ভুলভ্রান্ত হয় না। শুধু ফাংশনটি কল করুন এবং আপনার ফর্মের আইডি পাস করুন।

পৃষ্ঠাটি লোড হয়ে যাওয়ার পরে এই ফাংশনটি ফর্মটি সিরিয়াল করে দেয় এবং ব্যবহারকারীর পৃষ্ঠাটি ছাড়ার আগে আবার। দুটি ফর্মের রাজ্যগুলি পৃথক হলে প্রম্পটটি দেখানো হবে।

এটি ব্যবহার করে দেখুন: http://jsfiddle.net/skibulk/Ydt7Y/

function formUnloadPrompt(formSelector) {
    var formA = $(formSelector).serialize(), formB, formSubmit = false;

    // Detect Form Submit
    $(formSelector).submit( function(){
        formSubmit = true;
    });

    // Handle Form Unload    
    window.onbeforeunload = function(){
        if (formSubmit) return;
        formB = $(formSelector).serialize();
        if (formA != formB) return "Your changes have not been saved.";
    };
}

$(function(){
    formUnloadPrompt('form');
});

Question 10

আমি সম্প্রতি একটি ওপেন সোর্স jQuery প্লাগইনটিতে অবদান রেখেছি যার নাম নোংরা ফোর্মস ।

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

https://github.com/snikch/jquery.dirtyforms

Question 11

JQuery ব্যবহার করে ফর্ম পরিবর্তনগুলি সনাক্ত করা খুব সহজ:

var formInitVal = $('#formId').serialize(); // detect form init value after form is displayed

// check for form changes
if ($('#formId').serialize() != formInitVal) {
    // show confirmation alert
}

Question 12

আমি উপরের স্লেসের পরামর্শে প্রসারিত করেছি, বেশিরভাগ সম্পাদনযোগ্য উপাদানগুলিও অন্তর্ভুক্ত করতে এবং নির্দিষ্ট উপাদানগুলি (এখানে "এসআর অনুসন্ধান" নামে একটি সিএসএস শৈলী সহ) বাদ দিয়ে নোংরা পতাকা তৈরি হতে পারে।

<script type="text/javascript">
        var _isDirty = false;
        $(document).ready(function () {            

            // Set exclude CSS class on radio-button list elements
            $('table.srSearch input:radio').addClass("srSearch");

            $("input[type='text'],input[type='radio'],select,textarea").not(".srSearch").change(function () {
                _isDirty = true;
            });
        });

        $(window).bind('beforeunload', function () {
            if (_isDirty) {
                return 'You have unsaved changes.';
            }
        });

Question 13

      var unsaved = false;
    $(":input").change(function () {         
        unsaved = true;
    });

    function unloadPage() {         
        if (unsaved) {             
          alert("You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?");
        }
    }

উইন্ডো.অনবফরুনড্রোড = আনলোডপেজ;

Question 14

ফ্লাইগিক্স.জেএস প্লাগইন এটি হ'ল fleegix.form.diff(http://js.fleegix.org/plugins/form/diff ) এর জন্য তৈরি করা হয়েছিল। লোড ব্যবহার করে ফর্মের প্রাথমিক অবস্থাটি সিরিয়াল করুন fleegix.form.toObject(http://js.fleegix.org/ref#fleegix.form.toObject ) এবং এটিকে একটি ভেরিয়েবলে সংরক্ষণ করুন, তারপরে fleegix.form.diffআনলোডটি ব্যবহার করে বর্তমান অবস্থার সাথে তুলনা করুন। পাই হিসাবে সহজ।

Question 15

একটি পদ্ধতি , অ্যারেগুলি ব্যবহার করে ভেরিয়েবলগুলি ধরে রাখতে যাতে পরিবর্তনগুলি ট্র্যাক করা যায়।

পরিবর্তনগুলি সনাক্ত করার জন্য এখানে একটি খুব সহজ পদ্ধতি , তবে বাকীটি মার্জিত নয়।

ফারফেচড ব্লগ থেকে অন্য একটি পদ্ধতি যা মোটামুটি সহজ এবং ছোট :

<body onLoad="lookForChanges()" onBeforeUnload="return warnOfUnsavedChanges()">
<form>
<select name=a multiple>
 <option value=1>1
 <option value=2>2
 <option value=3>3
</select>
<input name=b value=123>
<input type=submit>
</form>

<script>
var changed = 0;
function recordChange() {
 changed = 1;
}
function recordChangeIfChangeKey(myevent) {
 if (myevent.which && !myevent.ctrlKey && !myevent.ctrlKey)
  recordChange(myevent);
}
function ignoreChange() {
 changed = 0;
}
function lookForChanges() {
 var origfunc;
 for (i = 0; i < document.forms.length; i++) {
  for (j = 0; j < document.forms[i].elements.length; j++) {
   var formField=document.forms[i].elements[j];
   var formFieldType=formField.type.toLowerCase();
   if (formFieldType == 'checkbox' || formFieldType == 'radio') {
    addHandler(formField, 'click', recordChange);
   } else if (formFieldType == 'text' || formFieldType == 'textarea') {
    if (formField.attachEvent) {
     addHandler(formField, 'keypress', recordChange);
    } else {
     addHandler(formField, 'keypress', recordChangeIfChangeKey);
    }
   } else if (formFieldType == 'select-multiple' || formFieldType == 'select-one') {
    addHandler(formField, 'change', recordChange);
   }
  }
  addHandler(document.forms[i], 'submit', ignoreChange);
 }
}
function warnOfUnsavedChanges() {
 if (changed) {
  if ("event" in window) //ie
   event.returnValue = 'You have unsaved changes on this page, which will be discarded if you leave now. Click "Cancel" in order to save them first.';
  else //netscape
   return false;
 }
}
function addHandler(target, eventName, handler) {
 if (target.attachEvent) {
  target.attachEvent('on'+eventName, handler);
 } else {
  target.addEventListener(eventName, handler, false);
 }
}
</script>

Question 16

আইই ডকুমেন্টে.ডিয়ার সঠিকভাবে কাজ করবে না এটি ইনপুটটির মান আপডেট করবে।

সুতরাং আমাদের ডকুমেন্টের ভিতরে লোড ইভেন্টটি বাঁধতে হবে IE প্রস্তুত ফাংশন যা আই ব্রাউজারের জন্যও পরিচালনা করবে।

নীচে আপনার ডকুমেন্টের ভিতরে থাকা কোডটি দেওয়া আছে ফাংশন প্রস্তুত করুন।

 $(document).ready(function () {
   $(window).bind("load", function () { 
    $("input, select").change(function () {});
   });
});