I have a web application(ASP.NET2.0 C#).
Within it, I have a div that contains a checkbox list and a button.
I want to toggle the div viewing, so I got some javascript code online to help me.
Heres the code:
<script language="javascript">
var state = 'hidden';
function showhide(layer_ref) {
if (state == 'visible')
{
state = 'hidden';
}
else
{
state = 'visible';
}
if (document.all)
{ //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers)
{ //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all)
{
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}
</script>
I call the function this way:
Choose Columns
When I use this function, it shows me the div with the button, but it doesn't show me the checkboxlist....Any ideas on what's going on?
Thank you.
Have you tried using display instead of visiblity?
For example, instead of:
document.getElementById(layer_ref).style.visiblity = "hidden";
document.getElementById(layer_ref).style.visiblity = "visible";
Use:
document.getElementById(layer_ref).style.display = "none";
document.getElementById(layer_ref).style.display = "block";
You will have to replace all your references to visiblity with display not just the getElementById version. You also may want to look into using jQuery which will handle your scenario with a few lines of code, plus no need for an onclick attribute to cloud you html.
<script type="text/javascript" src="jquery-1.3.2.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.toggleLink').click(function(e) {
e.preventDefault();
$('#AlertDiv').toggle();
});
});
</script>
Choose Columns
Some suggestions:
You really should consider using a javascript library like ASP.NET AJAX or JQuery. This will help to get the browser specific code out of the way.
Base the visibility on the state of the checkbox, rather than just toggling it.
"display" is probably a better style in this situation instead of "visibility". If you use "visibility" then you will just get a blank area where the "layer" should be when it's invisible.
Instead of a "layer reference" you probably want to pass in the id of the div tag and the id of the checkbox.
Example in asp.net ajax:
Here would be your checkbox:
<input type="checkbox" id="mycheck" onclick='showhide("mycheck","mylayer")' />
Here is the area you want to show/hide:
<div id='mylayer'>content</div>
Here is your function:
<script language="javascript">
function showhide(checkboxid, layerid)
{
if($get(checkboxid).checked==true)
{
$get(layerid).display = "none";
}
else
{
$get(layerid).style.display = "";
}
}
</script>
Related
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.
I am trying to use jquery to select a checkbox when another checkbox is selected. This wuld have been easy if the ids of the checkboxes are constant but they can change so I have tried to use classes instead, unfortunately asp.net applies the class name on the span element wrapping the checkbox instead of applying on the checkbox directly, so i need to get the checkbox via the inner element of the parent span
<script type="text/javascript">
$(document).ready(function() {
$('#ctl00_ContentPlaceHolder1_Category_ctl00_ProductBusinessLine_chkEL_157').click(function() {
if (this.checked) {
var pl = $('#ctl00_ContentPlaceHolder1_Category_ctl00_ProductBusinessLine_chkPL_313')
pl.attr("checked", true);
}
})
});
</script>
My code, previously working with the checkbox ids, is above, pls help!
You can still match your check boxes even if the class attribute is applied to their parent <span> elements:
$(document).ready(function() {
$(".sourceCheckBoxClass input:checkbox").click(function() {
if (this.checked) { // or $(this).is(":checked")
$(".targetCheckBoxClass input:checkbox").attr("checked", true);
}
});
});
With ASP.NET you can control the ClientId of the form controls. You have the use the Clientid property as I remember.
More info at the MSDN.
<script type="text/javascript">
$(document).ready(function() {
$('#ctl00_ContentPlaceHolder1_Category_ctl00_ProductBusinessLine_chkEL_157').click(function() {
if (this.checked) {
var pl = $('#ctl00_ContentPlaceHolder1_Category_ctl00_ProductBusinessLine_chkPL_313 :checkbox')
pl.attr("checked", true);
}
})
});
</script>
Is that what you're looking for ? oh and looks like you're using ids, not classes in your selectors
if you write your javascript code on the page, then you can determine real id dynamically:
$('#<$=chkEL_157.ClientID%>').click(function() {
...
});
or find element by a part of id:
$(':checkbox[id$="_chkEL_157"]').click(function() {
...
});
but in this case you must assure that there is no other element that contains similar id. Otherwise you must specify context where you want to find element, like this:
$(':checkbox[id$="_chkEL_157"]', $("#checkbox-context-element")).click(function() {
...
});
I want this type of toggle button please click the link below to see my requirement :
http://www.redbus.in/Booking/SeatSelection.aspx?rt=4017230&doj=30-Nov-2010&dep=04:55%20PM&showSpInst=false
You can use PrettyCheckBox
or you can build it yourself with a bit of JS (better if you use jQuery)
Steps:
with asp.net render all the checkbox you need and specify an ID (different for each) and a name for each, set also class. Render also a LABEL with "for" attribute correctly set. in the label put what should be your checkbox (images/links etc)
for the check class, set css display:none
with jquery bind the click event of each label, in the event raise the CLICK of the related checkbox (so it works also in IE), get the status of the checkbox and update the attributes (class is the best) of the content of the label.
in code is:
CSS:
.seatcheckbox{
display:block;
height:16px;
width:16px;
}
.checked {
background-image: url(chair-red.png)
}
.unchecked {
background-image: url(chair-gray.png)
}
input.hidden{ display:none;}
HTML rendered by asp.net
<input type="checkbox" id="chk1" name="Seats" value="1" class="hidden" />
<label for="chk1"><div class="seatcheckbox"></div></label>
JQERY script in the same html rendered by asp.net
<script type="text/javascript">
$(document).ready(function(){
$('label').each(function (index, object) {
if ($(this).attr("for") != "") {
var ctl = $("#" + $(this).attr("for"));
if (!ctl.is("input[type=radio]") && !ctl.is("input[type=checkbox]")) {
return;
}
ctl.css("display", "none")
$(this).click(function (e) {
try {
if ($.browser.msie) {
ctl.click();
}
var lbl = $(this);
setTimeout(function () { adg_ChecksRefresh(lbl); }, 1)
} catch (ex) { }
});
});
function adg_ChecksRefresh(lbl) {
var ctl = $("#" + $(lbl).attr("for"));
var name = ctl.attr("name");
var id= ctl.attr("id");
var checked = ctl.is(":checked");
if (checked) {
$(lbl).removeClass("unchecked");
$(lbl).addClass("checked");
} else {
$(lbl).removeClass("checked");
$(lbl).addClass("unchecked");
}
}
</script>
Don't forget to include this in your HEAD tag:
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
If you intend to use it also for RADIO BUTTON replace the entire function adg_ChecksRefresh(lbl) with this code:
function adg_ChecksRefresh(lbl) {
var ctl = $("#" + $(lbl).attr("for"));
var name = ctl.attr("name");
var id= ctl.attr("id");
var checked = ctl.is(":checked");
if (ctl.is("input[type=radio]")) {
$("input[name=" + name + "]").each(function () {
$("label[for=" + $(this).attr("id") + "]").removeClass("checked").addClass("unchecked");
});
}
if (checked) {
$(lbl).removeClass("unchecked");
$(lbl).addClass("checked");
} else {
$(lbl).removeClass("checked");
$(lbl).addClass("unchecked");
}
}
the main JS is tested to work with all primary browser. but i wrote in live the html that have to be generated. hope it works all!
Byes
What particular aspect of the seat picker control do you need? Is it simply that you wish to alternate between 2 images based on the user clicking them? If so then you can simply use the toggle function of jquery to alternate between 2 classes or else set the src of an image each click.
// Include jQuery in your page
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
// Create a script block for the toggling
<script type="text/javascript" language="javascript">
$('#seat').click(function() {
$(this).find('img').toggle();
});
</script>
// Create your markup for the images.
<div id='seat'>
<img id="empty" src="empty_seat.png" alt="" width="100" height="123" style='display:block;' />
<img id="occupied" src="occupied_seat.png" alt="" width="100" height="123" style='display:none;' />
</div>
In my ASP.NET web app, I'm trying to create a universal way of warning users before navigating away from a form when they've made changes, using jQuery. Pretty standard stuff, but after a lot of searching I have yet to find a technique that works.
Here's what I have at this point:
addToPostBack = function(func) {
var old__doPostBack = __doPostBack;
if (typeof __doPostBack != 'function') {
__doPostBack = func;
} else {
__doPostBack = function() {
old__doPostBack();
func();
}
}
}
var isDirty = false;
$(document).ready(function() {
addToPostBack(function() {
alert("Postback detected.")
clearDirty();
});
$(':input').bind("change select keydown", setDirty);
window.onbeforeunload = function(e) {
var msg = "You have unsaved changes. "
if (isDirty == true) {
var e = e || window.event;
if (e) { e.returnValue = msg; }
return msg;
}
};
});
setDirty = function() {isDirty = true;}
clearDirty = function() {isDirty = false;}
This works as far as warning the user from navigating away. The problem is that I get the warning on every same-page postback. There are a number of things on my forms that might trigger a postback:
There are Save, Cancel, and Delete linkbuttons on the page
There might be other linkbuttons on the page that execute server-side functionality while staying on the same page
There might be other controls with autopostback=true that also have server-side functions attached to them, but which don't result in the user leaving the page.
None of these things should provoke a warning, because the user isn't leaving the page. My code tries to hijack addToPostBack (more details on that in this question) to clear the isDirty bit before posting back, but the problem is that in IE onbeforeunload fires before __doPostBack, apparently because IE fires onbeforeunload immediately when a link is clicked (as described here).
Of course, I could wire up each of these controls to clear the isDirty bit, but I'd prefer a solution that operates on the form level and that doesn't require that I touch every single control that might trigger a postback.
Does anyone have an approach that works in ASP.NET and that doesn't involve wiring up every control that might cause a postback?
I came across this post while Googling for a solution for doing the same thing in MVC. This solution, adapted from Herb's above, seems to work well. Since there's nothing MVC-specific about this, it should work just as well for PHP, Classic ASP, or any other kind of application that uses HTML and JQuery.
var isDirty = false;
$(document).ready(function () {
$(':input').bind("change select keydown", setDirty);
$('form').submit(clearDirty);
window.onbeforeunload = function (e) {
var msg = "You have unsaved changes. "
if (isDirty == true) {
var e = e || window.event;
if (e) { e.returnValue = msg; }
return msg;
}
};
});
setDirty = function () { isDirty = true; }
clearDirty = function () { isDirty = false; }
Interesting, but... why don't you do everything with jQuery?
var defaultSubmitControl = false;
var dirty = false;
$(document).ready(function( ) {
$('form').submit(function( ) { dirty = false });
$(window).unload(function( ) {
if ( dirty && confirm('Save?') ) {
__doPastBack(defaultSubmitControl || $('form :submit[id]').get(0).id, '');
}
});
});
···
dirty = true;
···
Now, if that still causes the same issue (unload triggering before submit), you could try a different event tree, so instead of calling __doPostBack directly you do...
setTimeout(function( ) {
__doPastBack(defaultSubmitControl || $('form :submit[id]').get(0).id, '');
}, 1); // I think using 0 (zero) works too
I haven't tried this and it's from the top of my head, but I think it could be a way to solve it.
You could always create an inherited page class that has a custom OnLoad / OnUnload method that adds in immediate execution JavaScript.
Then you don't have to handle it at a control specific level but rather the form / page level.
Got this to work by basically tracking the mouse position. Keep in mind you can still get positive values to your Y value (hence my < 50 line of code), but as long as your submit buttons are more than 100 pixels down you should be fine.
Here is the Javascript I added to track mouse changes and capture the onbeforeunload event:
<script language="JavaScript1.2">
<!--
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
return true
}
//-->
</script>
<script type="text/javascript">
window.onbeforeunload = HandleOnClose;
function HandleOnClose(e) {
var posY = 0;
var elem = document.getElementsByName('MouseY');
if (elem[0]) {
posY = elem[0].value;
}
if (posY < 50) { // Your form "submit" buttons will hopefully be more than 100 pixels down due to movement
return "You have not selected an option, are you sure you want to close?";
}
}
</script>
Then just add the following form onto your page:
<form name="Show">
<input type="hidden" name="MouseX" value="0" size="4">
<input type="hidden" name="MouseY" value="0" style="display:block" size="0">
</form>
And that's it! It could use a little cleanup (remove the MouseX, etc), but this worked in my existing ASP.net 3.5 application and thought I would post to help anyone out. Works in IE 7 and Firefox 3.6, haven't tried Chrome yet.
i am looking after this too but what i have find so far is, a solution that uses all the html controls instead of asp.net web controls, have you think of that?
<script type="text/javascript">
$(document).ready(function () {
$("form").dirty_form();
$("#btnCancel").dirty_stopper();
});
</script>
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.