logo
down
shadow

Angular toggle not working after submit


Angular toggle not working after submit

By : reshma
Date : November 18 2020, 01:01 AM
Hope that helps The ng-repeat directive creates a new scope for contact element it iterates. Let's call this the contact scope. Because the Edit button is within the contact scope, clicking it will create an editing property on the contact scope.
When you use the ng-controller directive to create a FormController, you are creating a child scope, let's call it the form scope, whose prototype is the contact scope. This is why you can access properties from a parent scope directly from a child scope, and why the ng-show directive initially works in your code.
code :
<section ng-controller="ContactController">
<ul class="list-group">
<li class="list-group-item" ng-repeat="contact in contacts">
    <h3>
        {{ contact.id }}
        <em class="pull-right">{{contact.fname }} {{ contact.lname }} <button ng-click="editing = !editing">Edit</button></em>
        <form ng-show="$parent.editing" ng-submit="$parent.editing = false" ng-controller="FormController">
            <input type="hidden" ng-model="contact.id">
            <label>First Name:</label>
            <input type="text" ng-model="contact.fname" placeholder="first name" ng-required/>
            <label>Last Name:</label>
            <input type="text" ng-model="contact.lname" placeholder="last name" ng-required/>
            <br/>
            <button class="btn" ng-click="Save();" type="submit">Save</button>
            <button class="btn" ng-click="$parent.editing = false">Cancel</button>
        </form>
    </h3>
</li>
</ul>
</section>


Share : facebook icon twitter icon
submit form without page refresh - click function toggle() not working after submit

submit form without page refresh - click function toggle() not working after submit


By : user3851582
Date : March 29 2020, 07:55 AM
Hope this helps Ok, I have found the error, you forgot to close the divs correctly. (at results div and pinnumber )
It should work:
code :
echo'<strong>Printer PIN:</strong>&nbsp;<a id="pinlink"><img src="images/edit.png" width="18px" height="18px" title="Edit you PIN number"></a>

<div id="results"></div>

<div id="pinnumber">'.$learner->idnumber.'</div>                 

<div id="pincontent" style="display:none;">
<form name="myform" id="myform" method="POST" enctype="multipart/form-data">  
<input type="text" name="idnumber" id="idnumber" placeholder="Enter your new PIN" size="20" value=""/>
<input name="id" type="hidden" value="'.$learner->id.'" />      
<input type="submit" name="submit" value="Update"> 
</form>
<div>';


$(document).ready(function(){

    $("#pinlink").click(function () {
    $("#pincontent").toggle();
    });

    $("#myform").validate({
        debug: false,
        rules: {
            idnumber: "required",
        },
        messages: {
            idnumber: "Please enter your PIN",
        },
        submitHandler: function(form) {
            $("#pincontent").hide();
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});
Mobile Angular Ui toggle not working

Mobile Angular Ui toggle not working


By : Giuseppe Cerciello
Date : March 29 2020, 07:55 AM
like below fixes the issue I am trying to use mobile angular ui toggle and toggleable to make a side navigation. , seems like the manuals were not up to date. solved :)
Angular ui-layout toggle not working

Angular ui-layout toggle not working


By : alamin
Date : March 29 2020, 07:55 AM
Does that help Seems there's a bug in ui-layout so it won't collapse the right hand side or bottom panels.
Here's the updated Plunkr with a fix UI-Layout Collapse Fix
code :
prevContainer.uncollapsedSize = null;
Two way binding on angular material slide toggle not working as expected (Angular 4)

Two way binding on angular material slide toggle not working as expected (Angular 4)


By : madLoMax
Date : March 29 2020, 07:55 AM
hope this fix your issue I have implemented the angular material slide-toggle that all seems to work except for some reason it isn't binding the value to the relevant variable for some reason? , Just update your html to
code :
[(ngModel)]="filteringSchedule"
Angular ng-click not working with data-toggle="toggle"

Angular ng-click not working with data-toggle="toggle"


By : user5467820
Date : March 29 2020, 07:55 AM
Hope this helps The reason it doesn't work is that Bootstrap Toggle is not made to work with Angular. Changing the DOM in any way that isn't through Angular, eg through jQuery like Toggle does, will cause conflicts with Angular's control of the DOM, and indeed it will not register DOM changes that don't happen through Angular.
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org