I'm trying on mail client tutorial on learn.knockoutjs.com. I want to add a "back button" in mail detail block. But that button is auto triggered.
my codes
<div class="viewMail" data-bind="with: chosenMailData">
<button data-bind="click: alert('derp')">derp</button>
<div class="mailInfo">
<h1 data-bind="text: subject"></h1>
<p><label>From</label>: <span data-bind="text: from"></span></p>
<p><label>To</label>: <span data-bind="text: to"></span></p>
<p><label>Date</label>: <span data-bind="text: date"></span></p>
</div>
<p class="message" data-bind="html: messageContent" />
</div>
when i set chosenMailData viewMail div is show. But same time browser alert "derp". I want to when i click button, browser alert at that time. what is wrong?
The alert code will be executed when the with binding renders the content.
Either wrap it in a function or move it to a function in the view model
<button data-bind="click: function() { alert('derp'); }">derp</button>
Related
I made a whole li element clickable by making use of anchor tag as such:
<li *ngIf="notification.payload.table">
<a class="d-flex justify-content-between" (click)="updateTableNotificationReadStatus(notification)">
<div class="d-flex flex-column">
<span style="font-size: 1.1rem">
<strong>{{notification.payload.username}}</strong> requested access for table - {{notification.payload.table}}.
<span style="font-size: 0.9rem">{{notification.payload.time}}</span>
</span>
<span *ngIf="notification.payload.note"class="note">
<span class="noteLabel">Note</span>
<span> This is a note attached to it</span>
</span>
</div>
<span>
<fa-icon [icon]="faClose" class="ml-auto" (click)="deleteNotification(notification)"></fa-icon>
</span>
</a>
</li>
When I click on the fa-icon, the notification is getting deleted but I am also getting redirected to another page because of the function in which I doesn't want?
How can I make the close icon clickable without getting redirected while being on the same element?
It seems to me that you need something similar to this question AngularJS ng-click stopPropagation
To stop propagating the event
$event.stopPropagation();
I achieved that using:
deleteNotification(e, notification) {
e.stopPropagation();
}
On my page are repeating triggers, which should open (change the visibility) a specific form on click. On some pages, there are multiple triggers and forms.
The HTML markup is like this:
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form
</div>
</div>
I'm trying to work on a script, where on click on #form-trigger-x the resonating form (#form-x) get's displayed. That's not the problem, but I want to automate this, so if a page has one form it works and also if it has 10 forms it works, without the need to hardcode every number in the script.
I tried an approach with .each and $(this) but it opened all forms at once instead of the form that should be triggered.
First you need to add click event on all the a tag where id starts with form-trigger with
$("a[id^='form-trigger']").click(function(){
And then you just need to get the next of clicked a tag and play with its display property or whatever you want like
$(this).next()
$("a[id^='form-trigger']").click(function(){
$(this).next().slideToggle();
})
$(".btn").click(function(){
$(this).closest("div").slideToggle();
})
#form-2{
display:none;
}
#form-1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form 1
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form 2
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>
</div>
</div>
Here is how I approached this. You don't need to target them with specific ID value, Instead, use classes because the basic structure of each container is same it would work no matter how many different forms you got.
When you click on the anchor tag, my script would look for closest form-container class and find the showform class in that dom element and show it.
I have added the code snippet below as an example.
Hope this helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="form-container-1" class="form-container">
<a onclick="showform(this);" id="form-trigger-1">Open Form</a>
<div id="form-1" class="showform hide">
content of form
</div>
</div>
<div id="form-container-2" class="form-container">
<a onclick="showform(this);" id="form-trigger-3">Open Form</a>
<div id="form-2" class="showform hide">
content of form
</div>
</div>
<script>
function showform(caller){
$(caller).closest(".form-container").find(".showform").removeClass('hide');
}
</script>
I am currently developing a website using ASP.NET and C#. In this website I display 2 sets of Image Banners, the first one is filled with my C# code and stays still (does not change).
<div class="divArticleCar">
<div id="OwlDemo" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
</div>
<div class="customNavigation ">
<a class="btn prev "><span class="glyphicon glyphicon-menu-left"></span><br/></a>
<a class="btn next "><span class="glyphicon glyphicon-menu-right"></span><br/></a>
</div>
</div>
The second uses a connection to an external API from an image Database. I have a text input and a button so when user searches for a key word, the second banner updates with new images. I'm using AJAX <asp:UpdatePanel> tag to update the image result.
<asp:UpdatePanel runat="server" id="UpdatePanel2" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="btnSearchImage" EventName="ServerClick" />
</Triggers>
<ContentTemplate>
<div class="divArticleCar">
<div id="OwlDemo2" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
</div>
<div class="customNavigation CN2">
<a class="btn prev2 ">
<span class="glyphicon glyphicon-menu-left"></span> <br>
</a>
<a class="btn next2 ">
<span class="glyphicon glyphicon-menu-right"></span> <br>
</a>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
The problem is when the Images in the ContentTemplate are updated. They are just not shown, the banner disappears. I have checked my background code, C# is getting the API results and it is adding the new images, they are just not visible. The Banners are managed with 2 Javascript files.
First: carrusel.js
Second: owlCarousel.js
Does someone know why the images are disappearing??
Every javascript function that is called when the page is done loading needs to be triggered again when you use an UpdatePanel.
So lets say you have something like this somewhere to build the carousel:
$(document).ready(function () {
buildCarousel();
});
You need to add some code to make sure buildCarousel() is triggered again after partial postback.
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
buildCarousel();
});
<a href="#">
<div class="col-md-4 promo-item item-1">
<h3>
Unleash
</h3>
</div>
</a>
I got a template online, the above (with css/bootstrap?), is an image that is a link. I want to change it so that instead of a link (href), it's a clickable button.
My plan is for the button to use JavaScript to change some of the content on the page, basing it off the JavaScript below;
<button type="button" onclick="document.getElementById('demo').innerHTML='Hello JavaScript!' ">
Click Me!
</button>
So how do I change this href into a button?
in bootstrap you just add the button classes and it will look like a button
<a class='btn btn-default' ...
However, there is no reason you can't just copy the onclick attribute to the anchor tag (or "href" as you keep calling it).
From your code in the comments:
<div id='demo'></div>
<a onclick="document.getElementById('demo').innerHTML='Hello JavaScript!'; return false; "> Click Me!> <div class="col-md-4 promo-item item-1"> <h3> Unleash </h3> </div> </a>
A twitter-like website in Chinese. When I type a message and click a submit "button", a new entry is created. But I can't figure out the event listener for the submit "button".
I studied the source code, there is no form at all, and the "button" is actually an 发布 element.
So I think the website is using ajax to do the actual submission. I use google chrome to inspect the submit "button", but there is no event listener at all! So how could the submission be done?
Here is some relevant html code:
<div class="publishBox-ft clearfix">
<div class="fl">
<div class="uploadPic">
<em class="icon-uploadPic"></em>
<a class="link-lb js-link">图片</a>
</div>
<div class="insertFace">
<em class="icon-face"></em>
<a class="link-lb js-link">表情</a>
</div>
<div class="topic-trigger">
<em class="icon-topic"></em>
<a class="link-lb js-link">话题</a>
</div>
<div class="insertVideo video-trigger">
<em class="icon-video"></em>
<a class="link-lb js-link">视频</a>
</div>
<div class="insertPoi">
<em class="icon-lbsB"></em>
<span class="sendinfo-lbsbox link-lb">
<span class="sendinfo-showPoi">
<a class="sendinfo-currentPoi sendinfo-changePoi js-link poi-trigger" data-poi-id="null" data-poiname="发布地点">地点</a>
<a title="删除位置信息" class="js-link sendinfo-closePoi default-close-icon"></a>
</span>
</span>
</div>
</div>
<div class="fr">
发布
<span class="js-wordCounter word-counter sendinfoTip">还可以输<span class="char-constantia">152</span>字</span>
</div>
</div>
If somebody want to go the acutal website to study, here is the url and username and password:
http://t.163.com/4729009840
username: fatieji_test#163.com
password: 1a2b3c4d
Be aware: the website is in Chinese.
The click event is bound at runtime in the JavaScript file.
The relevant parts to search for are t.sendBtnElem=$(t.wrapperElem.$(".sendinfo-btn")[0]) and t.sendBtnElem.addEvent("click", ...
This is done using Javascript code that adds a click handler at runtime.