div click event automatically getting fired on page load - javascript

I want to create html page which has series of ( e.g.div has list of employee details ). When user click on div I want to navigate to another page. Please have a look at this.
Problem is click event of div is getting fired when I am loading page for the first time.
How can I avoid unnecessary click events those are getting fired during page load event?
Below is my html code
<div data-bind="click: clickMe('ok1')">
<h1>Emplyee details</h1>
<p>This is test</p>
</div>
<div data-bind="click: clickMe('ok2')">
<h1>Emplyee details</h1>
<p>This is test</p>
</div>
var ViewModel = function(){
var self = this;
self.clickMe = function(url){
//This function is automatically getting called
//when page loads.
alert(url);
}
}
ko.applyBindings(new ViewModel());
Regards,
Hemant

You need to pass a function to the click handler rather than the result of the click function.
Doing clickMe() fires the method and returns the result to the handler.
One way to do what you want is to wrap the function call in an anonymous function as so:
function(){ clickMe('params'); }
So you get:
<div data-bind="click: function(){ clickMe('ok1'); }">
Alternatively you can use the bind function on your clickMe method to pass the params you want:
clickMe.bind($data, "param1")
So you get:
<div data-bind="click: clickMe.bind($data, 'param1')">

Related

JavaScript one() event handling chaining causes strange errors

I need your help. I'm currently writing some code to handle a modal behavior like clicking on buttons. For catching multiple events once, I already posted this question:
JavaScript event handling code get's called multiple times
There it said to use the jQuery .one() function to only catch one click when opening the popup and clicking one button multiple times. This works great for one button but when I use two buttons, I came up with another error.
First I've changed my event handling to accept multiple events:
jQuery(document).ready(function($) {
$('button').click(function() {
openConfirmationRemodal().one({
confirmation: function() {
console.log('Confirmation');
},
cancellation: function() {
console.log('Cancellation');
}
});
});
});
When I click on a button, my popup opens with two buttons:
When I click now the Nein button, the popup closes and the console logs Cancellation. When I open the popup again now and click the Ja button, Confirmation get's logged but twice. I really don't understand this and how to fix this..
If I do this the opposite way, the error is the same but just in a different order:
Here you have a working example. Somehow the action in die example get's triggered twice (initially). This is different to the normal progress in my browser but I think this depends on the snippet functionality:
jQuery(document).ready(function($) {
$('button').click(function() {
openConfirmationRemodal().one({
confirmation: function() {
console.log('Confirmation');
},
cancellation: function() {
console.log('Cancellation');
}
});
});
});
function openConfirmationRemodal() {
let remodal = $(`[data-remodal-id=test]`);
remodal.remodal().open();
return remodal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal#1.1.1/src/remodal.js"></script>
<button>Open Pop-Up</button>
<div class="remodal" data-remodal-id="test">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
The issue is because you re-bind the events every time you click the 'Open' button. To fix this define the modal and events just once, when the page loads, and then call open() on the modal when the button is clicked. Try this:
let $remodal = $(`[data-remodal-id=test]`);
let modal = $remodal.remodal();
$remodal.on({
confirmation: function() {
console.log('Confirmation');
},
cancellation: function() {
console.log('Cancellation');
}
});
jQuery($ => {
$('button').click(function() {
modal.open();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal#1.1.1/src/remodal.js"></script>
<button>Open Pop-Up</button>
<div class="remodal" data-remodal-id="test">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

How do I get click event of model form button?

On my django web app, I have a webpage and when a button is clicked a modal form is opened. On this form there are a few fields and a save button. When the save button is pressed, I want to do something, like printing an alert. Here is what I tried:
Model form code:
<div class="container-content">
<div class="infor-experience col-lg-2 more_info">
{% if request.user|isEmployer %}
<div class="add-to-list">{% include "layout/addtolistmodal.html" %}</div>
<div class="connect-now bottom">{% include "layout/bidmodal.html" %}</div>
{% endif %}
<!-- more code below here -->
Javascript block in same HTML file as modal above:
<script type="text/javascript">
// Add to short list handler
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
</script>
Basically, what I want to do is when the user clicks save on the add-to-list modal, print the alert "TEST".
From my understanding the reason its not working is because it cannot find '.add-to-list' but what I should use instead?
Just attach your click event to already present element which seems to be div.infor-experience, since your modal html gets appended after DOM load. Also, make sure your script renders in web browser if you have provided any conditions for them to render.
$('.infor-experience').on('click', '.submit', function(e) {
alert("TEST");
})
It might be that positioning of your script. At the time of its execution the DOM may not be ready or exist yet.
You could wrap your DOM related codes like so:
$(document).ready(init);
function init(){
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
}
Try this instead
$(document).ready(function () {
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
});
});
you should add the code under $(document).ready() so that it waits for whole DOM to load and then attaches the method instead doing so before loading of DOM.

How to use JS in Framework7?

I create an application with framework7. Now I try to execute a javascript in my page-content, but it doesn't execute.
<div class="pages">
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
<script type="text/javascript">
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>
</div>
How can I run this javascript code ?
UPDATE
The page is loaded from an other HTML-Page.
Use Callbacks (onPageInit) to execute code
I had never heard of Framework7 before this, but after taking a look at the docs, I don't believe you are going to be able to use Javascript this way.
It would appear that for JS events, you have to scope the event inside a Framework7 constructor:
var myApp = new Framework7();
var $$ = Dom7;
$$('.alert-text').on('click', function () {
myApp.alert('Here goes alert text');
});
Of course the above example is taken directly from the F7 documentation, and is dependent on a click event, but you may be able to try out the alert event as a method of myApp and see if that works for you.
var myApp = new Framework7();
//Add callback function that will be executed when Page with data-page="about" attribute will be initialized
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});
// Option 2. Using live 'page:init' event handlers for each page (not recommended)
$$(document).on('page:init', '.page[data-page="dashboard"]', function (e) {
console.log('dashboard loaded with page:init');
createGraph();
});
Above worked me well.. although following didnt work.
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});
If you written any javascript code inside index.html file, Put that code in
<head>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</head> like this, which is defined in index.html file
Or ,if you want write JS code for some particular html file ,
Do like this
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
</div>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>

How to call button in Partial View from jQuery script (MVC)

I'm writing application who has few forms. In main view I have for example:
<h2>Index</h2>
<button id="bt1">Click from main view</button>
<div id="partial">
</div>
and then i call btn1 from script:
$("#bt1").click(function () {
alert("btn1click");
});
and also render the partial view:
$("#partial").load("/Home/Home");
and then call the second button:
Partial view:
<h4>Partial view</h4>
<button id="btn2">Click from partial view</button>
Script:
$("#btn2").click(function () {
alert("btn2click");
});
but this action do nothing. I have no idea why. Can you help me?
How can I call the button from script?
I'm using ASP.NET MVC but for some reasons I can't use RenderPartial method.
Use event delegation like
$(document).on('click', '#btn2', function () {
alert("btn2click");
});
Basically, regardless of when #btn2 is loaded, this event should fire because it was delegated from the document. This is saying for all current and future #btn2 elements, execute this click handler

angularjs bindings won't show unless i make a GET call

here is my situation:
I have an "edit" screen in my app. To load this screen, i am passing in an object through a window.postMessage event. I am listening for this postMessage event in my controller for the edit page and assigning the passed-in object to a property on my scope called "patient". Then, in the edit page markup, i am using ng-repeat to bind to an array on my "patient" object. The problem is, the page does not update to show the received data.
Here is what my event handler code looks like in my controller:
window.addEventListener("message", function(event) {
if (event.data.view === 'edit') {
$scope.patient = event.data.patient;
}
});
Here is what the markup looks like to bind to the patient object:
<div ng-repeat="dataItem in patient.fields | filter:{display:true}">
<div class="row" >
<div class="col-xs-12">
{{dataItem.displayName}}:
</div>
</div>
<div class="row" >
<div class="col-xs-12">
<input type="text" style="width: 100%;" ng-model="dataItem.value" /><br />
</div>
</div>
</div>
The data loads correctly and the $scope.patient property is getting fully populated, but the screen does not update. However, if I add a simple 'GET' call using RESTAngular, and don't even use the result of the call, the page updates correctly. Why is that and what can I do to get the page to update without the meaningless RESTAngular call? Here is the code that works with the RESTAngular call:
window.addEventListener("message", function(event) {
if (event.data.view === 'edit') {
patient = PatientRestangular.one('patients', event.data.patientId);
//this is a hack
//the data will not load on the edit screen without a call to 'get()'
patient.get().then(function(){
$scope.patient = event.data.patient;
});
}
});
Try $apply:
$scope.$apply(function(){
$scope.patient = event.data.patient;
});

Categories