ফর্ম জমা দেওয়ার পরে কীভাবে একটি জকিউরি কলব্যাক করবেন?

Question

দূরবর্তী = সত্য সহ আমার একটি সাধারণ ফর্ম রয়েছে।

এই ফর্মটি আসলে একটি এইচটিএমএল ডায়লগে রয়েছে যা জমা বোতামটি ক্লিক করার সাথে সাথে বন্ধ হয়ে যায়।

ফর্মটি সফলভাবে জমা দেওয়ার পরে এখন আমাকে মূল HTML পৃষ্ঠায় কিছু পরিবর্তন করা দরকার।

আমি jQuery ব্যবহার করে এটি চেষ্টা করেছিলাম। তবে এটি নিশ্চিত করে না যে ফর্ম জমা দেওয়ার প্রতিক্রিয়ার কিছু ফর্ম পরে কাজগুলি সম্পাদিত হবে।

$("#myform").submit(function(event) {

// do the task here ..

});

আমি কীভাবে কলব্যাক সংযুক্ত করব, যাতে আমার কোডটি ফর্মটি সফলভাবে জমা দেওয়ার পরেই কার্যকর করা যায়? ফর্মটিতে কিছু .success বা। কমপ্লিট কলব্যাক যোগ করার কোনও উপায় আছে কি?

Comments

আপনি আজাক্স ব্যবহার করবেন না কেন? JQuery Ajax ফাংশন সহ আপনি এই জাতীয় কলব্যাকগুলি সংজ্ঞায়িত করতে পারেন।

— ডেভিডবুজাটো

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

— পেরে

@ পেয়ার ভবিষ্যতে এখানে সত্য নয়।

— স্পার্ক

Answer 1

আমি সবেমাত্র এটি করেছি -

 $("#myform").bind('ajax:complete', function() {

         // tasks to do 


   });

এবং জিনিস পুরোপুরি কাজ করে।

আরও নির্দিষ্ট বিশদের জন্য এই এপিআই ডকুমেন্টেশনটি দেখুন ।

Comments

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

— সাল

এবং যদি জমা হয় <form>সাধারণত? (আমি আজাক্সের সাথে নয়) এর প্রথম যুক্তিতে আমি কী রাখতে পারি .bind()? সম্পাদনা: ভাল, আমি অনুমান click। এনভিএম, দুঃখিত। : পি

— ডব্লিউ_

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

— ডিএম্যাক ধ্বংসকারী

"JQuery 1.8 হিসাবে, .ajaxComplete () পদ্ধতিটি কেবলমাত্র নথির সাথে সংযুক্ত করা উচিত"

— মেরিডেথ

আমাকে কোন ফর্ম ব্যবহার করে, একটি বোতামের সাহায্যে কাজ করে না, তবে বোতামটি জাভাস্ক্রিপ্টকে কল করে $ ('# formFile')। জমা দিন ();

— ড্যানিয়েল

Answer 2

নির্ভরযোগ্যভাবে কাজ করার জন্য আমি এক নম্বর আপডোভেট সমাধানটি পেলাম না, তবে এই কাজগুলি পেয়েছি। এটির প্রয়োজন আছে কি না তা নিশ্চিত নয় তবে আমার ট্যাগে কোনও ক্রিয়া বা পদ্ধতির বৈশিষ্ট্য নেই, যা নিশ্চিত করে যে পোস্টটি ax .ajax ফাংশন দ্বারা পরিচালিত হয় এবং আপনাকে কলব্যাক বিকল্প দেয়।

<form id="form">
...
<button type="submit"></button>
</form>

<script>
$(document).ready(function() {
  $("#form_selector").submit(function() {

    $.ajax({
     type: "POST",
      url: "form_handler.php",
      data: $(this).serialize(),
      success: function() {
        // callback code here
       }
    })

  })
})
</script>

Comments

+1 টি। এই উত্তরের মূলটি হ'ল $(this).serialize()লাইন। এটি আপনাকে jQuery.ajax()পটভূমিতে বিদ্যমান ফর্মটি জমা দিতে ব্যবহার করতে দেয় , তারপরে সার্ভার থেকে উত্তরটি ধরুন এবং এটি দিয়ে কিছু করুন।

— ওয়ারেন ইয়ং

সেমিকোলন ছাড়াই জাভাস্ক্রিপ্ট ... কিছু মানুষ কেবল বিশ্বের জ্বলন্ত দেখতে চান। আপনার সমাধানটি যদিও কাজ করে, তাই ধন্যবাদ :)

— স্ফূর্তি

মনে রাখবেন যে .serializeআপনার পোস্ট করা অনুরোধে ফাইল ইনপুট অন্তর্ভুক্ত নয়। আপনি যদি <<9

— ব্রাইচিন্স

ব্যবহারের জন্য প্রপস $(this).serialize(), এটি আমার সমস্যার সমাধান!

— gnclmorais

আপনার এইচটিএমএলে 'ফর্ম_স্লেক্টর' কী আপনি জেএসে উল্লেখ করেছেন?

— কেভিন মেরেডিথ

Answer 3

আপনাকে সার্ভারে একটি এজেএক্স কল দিয়ে ম্যানুয়ালি জিনিসগুলি করতে হবে। এটির জন্য আপনাকে ফর্মটি ওভাররাইডও করতে হবে।

তবে চিন্তা করবেন না, এটি কেকের টুকরো। আপনি কীভাবে আপনার ফর্মের সাথে কাজ করতে যাবেন সে সম্পর্কে এখানে একটি সংক্ষিপ্তসার রয়েছে:

• ডিফল্ট জমা দেওয়ার ক্রিয়াকে ওভাররাইড করুন (ইভেন্ট অবজেক্টে পাস করার জন্য ধন্যবাদ, যার একটি preventDefaultপদ্ধতি রয়েছে)
• ফর্ম থেকে সমস্ত প্রয়োজনীয় মান ধরুন
• একটি HTTP অনুরোধ বন্ধ
• অনুরোধের প্রতিক্রিয়া পরিচালনা করুন

প্রথমত, আপনাকে ফর্মটি জমা দিতে হবে এভাবে ক্রিয়া জমা দিন:

$("#myform").submit(function(event) {
    // Cancels the form's submit action.
    event.preventDefault();
});

এবং তারপরে, ডেটার মানটি ধরুন। আসুন ধরে নেওয়া যাক আপনার একটি পাঠ্য বাক্স রয়েছে।

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();
});

এবং তারপরে একটি অনুরোধ বন্ধ করুন। আসুন ধরে নেওয়া যাক এটি একটি পোষ্ট অনুরোধ।

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();

    // I like to use defers :)
    deferred = $.post("http://somewhere.com", { val: val });

    deferred.success(function () {
        // Do your stuff.
    });

    deferred.error(function () {
        // Handle any errors here.
    });
});

এবং এটি সম্পর্কে এটি করা উচিত।

দ্রষ্টব্য 2: ফর্মটির ডেটা পার্স করার জন্য, আপনি একটি প্লাগইন ব্যবহার করা বাঞ্ছনীয় । এটি আপনার জীবনকে সত্যই সহজ করে তুলবে, পাশাপাশি একটি দুর্দান্ত শব্দার্থক সরবরাহ করবে যা প্রকৃত ফর্ম জমা দেওয়ার ক্রিয়াকে নকল করে।

দ্রষ্টব্য 2: আপনাকে ডিফার্স ব্যবহার করতে হবে না। এটি কেবল একটি ব্যক্তিগত পছন্দ। আপনি সমানভাবে নিম্নলিখিতগুলি করতে পারেন, এবং এটিও কার্যকর হওয়া উচিত।

$.post("http://somewhere.com", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});

Comments

দুর্দান্ত নমুনা। ফাইল আপলোড (মাল্টি পার্ট / ফর্ম-ডেটা) দিয়ে একই জিনিসটি কীভাবে করবেন ???

— অ্যাডাম ডাব্লু

Answer 4

এমভিসির জন্য এখানে আরও সহজ পদ্ধতির ছিল। আপনাকে এজ্যাক্স ফর্মটি ব্যবহার করতে হবে এবং এজ্যাক্সপশন সেট করতে হবে

@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" }))
{ 
  ... html for form
}

এখানে জমা দেওয়ার কোডটি রয়েছে, এটি নথির প্রস্তুত বিভাগে রয়েছে এবং ফর্মটি জমা দেওয়ার জন্য বোতামটির অনক্লিক ইভেন্টটি সংযুক্ত করে

$("#btnSubmitFileUpload").click(function(e){
        e.preventDefault();
        $("#frmUploadTrainingMedia").submit();
});

এখানে আজব্যাকশনগুলিতে উল্লেখ করা কলব্যাক

function displayUploadMediaMsg(d){
    var rslt = $.parseJSON(d.responseText);
    if (rslt.statusCode == 200){
        $().toastmessage("showSuccessToast", rslt.status);
    }
    else{
        $().toastmessage("showErrorToast", rslt.status);
    }
}

এমভিসির জন্য নিয়ামক পদ্ধতিতে এটি দেখতে এটির মতো লাগে

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // there is only one file  ... do something with it
        }
        return Json(new
        {
            statusCode = 200,
            status = "File uploaded",
            file = "",
        }, "text/html");
    }
    else
    {
        return Json(new
        {
            statusCode = 400,
            status = "Unable to upload file",
            file = "",
        }, "text/html");
    }
}

Comments

এই কোডগুলি। নেট কোডগুলি এবং প্রশ্নে এটি কখনই নির্দিষ্ট করে না।

— মিঃমিনস

এটি সত্যিই ভোট দেওয়ার পক্ষে ভাল কারণ নয়। উত্তরটি কাজ করে এবং কোনও নেট। বিকাশকারীকে একই সমস্যার মুখোমুখি হতে পারে help

— এডিপারসন

আমি এই ধারণাটি পছন্দ করি তবে কিছু কারণে কলব্যাকটি গুলি চালানো হচ্ছে না। কন্ট্রোলার পদ্ধতিতে কি কোনও জসনআরসাল্ট ফিরে আসতে হবে? আমার নিয়ামক পদ্ধতিটি বর্তমানে একটি অ্যাকশন ফলাফল প্রদান করে।

— ম্যাটটিএম

Answer 5

আপনার বর্ণনার মতো একটি কলব্যাক-ফাংশন রয়েছে বলে আমি বিশ্বাস করি না।

এখানে সাধারণ যা হ'ল পিএইচপি এর মতো কিছু সার্ভার-সাইড ভাষা ব্যবহার করে পরিবর্তনগুলি করা।

পিএইচপি-তে আপনি উদাহরণস্বরূপ আপনার ফর্ম থেকে একটি লুকানো ক্ষেত্র আনতে এবং এটি উপস্থিত থাকলে কিছু পরিবর্তন করতে পারেন।

পিএইচপি:

  $someHiddenVar = $_POST["hidden_field"];
    if (!empty($someHiddenVar)) {
        // do something 
    }

জ্যাকুরিতে এটি সম্পর্কে একটি উপায় হ'ল অ্যাজাক্স ব্যবহার করা। আপনি জমা দিতে শুনতে, তার ডিফল্ট আচরণ বাতিল করতে মিথ্যা ফিরে আসতে পারেন এবং এর পরিবর্তে jQuery.post () ব্যবহার করতে পারেন। jQuery.post একটি সাফল্য কলব্যাক আছে।

$.post("test.php", $("#testform").serialize(), function(data) {
  $('.result').html(data);
});

http://api.jquery.com/jQuery.post/

Answer 6

ফর্মটি জমা দেওয়ার আগে ফর্মের "জমা" হ্যান্ডলারের কল করা হয়। ফর্ম জমা দেওয়ার পরে কল করার জন্য কোনও হ্যান্ডলার আছে কিনা তা আমি জানি না। প্রথাগত নন-জাভাস্ক্রিপ্ট অর্থে ফর্ম জমা দেওয়ার ফলে পৃষ্ঠাটি পুনরায় লোড হবে।

Comments

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

— কিটসু .eb

Answer 7

$("#formid").ajaxForm({ success: function(){ //to do after submit } });

Comments

কি ajaxForm()একটি তৃতীয় পক্ষের উপাদান আপনার ইনস্টল করা? এটি jQuery এর একটি আদর্শ অংশ নয়।

— ওয়ারেন ইয়ং