Calling my own function during with onClick - asp.net

How do I call a user-define function such as this one using the onClick attribute of a input button? More specifically what special steps must I take in JQuery and what would the HTML markup look like? Thanks
function simClick(keyCode) {
var e = jQuery.Event("keypress");
e.keyCode = 8;
$(document).trigger(e);
}
<input type="button" ID="delBtn" class="calcBtn" value="Del" onclick="???????" />

HTML
<input type="button" ID="delBtn" class="calcBtn" value="Del" />
Javascript in separate file
// When the DOM is ready
$(function() {
// Function that is executed w keypress or button click
doThis = function() {
// Stuff to do
}
// To do when element with ID delBtn is clicked
$("#delBtn").click(function() {
// Stuff to do when input is clicked
doThis();
});
// To do when key is pressed
$(document).keydown(function(event) {
// Stuff to do when key is pressed
// Can check which key was pressed here.
var code = (event.keyCode ? event.keyCode : event.which);
if(code == 8) { //Enter keycode
doThis();
}
});
});
There are many ways to attach a handler to when that button is clicked. Take a look at jQuery selectors.
You could also use the attribute equals selector
$("input[value='Del']")...... // For the input with a value of Del
I'm not sure what you quoted JS has to do with the input button, since it looks like you're trying to work with a keypress instead of a click in that function.... But the above jQuery is how you capture a click on that input button.
Take a look at, "Which key was pressed?"

Related

KnockoutJS - How to reassign URL when checkbox is checked vs. unchecked

I want to assign an URL in a function everytime a checkbox is checked. But I would also like the URL to be reassigned its initial value when the checkBox is unchecked. I was able to create the code below from the following thread, but the URL is not reassigned when I uncheck the box. Sorry I am new to KnockoutJS and to JavaScript in general.
HTML
<input type="checkbox" name="myCheckBox" data-bind="checked:isChecked, click: setUrl">Search Supplier<br>
JS
searchShippingCodesUrl = '/Parteners/Search';
...
...
ischecked: ko.observable(false),
setUrl: function () {
searchShippingCodesUrl = '/Suppliers/Search';
return true;
},
Thank you for your time.
Only use the click binding on a checkbox if you need to differentiate whether the checkbox changed state by click vs. by internal setting. The checked binding captures the state of the view for you, so you can then work with it in your viewmodel. To take action when it changes, you subscribe to the observable (I borrow the variables here from dfperry's example):
ischecked.subscribe(function (newValue) {
searchShippingCodesUrl = newValue ? supplierSearch : partnerSearch;
});
You need to check against isChecked in your setUrl function to get that toggle effect:
var partnerSearch = '/Partners/Search',
supplierSearch = '/Suppliers/Search';
searchShippingCodesUrl = partnerSearch;
...
ischecked: ko.observable(false),
setUrl: function () {
searchShippingCodesUrl = (ischecked() ? supplierSearch : partnerSearch);
return true;
}

Mouse middle button does not work

i have a gridview which contains a linkbutton with a ID LnkCourseName
i have requirement that on a click of Middle button of a mouse a new tab should open.
to check the which button of a mouse got clicked, i used a javascript function as :
<script type="text/javascript">
function buttonalert(event) {
var button;
if (event.which == null)
button = (event.button < 2) ? leftclickclear() :
((event.button == 4) ? middleclickclear() : rightclickclear());
else
button = (event.which < 2) ? leftclickclear() :
((event.which == 2) ? middleclickclear() : rightclickclear());
dont(event);
}
function leftclickclear() {
$('#<%=HdUrl.ClientID %>').val("left");
}
function rightclickclear() {
$('#<%=HdUrl.ClientID %>').val("right");
}
function middleclickclear() {
$('#<%=HdUrl.ClientID %>').val("middle");
}
function dont(event) {
if (event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
}
</script>
But on a press of a middle button i get an error
javascript:__doPostBack('dnn$ctr538$ViewTC_TakeAClass$GrdCourseDetail$ctl02$LnkCourseName','')
on a new tab url. Thanks for assistance.
This should be standard behaviour for any reasonable browser, and isn't really an ASP.NET or script issue - the problem is that you're using a link button, which will do a postback just like a button (i.e. <input type=submit>), and it's not a link as in an default a element.
If your links are really just that, and are not expected to post back to the server to execute some logic, and instead just specifies a URL to link to, then use a HyperLink control instead.

Ipad KeyPad not displaying for the textbox that is placed inside jquery draggable div

I have a application that has jquery draggable div in it.
I have placed four text fields inside the draggable div to get input from user.
Aspx:
<div id="divAdd" runat="server">
<input id="txtCode" placeholder="Location Code" maxlength="20"
type="text" runat="server" />
<input id="txtName" placeholder="Location Code" maxlength="20"
type="text" runat="server" />
...
</div>
<div>
Javascript:
$("#divAdd").draggable({ cursor: 'move', containment: '#divmap',
drag: function () {
fnHandleMove();
}
});
I cant place the cursor in those textfield in IPAD by tapping on it. However Desktop version works fine.
If i comment out that javascript part, i am able to place the cursor and keypad shows.
Is this bug with jquery UI-draggable or i am doing anything wrong?
Apart from JqueryUI.js i use JqueryTouchPunch.js and JSPlumb.js in the application.
Any help will be appreciated.
OK here's a solution if your textfield whatever HTML element is, isn't focusing,scrolling, selecting words, moving text cursor around the text and whatever different scenarios might come then you may override the jquery.ui.touch.punch.js script. I assume that your element isn't the draggable one but probably a child of it as my case was.
Put a class on your html element, for example class="useDefault".
Then go to the script file and find that part:
...
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
....
As you can probably see event.preventDefault(); assures that jquery.ui.touch.punch.js
overrides the default behaviors of the browser. To prevent that for our particular class node, make the following modifications:
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
event.stopPropagation();
} else {
event.preventDefault();
}
This solution is tested with webkit browsers only and jQuery UI Touch Punch 0.2.2 release.
Hope that quick solution helps, BR
A variation from kidwon idea:
In the same method, same part:
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
replace with:
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) return;
if (simulatedType == 'mouseup') {
var elem = $(event.originalEvent.changedTouches[0].target);
if (elem.is("input") || elem.is("textarea")) elem.focus();
else event.preventDefault();
} else event.preventDefault();
Hope it helps.

How to bind jquery event before event in tag executes

<input type="button" onclick="executes second" />
$('input').click(function() { //this first }}
p.s. onclick="executes second" - cannot be removed (its __doPostBack)
try ...
$(document).ready(function(){
$("input").removeAttr("onclick");
$("input").click(function(){
// do first
my_first_function();
// do second
my_second_function();
return false;
});
});
Couldn't you just do something like:
< input type="button" onclick="do_something();" />
function do_something() {
// this first
// then second?
}}
My guess is the inline onclick handler cannot be removed as it has been output by ASP.NET. To solve this problem you need to override ASP.NET's doPostBack method to inject your function before the postback takes place. Try including the following function in your page somewhere and then use it to add your event handler:
Update: Just re-read and realised this answer slightly misses the mark - it basically allows you to fire events prior to postback, but not necessarily attached to the button's onclick handler.
var addToPostBack = function(func) {
var old__doPostBack = __doPostBack;
if (typeof __doPostBack != 'function') {
__doPostBack = func;
} else {
__doPostBack = function() {
func();
old__doPostBack.apply(this, arguments);
}
}
};
...
<input type="button" id="btn" onclick="..." />
...
addToPostBack(function() { alert("You're posting back!"); });
If you use jQuery the is no need to put onclick into the HTML:
$('input').click(function() {
//this first
something();
// this last
playSound();
});
Edit:
Just Remove the onclick attribute with jQuery:
$('input').removeAttr("onclick");
you could put it inside document ready or just attach it to your call
$('input').removeAttr("onclick").click(function() {...});

how to enable an css property for the ajax tab panel using javascript

i am using asp.net ajax tab container[ which has 2 tab panel]
under each tab panel i have an div tag. now by default.i have my Activetabindex="0"
now i need to enable css property for the div tag using javscript so that there is no post back happening. i doing like this css property for the tab panel 1 is not getting applied
this is my script what i doing. if i do the same thing in code behind for the ta selected index change it works. but thatcause an post back.
now i need t o do it my javscript only
OnClientActiveTabChanged="PanelClick"
<script type="text/javascript" language="javascript">
function PanelClick(Sender, e) {
debugger;
var CurrentTab = $find('<%=Tab1.ClientID%>');
if( Sender._activeTabIndex==0) {
debugger
document.getElementById('<%=mycustomscroll2.ClientID%>').className = '';
document.getElementById('<%=mycustomscroll2.ClientID%>').Enabled = false;
document.getElementById('<%=mycustomscroll.ClientID%>').className = 'flexcroll';
}
if (Sender._activeTabIndex == 1) {
debugger
document.getElementById('<%=mycustomscroll.ClientID%>').className = '';
document.getElementById('<%=mycustomscroll.ClientID%>').Enabled= false ;
document.getElementById('<%=mycustomscroll2.ClientID%>').className = 'flexcroll';
}
}
</script>
so how to i enable my css property for the div using javascript for the tab panel
anyhelp would be great
thank you
Here is a javascript function which will sort of do what you want:
function PanelClick(Sender, e) {
var scroll1 = $get('<%=mycustomscroll.ClientID%>');
var scroll2 = $get('<%=mycustomscroll2.ClientID%>');
if(Sender._activeTabIndex == 0) {
scroll1.setAttribute('class', 'flexcroll');
scroll2.setAttribute('class', '');
} else if(Sender._activeTabIndex == 1) {
scroll1.setAttribute('class', '');
scroll2.setAttribute('class', 'flexcroll');
}
}
There really is no such thing as "enabled" in HTML and JavaScript. HTML has a "disabled" attribute, but it only applies to these elements: button, input, optgroup, option, select and textarea. It is used like so:
<input type="text" name="txtSomething" id="txtSomething" disabled="disabled">
and in JavaScript, similar to setting the class attribute, above:
$get('txtSomething').setAttribute('disabled','disabled'); // disable the input
$get('txtSomething').setAttribute('disabled',''); // enable the input
But this will not work for other elements like <div> and <span> tags.

Resources