কোনও ফর্মের মধ্যে একটি বোতাম ক্লিক করার ফলে পৃষ্ঠা রিফ্রেশ হয়

217

আমার কৌণিকের একটি ফর্ম আছে এতে দুটি বোতাম ট্যাগ রয়েছে। একটি বোতাম ফর্মটি জমা দেয় ng-click। অন্য বোতামটি নিখরচায় ব্যবহারের জন্য ng-click। যাইহোক, যখন এই দ্বিতীয় বোতামটি ক্লিক করা হয়, তখন কৌণিক জেএস একটি পৃষ্ঠা রিফ্রেশ ঘটায় যা একটি 404 ট্রিগার করে। আমি ফাংশনটিতে একটি ব্রেকপয়েন্ট রেখেছি এবং এটি আমার ফাংশনটিকে ট্রিগার করছে। আমি নিম্নলিখিতগুলির মধ্যে যদি কোনটি করি তবে এটি বন্ধ হয়ে যায়:

আমি যদি অপসারণ করি ng-clickতবে বোতামটি কোনও পৃষ্ঠা রিফ্রেশের কারণ হবে না।
যদি আমি ফাংশনে কোডটি মন্তব্য করি তবে এটি কোনও পৃষ্ঠা রিফ্রেশের কারণ নয়।
যদি আমি বোতাম ট্যাগটি একটি অ্যাঙ্কর ট্যাগ ( <a>) এর সাথে পরিবর্তন করি href=""তবে তা রিফ্রেশের কারণ নয়।

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

ফর্মটি এখানে:

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Password</label>
      <div class="controls">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
    </div>
  </fieldset>
</form>

নিয়ন্ত্রক পদ্ধতিটি এখানে:

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

javascript angularjs

— chubbsondubs
সূত্র

দেখুন কি এটি আপনার সমস্যা github.com/angular/angular.js/issues/1238 (দুর্ভাগ্যক্রমে, আমি গিথুবের কাছাকাছি আমার পথটি যথেষ্ট জানি না যে এই ফিক্সটি 1.0.1 প্রকাশে আছে কিনা) ।

— রাজকোক

আমি সেটিকে দেখেছি, তবে আমি অবস্থানটি পরিবর্তন করছি না তাই আমি মনে করি না এটি প্রয়োগ হয়। যদি না এই অন্যান্য বোতামটি কোনওভাবে এটি জমা দেওয়ার কারণ হয়ে থাকে তবে এটি জমা দেওয়ার ধরণ হিসাবে সংজ্ঞায়িত হয় না এবং যখন আমি এনজি-ক্লিকটি বন্ধ করি তখন বোতামটি ফর্মটি জমা দেয় না।

— chubbsondubs

আপনি এই সমস্যার একটি ওয়ার্কিং ডেমো সরবরাহ করতে পারেন এটি দুর্দান্ত হবে। সম্ভবত এটি দিয়ে শুরু হচ্ছে: কৌণিক Plnkr

— পিট বিডি

স্ট্যাকওভারফ্লো / ডাব্লু

— রায় ট্রুইলোভ

সদৃশ মনে হচ্ছে। stackoverflow.com/questions/16703215/...

— Vaibs

471

আপনার যদি ডাব্লু 3 সি স্পেসিফিকেশনটি একবার দেখে থাকে তবে মনে হবে যে স্পষ্টতই আপনি চেষ্টা করতে চাইলে আপনার বোতামের উপাদানগুলি type='button'যখন আপনি জমা দিতে চান না তখন সেটিকে চিহ্নিত করা উচিত ।

বিশেষভাবে খেয়াল করার বিষয়টি যেখানে এটি বলে

কোনও ধরণের বৈশিষ্ট্য নির্দিষ্ট না করে একটি বাটন উপাদান তার বোতাম উপাদান হিসাবে একই ধরণের প্রতিনিধিত্ব করে যার টাইপ বৈশিষ্ট্যটি "জমা দিতে" সেট করা হয়

— LOAS
সূত্র

4

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

— মাতেও ভেলেনিক

এটি আমার পরামর্শ দেয় যে আপনার সমস্যা জাভাস্ক্রিপ্টে আছে। আমার উত্তরটি যে সমস্যার সমাধান করছে তা হ'ল ডোম এবং ব্রাউজারের মধ্যে একটি বিষয়। কিছু বোতাম জাভাস্ক্রিপ্ট আপনার বোতাম ক্লিক হ্যান্ডেল সম্ভবত আপনি পুনরায় লোড কারণ। শুভ শিকার;)

— LOAS

আমি ঠিক এটিই খুঁজছিলাম। এটি আমার পৃষ্ঠায় অত্যন্ত বিরক্তিকর ছিল কারণ এটির কেবল ত্রুটিগুলি প্রদর্শন করা এবং জমা দেওয়ার কথা নয়।

— রিপার_উনিক 10

আমি আমার বোতামগুলি টাইপ = "বোতাম" দিয়ে চিহ্নিত করেছি এবং সমস্যাটিও রয়েছে। আমার এনজি-ক্লিক হ্যান্ডলারে আমার $ ইভেন্ট.স্টপপ্রপাগেশন () রয়েছে। আমি এটি সরিয়ে দিলে এটি পুনরায় লোড হয় না। যদিও আমার এটি দরকার কোনও পৃষ্ঠা কেন এটি পুনরায় লোডের কারণ হিসাবে কোনও ধারণা ?!

— felixfbecker

@ ফ্রেশফেলিসিও: যোগ করার চেষ্টা করুন $event.preventDefault(), যা আমার ক্ষেত্রে সহায়তা করেছে। তবে কেন আমার কোনও ব্যাখ্যা নেই: - \

— টিম বাথ

72

আপনি ডিফল্ট হ্যান্ডলারটিকে আটকাতে চেষ্টা করতে পারেন:

এইচটিএমএল:

<button ng-click="saveUser($event)">

JS:

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

— antage
সূত্র

নিস! এটা সত্যিই আমার দৃশ্যে আনা!

— রিচার্ড

2

এটি আমাদের জন্য কাজ করেছিল, যখন কোনও শেয়ারপয়েন্ট ফর্মের ভিতরে AngularJS ব্যবহার করা হয়। আমাকে "ইভেন্ট.স্টপপ্রপাগেশন ()" যুক্ত করতে হয়েছিল; পাশাপাশি যদিও।

— নিক দেমায়ো

19

ng-submit={expression}আপনার <form>ট্যাগটিতে আপনার গুনটি ঘোষণা করা উচিত ।

এনজিএস সাবমিট ডক্স থেকে http://docs.angularjs.org/api/ng.directive:ng সাবমিট

অনসামিত ইভেন্টগুলিতে বাইন্ডিং কৌণিক অভিব্যক্তি সক্ষম করে।

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

— শেন স্টিলওয়েল
সূত্র

3

এছাড়াও, নিশ্চিত করুন যে ফর্মটিতে আপনার 'অ্যাকশন' বৈশিষ্ট্য নেই: ফর্ম (ক্রিয়া = "/ লগইন", lng-submit = "লগইন ()") যেহেতু এটি এনজি-জমা সেট থাকা সত্ত্বেও পৃষ্ঠাটি রিফ্রেশ করবে ।

— jenso

একটি ফর্ম জমা দেওয়া এবং ডিফল্ট ক্রিয়া প্রতিরোধ করা ক্লায়েন্ট-সাইড কৌণিক অ্যাপ্লিকেশনগুলিতে ফর্মগুলির ভূমিকা শাস্ত্রীয় রাউন্ডট্রিপ অ্যাপ্লিকেশনগুলির চেয়ে আলাদা বলে ব্রাউজারের পক্ষে ফর্ম জমা দেওয়ার পূর্ণ পৃষ্ঠার পুনরায় লোডে অনুবাদ না করা বাঞ্ছনীয় যা সার্ভারে ডেটা প্রেরণ করে । পরিবর্তে কিছু জাভাস্ক্রিপ্ট যুক্তি প্রয়োগের নির্দিষ্ট উপায়ে ফর্ম জমা দেওয়ার জন্য ট্রিগার করা উচিত। এই কারণে, কৌণিক ডিফল্ট ক্রিয়া (সার্ভারের কাছে ফর্ম জমা) বাধা দেয় যদি না <for> উপাদানটির কোনও ক্রিয়া বৈশিষ্ট্য নির্দিষ্ট না থাকে specified - docs.angularjs.org/api/ng.directive:form

— Jignesh Gohel

এনজি-সাবমিট = {এক্সপ্রেশন with সহ আমার একটি ফর্ম এবং = "জমা দিন" টাইপের একটি বোতাম রয়েছে। বিবি 10 ব্যতীত ঠিক জরিমানার মতো কাজ করে। আমি যদি বিবি 10 কীবোর্ডের জমা ব্যবহার করি তবে পৃষ্ঠাটি রিফ্রেশ হবে। আমি যদি আমার ফর্মটিতে ঘোষিত বোতামটি ব্যবহার করি তবে এটি ঠিক আছে।

— মাইকেল

এটা আমার পক্ষে কাজ করছে না আমি দিকনির্দেশগুলি হুবহু অনুসরণ করেছি। পৃষ্ঠাটি এখনও পোস্ট করেছে

— মেফেক্ট

18

আমি ডিফল্ট আচরণ রোধ করতে নির্দেশ ব্যবহার করি:

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

এবং তারপরে, এইচটিএমএলে:

<button class="secondaryButton" prevent-default>Secondary action</button>

এই নির্দেশিকাটি <a>এবং অন্যান্য সমস্ত ট্যাগের সাথেও ব্যবহার করা যেতে পারে

— pleerock
সূত্র

+1 ধন্যবাদ! আপনার অ্যাক্সেস রয়েছে না তখন এটি কি সহায়ক <form>ব্যবহার করতে পারবেন না ট্যাগ এবং অত: পর ng-submitনির্দেশ।

— jackvsworld

হ্যাঁ এর জন্য ধন্যবাদ, তবে আমারও একটি নির্দেশে এনজি-ক্লিক বাতিল করতে হবে

— boi_echos

এটিও এনজি-জমা কলব্যাক ট্রিগার করা থেকে ফর্মকে বাধা দেয়, তাই না?

— ঝুরলাদ এস্ট্রেলা 16

5

আপনি রাখতে পারবেন না <button type="submit">, কিন্তু অ্যাট্রিবিউট সরাতে হবে action=""এর <form>।

— অ্যান্ডারসন ফেরেরিরা
সূত্র

2

আমি অবাক হয়েছি কেন কেউ সম্ভবত সবচেয়ে সহজ সমাধানটির প্রস্তাব দেয়নি:

একটি ব্যবহার করবেন না <form>

একজন <whatever ng-form>এই প্রোগ্রামটিতে একটি ভাল চাকরি করে এবং একটি HTML ফর্ম ছাড়া, কিছুই ব্রাউজার নিজে জমা দিতে হবে না। কৌণিক ব্যবহার করার সময় যা সঠিক আচরণ।

— maaartinus
সূত্র

ফর্ম ট্যাগ ছাড়াই ক্লিক ক্লিক করে কীভাবে ফর্মালিড প্রয়োগ করবেন?

— রিজওয়ান প্যাটেল

1

@ রিজওয়ানপ্যাটেল আমার ধারণা, আমি বুঝতে পারছি না তবে তবে ng-form=someFormআপনি $scope.someFormপেয়েছেন এবং এর একটি $validক্ষেত্র রয়েছে। সুতরাং আমি আমার যা যা প্রয়োজন তা পেয়েছি <button ng-disabled="!someForm.$valid">।

— মার্টিনাস

1

আপনার ফর্মটিতে ক্রিয়া যুক্ত করুন।

<form action="#">

— স্বপ্নিল পাটোয়া
সূত্র

1

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

এনজি-জমা দেওয়ার কোড অনুসারে

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

স্নিপেট প্রসারিত করুন

এটি ফর্মটিতে ইভেন্ট শ্রোতাদের জমা দেয়। ফর্ম.সুমিত () কল করে কল করার মাধ্যমে সাবমিট করা ইভেন্ট হ্যান্ডলারটি কল করা হবে না। এই ক্ষেত্রে, এনজি-জমা ডিফল্ট ক্রিয়াকে আটকাবে না, আপনাকে এনজি-সাবমিট হ্যান্ডলারটিতে নিজেকে ডিফাল্ট কল করতে হবে;

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

দেখুন কোনও লিঙ্ক থেকে জমা () ব্যবহার করে জমা দেওয়া ফর্ম অনসামিত হ্যান্ডলারের দ্বারা ধরা যাবে না

— user1577263
সূত্র

0

প্রথম বোতামটি ফর্মটি জমা দেয় এবং দ্বিতীয়টি তা দেয় না

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>

— আমায় কুলকারনী
সূত্র

0

শুধু যোগ FormsModuleমধ্যে importsঅ্যারে app.module.tsফাইল, এবং অ্যাড import { FormsModule } from '@angular/forms';এই ফাইলটি উপরের ... এই কাজ করবে।

— সাহিল শর্মা
সূত্র