draggable JQuery DIV don't work - javascript

i have some problem to use some JQuery code,when a div appear doesen't take the draggable property. This div appeare when the user simply press a button. The other command on the div (hide and show for example),works fine,but the draggable...not
This is the script code in tag:
<script type="text/javascript" src="System/Menu/interface.js"></script>
<script type="text/javascript" src="System/Menu/jquery.js"></script>
<script type="text/javascript" src="System/Menu/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//slide pannello start
$(".btn-slide").click(function () {
$("#startmenu").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
$("#layer1").hide();
$('#preferences').click(function () {
$("#layer1").show();
$('#layer1').Draggable();
});
$('#close').click(function () {
$("#layer1").hide();
});
});
</script>
and this is the div in tag:
<div id="layer1">
<div id="layer1_handle">
[ x ]
Preferences
</div>
<div id="layer1_content">
<form id="layer1_form" method="post" action="save_settings.php">
Display Settings<br />
<input type="radio" name="display" checked="checked" value="Default" />Default<br />
<input type="radio" name="display" value="Option A" />Option A<br />
<input type="radio" name="display" value="Option B" />Option B<br /><br />
Autosave settings<br />
<input type="radio" name="autosave" checked="checked" value="Enabled" />Enabled<br />
<input type="radio" name="autosave" value="Disabled" />Disabled<br /><br />
<input type="submit" name="submit" value="Save" />
</form>
</div>
</div>
Dunno why,but i think is whitout dubts an error of code,is the first time i work with jquery and the draggable div.
Thanks to all want to help me :)

Due to the source highlighting this typo sticks out like a sore thumb:
$('#layer1').draggable(); // should be lowercase
You also need to make sure you're including the jquery-ui script:
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
I also don't see any HTML that has the preferences id.
<span id='preferences'>Preferences</span>

Related

How to hide a div using radio button

I want to hide the an entire field represented by a div id. I tried doing it, but it doesnt work. I could get it working when i used dropdown list and select. Here is my code:
HTML:
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" id="signature" value="show" checked="checked"/>
Show Signature
<br><br>
<input type="radio" class="flat" name="botsign" id="signature" value="hide" />
Hide Signature
</p>
</div>
JS:
<script>
$("input[name='botsign']").change(function () {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
</script>
CSS:
#Sigbox{
display:none;
}
Try Like This
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" value="show" checked="checked"/> Show Signature<br><br>
<input type="radio" class="flat" name="botsign" value="hide" /> Hide Signature
</p>
</div>
<script>
jQuery(document).ready(function($){
$("input[name='botsign']").click(function() {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
});
</script>
Thank you for helping me out. The code I posted does work fine, but there where some Javascript conflicts as I was using around 6 of them. I tried the above answers and even that didnt work, then I saw #AdriánDaraš comment and I cross checked with all the other Javascripts. And now its working fine as I removed the Javascript I was using to make the radio buttons look good.
Thanks a lot everyone.
Added the jquery cdn and a div box with an id to test the hide function. Then i used jQuery() that it's the normal way to call jquery.
The change function listen on both input and check the value of the input to know if must hide or show the box.
Here your solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="form-group">
<p>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="show"
checked="checked"/>
Show Signature
<br><br>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="hide" />
Hide Signature
</p>
</div>
<div id="Sigbox">
hello i'm your sign box
</div>
<script>
jQuery("input[name='botsign']").change(function () {
if (jQuery(this).val() == 'show') {
jQuery("#Sigbox").show();
} else {
jQuery("#Sigbox").hide();
}
});
</script>
</body>
</html>

Running javascript when document loads

I am trying to implement a script that will enable a submit button once a check-box is checked.
I am following an example found here: http://jsfiddle.net/chriscoyier/BPhZe/76/
I have added the following java-script code to my page but it doesn't seem like the script is executing properly. I do not see any errors in the console however.
<!---JQuery Iniialization --->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
</script>
Form Code:
<FORM ACTION="signature_action.cfm?ticket_id=#url.ticket_id#&device=pc" METHOD=POST NAME="SigForm">
<div align="center">
<h2>STEP 1</h2>
<strong>Select the type of signature that is being captured:</strong><br />
<table><tr><td align="left">
<div id="format">
<input name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" />
<label for="check1"><span class="style1">Equipment Dropped Off </span></label>
<span class="style1">
<input name="work" type="checkbox" id="check2" value="work"/>
<label for="check2">Work performed </label>
<input name="payment" id="check3" type="checkbox" value="payment" />
<label for="check3">Payment Recieved </label>
<input name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
<label for="check4">Equipment Picked Up</label>
</span><br />
<input name="tech_name" type="hidden" value="#url.tech_name#">
</div>
<input name="hidden" type="hidden" value="#url.tech_name#">
<input type="submit" name="submit" value="STEP 4 - SAVE SIGNATURE" disabled>
</form>
I am new to javascript and I am strugling a bit. Doesn't this need to run once the DOM is ready? (I am not sure how to do that!)
Can someone point me in the right direction?
As per this article: How to add onDomReady to my document?, I put my code inside:
window.onload = function() {
//code here
}
The event that must be listened is "change".
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.on('change', function() {
submitButt.attr('disabled', !this.checked);
});
});

Function is not working on radio button onclick

JavaScript function (here f1()) is not getting called on radio button (here id=iprange) onclick event.
HTML
function f1() {
alert('yes');
}
<form role="form">
<div class="box-body">
<label>
<input type="radio" name="optionsRadios" id="fullscan1" value="option1" /> Full Scan
</label>
<!-- "IP Range" is the radio button that should show a "yes" alert. -->
<label>
<input type="radio" name="optionsRadios" id="iprange" value="option2" onclick="f1();" /> IP Range
</label>
From:
<input type="text" id="text1"> To:
<input type="text" id="text2">
<label>
<input type="radio" name="optionsRadios" id="subnet" value="option3" /> Subnet
</label>
<input type="text" id="text3">
<button class="btn btn-danger">Scan</button>
</div>
</form>
#Suresh Kota . At this point its impossible to give an satisfying answer, you'll have to do a step-by-step-investigation. Start with following and post your result here.
<head>
....
<script> // your script tag, I assume it looks like this
$(document).ready(function() {
/* some code */
});
// now include your function as last line outside document ready
function f1() {alert('yes');};
</script>
<!-- Make sure this is the only script tag in your html -->
....
</head>
If that doesn't help, rename your function, e.g. function xxx() {alert('yes');};
and same with onclick-attribute in input-tag: onclick="xxx()".
When having no succes, try directly: onclick="alert('yes')"
If that all not work, there's something inside your document.ready that manipulates the button, and you should post that code.
Try this one:
<input type="radio" name="optionsRadios" onclick="handleClick(this);" value="option1" />
<input type="radio" name="optionsRadios" onclick="handleClick(this);" value="option2" />
...
<script>
function handleClick(myRadio) {
alert('New value: ' + myRadio.value);
}
</script>
<label onclick="red()"><input type="radio" name="colors" id="red">Red</label>
or
<label onclick="red()"><input type="radio" name="colors" id="red"></label>
<label for="red">Red</label>
<script>
function red(){
alert('i am red');
}
</script>
if you want to call onclick function on radio button then you can use like this, it will work for you
Note: we have to call on function on label instead of radio button

How can i enable checkbox by clicking Reset button in Javascript?

Hi i'm new to JS and i'm trying to do a BMI(Body/Mass Index) calculator for my website.
What i want to do is when a user clicks to Temizle(Reset) button disabled checkbox should be usable again. I wrote a function which is called "temizle" but it didn't work. I want to know 2 things for the solution.
If there is a easy way to do what i ask, please tell me.
If there is not, how should i change my code?
<html>
<head>
<script language="JavaScript">
<!--
function temizle(){
if(document.getElementById('e').disable=true)
{
document.getElementById('e').disable=false
}
if(document.getElementById('k').disable=true)
{
document.getElementById('k').disable=false
}
}
//-->
</script>
</head>
<body>
<form name="bmiForm">
Cinsiyetiniz: Erkek<input type="checkbox" id="e" name="erkek" onclick="if (this.checked) document.getElementById('k').disabled=true; else document.getElementById('k').disabled = false;"/> Kadın<input type="checkbox" id="k" name="kadın" onclick="if (this.checked) document.getElementById('e').disabled=true; else document.getElementById('e').disabled = false;"/><br />
Kilonuz(kg): <input type="text" name="kilo" size="10" /> Örn:75<br />
Boyunuz(cm): <input type="text" name="boy" size="10" /> Örn:183<br />
<input type="button" value="Kütle/Vücut İndeksi Hesapla" onClick="bmihesaplama()" /><br />
Kütle/Vücut İndeksiniz(BMI): <input type="text" name="bmi" size="10" /><br />
Bunun Anlamı: <input type="text" name="sonuc" size="45" /><br />
<input type="reset" value="Temizle" onclick="temizle()" />
</form>
</body>
</html>
Thx for your help.
You've typed disable as the property, but it's disabled. You need to change that; it's important.
if(document.getElementById('k').disable=true)
Should also be changed; this is an assignment. You could use ==, but you can also just do:
if (document.getElementById('k').disabled)
http://jsfiddle.net/ExplosionPIlls/3AMtG/2/

Selecting an html radio button dynamically through javascript does not work in IE

I want to select a radio button from javascript. I am using this simple html file to test the issue. The code below works correctly on firefox and chrome, however it does not work in IE (no version works). I would like to know why the supplied code does not work on IE, and how to select a radio button in IE?
<html>
<head>
<script type="text/javascript">
function chooseOne()
{
var randomChoice = Math.round(Math.random() * 2);
if(randomChoice == 0)
{
document.getElementById("test0").checked = true;
}
else if (randomChoice == 1)
{
document.getElementById("test1").checked = true;
}
else
{
document.getElementById("test2").checked = true;
}
}
</script>
</head>
<body>
<input type="radio" id="test0" name="test" value="a" /> A<br />
<input type="radio" id="test1" name="test" value="b" /> B<br />
<input type="radio" id="test2" name="test" value="c" /> C<br />
<input type="button" name="click" value="CHOOSE" onclick="javascript:chooseOne()" />
</body>
Thanks in Advance,
Spi
First of all, you should give all your radio buttons the same name, otherwise they will act as if they are independent buttons:
<input type="radio" name="test" id="test0" value="a" /> A<br />
<input type="radio" name="test" id="test1" value="b" /> B<br />
<input type="radio" name="test" id="test2" value="c" /> C<br />
I'm guessing this is also the source of your problem. Further, once you do this, you only need to set one radio button's checked to true, that will automatically remove the selection from other buttons.
I'm not certain, but possibly you have to tell IE that your onclick code is in javascript like this:
<input type="button" name="click" value="CHOOSE" onclick="javascript:chooseOne()" />
One problem:
var randomChoice = Math.round(Math.random() * 2);
will always yield to 1

Categories