किसी फ़ॉर्म के भीतर बटन क्लिक करने से पृष्ठ रीफ्रेश होता है

187

मेरे पास कोणीय में एक फॉर्म है जिसमें इसमें दो बटन टैग हैं। एक बटन ng-click पर फ़ॉर्म सबमिट करता है। दूसरा बटन ng-click का उपयोग करके नेविगेशन के लिए पूरी तरह से है। हालांकि, जब यह दूसरा बटन क्लिक किया जाता है, तो AngularJS एक पेज रीफ्रेश कर रहा है जो 404 को ट्रिगर करता है। मैंने फ़ंक्शन में ब्रेकपॉइंट गिरा दिया है और यह मेरे फ़ंक्शन को ट्रिगर कर रहा है। मैं निम्न में से कोई ऐसा करते हैं तो बंद हो जाता है:किसी फ़ॉर्म के भीतर बटन क्लिक करने से पृष्ठ रीफ्रेश होता है

अगर मैं ng-click निकालने के लिए, बटन एक पृष्ठ ताज़ा कारण नहीं है।
यदि मैं फ़ंक्शन में कोड को टिप्पणी करता हूं, तो यह पृष्ठ को रीफ्रेश नहीं करता है।
यदि मैं href="" के साथ बटन टैग को एंकर टैग (<a>) में बदलता हूं, तो यह रीफ्रेश नहीं करता है।

उत्तरार्द्ध सबसे सरल कामकाज की तरह लगता है, लेकिन AngularJS मेरे फ़ंक्शन के बाद कोई कोड क्यों चला रहा है जो पृष्ठ को फिर से लोड करने का कारण बनता है? एक बग की तरह लगता है।

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

स्रोत

2012-09-07 chubbsondubs

कर देखें कि कहीं इससे आपकी समस्या का https://github.com/angular/angular.js/issues/1238 (दुर्भाग्य से, मैं GitHub के आसपास मेरे रास्ते पता नहीं है पर्याप्त होना करने के लिए है यह तय करने में सक्षम है कि यह फ़िक्स 1.0.1 रिलीज़ में है या नहीं)। –

मैंने उसे देखा, लेकिन मैं स्थान नहीं बदल रहा हूं इसलिए मुझे नहीं लगता कि यह लागू होता है। जब तक यह अन्य बटन किसी भी तरह से सबमिट नहीं कर रहा है, लेकिन इसे सबमिट प्रकार के रूप में परिभाषित नहीं किया गया है, और जब मैं एनजी-क्लिक करता हूं तो बटन फॉर्म सबमिट नहीं करता है। – chubbsondubs

यह बहुत अच्छा होगा कि आप इस समस्या का एक कार्यशील डेमो प्रदान कर सकते हैं। शायद इसके साथ शुरू: [कोणीय Plnkr] (http://plnkr.co/edit/gist:3662656) –

399

आप W3C specification पर एक नजर है, तो ऐसा लगता है कि प्रतीत होता है कोशिश करने की स्पष्ट बात यह है कि जब आप नहीं चाहते हैं तो अपने बटन तत्वों को type='button' के साथ चिह्नित करना है जमा करने के लिए एम।

विशेष रूप से ध्यान देने योग्य बात यह है कि जहां यह कहते हैं

कोई प्रकार विशेषता वाला बटन तत्व "सबमिट करें" के लिए

स्रोत

2013-03-09 18:12:05 LOAS

मुझे ओपी के समान समस्या है लेकिन मेरे बटन में निर्दिष्ट प्रकार है - और फिर भी ताज़ा कारणों पर क्लिक करें। कोई अन्य जगह जहां मैं देख सकता था? –

यह मुझे बताता है कि आपकी समस्या जावास्क्रिप्ट में है। मेरे उत्तर को संबोधित करने में समस्या डोम और ब्राउज़र के बीच एक मामला है। आपके बटन क्लिक को संभालने वाली कुछ जावास्क्रिप्ट संभवतः आपके द्वारा देखे जाने वाले पुनः लोड होने का कारण बनती है। हैप्पी शिकार;) – LOAS

यह वही है जो मैं ढूंढ रहा था। यह मेरे पृष्ठ पर बहुत परेशान था क्योंकि यह केवल त्रुटियों को दिखाने और जमा नहीं करना था। –

आप अपने <form> टैग में विशेषता ng-submit={expression} घोषित करना चाहिए:

<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>

यहाँ नियंत्रक विधि है:

यहाँ रूप है।

ngSubmit डॉक्स http://docs.angularjs.org/api/ng.directive:ngSubmit

से ऑनसबमिट घटनाओं के लिए कोणीय भाव बंधन सक्षम करता है।

इसके अतिरिक्त यह डिफ़ॉल्ट क्रिया को रोकता है (जिसका अर्थ है फॉर्म के लिए सर्वर को अनुरोध भेजना और वर्तमान पृष्ठ को पुनः लोड करना)।

एचटीएमएल:

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

js:

स्रोत

2012-09-07 20:08:14

साथ ही, सुनिश्चित करें कि आपके पास फॉर्म पर 'एक्शन' प्रॉपर्टी सेट नहीं है: फॉर्म (एक्शन = "/ लॉगिन", lng-submit = "login()") चूंकि यह पृष्ठ को ताज़ा कर देगा, भले ही आपके पास एनजी है सेट सबमिट करें। – jenso

एक फॉर्म सबमिट करना और डिफ़ॉल्ट कार्रवाई को रोकना चूंकि क्लाइंट-साइड में फॉर्मों की भूमिका क्लासिकल राउंडट्रिप ऐप्स की तुलना में अलग है, ब्राउज़र के लिए यह वांछनीय है कि फॉर्म सबमिशन को पूर्ण पृष्ठ रीलोड में अनुवाद न करें जो डेटा भेजता है सर्वर के लिए। इसके बजाए कुछ विशिष्ट जावास्क्रिप्ट तर्क को एप्लिकेशन विशिष्ट तरीके से फ़ॉर्म सबमिशन को संभालने के लिए ट्रिगर किया जाना चाहिए। इस कारण से, कोणीय डिफ़ॉल्ट क्रिया (सर्वर को फॉर्म जमा करने) को रोकता है जब तक कि

मेरे पास ng-submit = {expression} और type = "submit" वाला एक बटन है। बीबी 10 को छोड़कर बस ठीक काम करता है। अगर मैं बीबी 10 कीबोर्ड के सबमिट का उपयोग करता हूं तो पेज रीफ्रेश होगा। अगर मैं अपने फॉर्म में घोषित बटन का उपयोग करता हूं तो यह ठीक काम करता है। – Michael

आप डिफ़ॉल्ट प्रबंधक को रोकने के लिए कोशिश कर सकते हैं

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

स्रोत

2012-09-10 16:02:51 antage

अच्छा पोस्ट करता है! यह वास्तव में मेरे परिदृश्य में लाया! – Richard

यह हमारे लिए काम करता है, जब एक SharePoint रूप के अंदर AngularJS का उपयोग करते हैं। मुझे "event.stopPropagation();" जोड़ना पड़ा हालांकि साथ ही। –

अपने प्रकार विशेषता निर्धारित के साथ एक बटन तत्व के रूप में एक ही बात का प्रतिनिधित्व करता है

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

और फिर, html में:

मैं तो डिफ़ॉल्ट रूप से रोकने के लिए निर्देश का उपयोग

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

यह निर्देश भी <a> के साथ प्रयोग किया जा सकता है और अन्य सभी टैग

स्रोत

2014-02-05 12:50:23 pleerock

+1 धन्यवाद! यह तब उपयोगी होता है जब आपके पास ' 'टैग तक पहुंच नहीं है और इसलिए' ng-submit' निर्देश का उपयोग नहीं कर सकता है। – jackvsworld

इस के लिए धन्यवाद, लेकिन मुझे –

निर्देश में एनजी-क्लिक को रद्द करने की भी आवश्यकता है, यह फ़ॉर्म को ng-submit कॉलबैक को ट्रिगर करने से रोकता है, है ना? –

पहले बटन प्रपत्र सबमिट करता है और दूसरा नहीं

<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>

स्रोत

2015-07-02 09:13:24

आप <button type="submit"> रख सकते है, लेकिन की विशेषता action="" निकालना होगा <form>।

स्रोत

2016-02-07 06:25:49

मुझे आश्चर्य है कि क्यों कोई संभवतः सबसे सरल समाधान प्रस्तावित:

का उपयोग नहीं करते एक <form>

एक <whatever ng-form> IMHO एक बेहतर काम और एक HTML फ़ॉर्म बिना करता है, कुछ भी नहीं प्रस्तुत किया जाना है ब्राउज़र द्वारा ही। कोणीय का उपयोग करते समय वास्तव में सही व्यवहार कौन सा है।

स्रोत

2016-03-23 00:03:53 maaartinus

फ़ॉर्म फॉर्म के बिना फॉर्म टैग पर क्लिक करने के लिए कैसे लागू करें? –

@RizwanPatel मुझे लगता है, मुझे समझ में नहीं आता है, लेकिन 'ng-form = someForm' के साथ, आपको' $ scope.someForm' मिलता है और इसमें '$ मान्य' फ़ील्ड है। तो मुझे बस मुझे <<बटन ng-disabled = "के साथ चाहिए! कुछफॉर्म। $ मान्य"> '। – maaartinus

अपने फॉर्म में कार्रवाई जोड़ें।

<form action="#">

स्रोत

2017-05-24 19:15:04

इस उत्तर सीधे प्रश्न से संबंधित नहीं किया जा सकता। यह केवल तब होता है जब आप स्क्रिप्ट का उपयोग करके फॉर्म जमा करते हैं।

ng-submit code

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

 
    event.preventDefault(); 
 
}; 
 

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

के अनुसार यह फार्म पर घटना सबमिट श्रोता जोड़ता है। लेकिन सबमिट करें जब सबमिट हैंडलर को form.submit() को कॉल करके शुरू नहीं किया जाता है। इस मामले में, ng-submit डिफ़ॉल्ट कार्रवाई को नहीं रोकेगा, आपको ng-submit हैंडलर में खुद को रोकें डीफॉल्ट को कॉल करना होगा;

एक यथोचित निश्चित जवाब, HTML फ़ॉर्म सबमिशन एल्गोरिथ्म आइटम 5 कहा गया है कि एक फार्म के केवल एक घटना प्रस्तुत विधि प्रस्तुत (बुला जिसका अर्थ है कि यह केवल डिस्पैच एक घटना प्रस्तुत करता है, तो प्रस्तुत द्वारा अगर यह सबमिट नहीं किया गया था, डिस्पैच उपलब्ध कराने के लिए एक बटन या अन्य अंतर्निहित विधि से, उदाहरण के लिए इनपुट दबाकर इनपुट इनपुट टेक्स्ट तत्व पर है)।

देखें Form submitted using submit() from a link cannot be caught by onsubmit handler

स्रोत

2017-12-09 12:04:12 user1577263

किसी फ़ॉर्म के भीतर बटन क्लिक करने से पृष्ठ रीफ्रेश होता है

उत्तर

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