I'm using jQuery UI 1.8.7 (a custom build created on the jQuery UI site that only contains the dialog widget).
I'm also using the jQuery Validate 1.6 plug-in (or rather trying to).
My jQuery UI markup/code is pretty stock stuff:
<div id="create-snapshot" title="Create new snapshot?">
<p style="text-align:left">
<span>Name: <input id="snapshotName" name="snapshotName" /></span><br /><br />
<b>Snapshot type:</b><br /><br />
<input type="radio" id="snapshotType"
name="snapshotType" value="0"
checked="checked" />Snapshot just the disks.<br />
<input type="radio" id="snapshotType"
name="snapshotType" value="1" />Snapshot both disks and memory.
</p>
</div>
$("#create-snapshot").dialog({
autoOpen: false,
resizable: false,
width: 500,
height: 250,
modal: true,
buttons: {
"Create": function () {
// ...do ajaxy stuff...
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
// Hook up Create Snapshot
$("body").delegate("a[id='create']", "click",
function () {
$("#create-snapshot").dialog('open');
return false;
}
);
The order of the <script> tags is:
jquery-1.4.4.min.js
jquery-ui-1.8.7.custom.min.js">
jquery.validate.min.js
What I'm finding is that when I include jquery.validate.min.js it kills the Create Snapshot event handler. If I remove it, the jQuery modal dialogue opens just fine.
I've checked for errors the Firebug/Chrome dev tools but nothing jumps out.
Why would this be happening?
UPDATE:
Having a quick look about version 1.6, it has a known bug with newer versions of jQuery library (using same method name), check out this link. You have to upgrade your validation plugin
have you tried updating the validation plugin? I guess you are using an older version of this plugin?
This code is executing just fine on my machine (with validate 1.7):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/smoothness/jquery-ui-1.8.7.custom.css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(document).ready(function() {
$("#create-snapshot").dialog({
autoOpen: false,
resizable: false,
width: 500,
height: 250,
modal: true,
buttons: {
"Create": function () {
// ...do ajaxy stuff...
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
// Hook up Create Snapshot
$("body").delegate("a[id='create']", "click", function () {
$("#create-snapshot").dialog('open');
return false;
});
});
</script>
</head>
<body>
Create Snapshot
<div id="create-snapshot" title="Create new snapshot?">
<p style="text-align:left">
<span>Name: <input id="snapshotName" name="snapshotName" /></span><br /><br />
<b>Snapshot type:</b><br /><br />
<input type="radio" id="snapshotType"
name="snapshotType" value="0"
checked="checked" />Snapshot just the disks.<br />
<input type="radio" id="snapshotType"
name="snapshotType" value="1" />Snapshot both disks and memory.
</p>
</div>
</body>
</html>
Related
I have a web form with a checkbox to enable or disable something.
When users click on the checkbox to enable it, I need to display a dialog popup Yes/No.
I use a jquery UI code to display this kind of "Yes/No" popup.
After the user enables the option by enabling the checkbox, and clicking on the "Yes/No" dialog box, he has the possibility to uncheck it.
And in this case, I don't want to show the "Yes/No" dialog popup.
So my script needs first to check if the checkbox is "checked" or not before to display the popup.
PROBLEM
It works fine for the first "checked" action.
But if the user unchecks and rechecks the checkbox, the popup dialog is showing up, and this time, the user needs to click several times on the "Yes" button to close the dialog popup.
You can easily reproduce this issue with my code below:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<label><input data-toggle="collapse" href="#mycheckbox" role="button"
aria-expanded="false" aria-controls="mycheckbox"
type="checkbox"
name="mycheckbox_enable"
id="mycheckbox_enable" onclick="EnableTestB('Would you like to copy-paste your serie of messages A to B fields in order to go faster?');">
<div>
<div></div>
</div>
</label>
<script type="text/javascript">
function EnableTestB(message) {
$("#mycheckbox_enable").on('change', function() {
if ($("#mycheckbox_enable").is(':checked')){
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function() {
$(this).dialog("close");
},
No: function() {
$(this).dialog("close");
}
},
});
}
else {
// If user uncheck the checkbox, we don't do anything.
}
});
};
</script>
</body>
</html>
This happens because after each click, a div is appended to your body element. In order to fix it, you can do something like this..
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<label><input data-toggle="collapse" href="#mycheckbox" role="button"
aria-expanded="false" aria-controls="mycheckbox"
type="checkbox"
name="mycheckbox_enable"
id="mycheckbox_enable" onclick="EnableTestB('Would you like to copy-paste your serie of messages A to B fields in order to go faster?');">
<div>
<div id="checkbox_message"></div>
</div>
</label>
<script type="text/javascript">
function EnableTestB(message) {
$("#mycheckbox_enable").on('change', function() {
if ($("#mycheckbox_enable").is(':checked')){
$('#checkbox_message').html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function() {
$(this).dialog("close");
},
No: function() {
$(this).dialog("close");
}
},
});
}
else {
// If user uncheck the checkbox, we don't do anything.
}
});
};
</script>
</body>
</html>
In the above code, a div with id #checkbox_message is already present in the DOM and the html is manipulated inside this div only, so multiple pop-ups are not appended in the dom.
I am trying to create a text-area that gets dynamically loaded and automatically a TinyMCE editor gets applied.
In spite of the many topics covering this subjects and even some tutorials I do not seem to get it working.
I am possibly overlooking a very small item but if I only knew what..
The situation
Current install : TinyMCE 4.x + jQuery v1.10.1
A HTML page that loads a textarea through an AJAX call.
The I try to initialize the TinyMCE editor on the text-area.
There it fails.
FireBug error console tells me : ReferenceError: tinyMCE is not defined
But it has been defined. I even tried to set absolute paths.
<title>jQuery test file</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/classes/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function() {
$('.EditorField').tinymce({
script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.get("test.php", function( EditorHTML ) {
$("#EditorSection").html( EditorHTML );
tinyMCE.execCommand('mceAddEditor', false, '.EditorField');
});
});
</script>
The HTML form code I use :
<form method="post" action="result.php">
<div>
<div id="EditorSection">
</div>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</div>
</form>
And probably also very important the code loaded by AJAX :
<textarea name="TextArea1" cols="20" rows="2" class="EditorField" id="WysyWig" style="background-color: red; width: 100%; height: 700px;">
Dynamically loaded text-area content
I tried multiple options here:
tinyMCE.execCommand('mceFocus', false, '.EditorField');
tinyMCE.execCommand('mceAddEditor', true, '.EditorField');
Or directly by the ID itself. shouldn't make a difference
tinyMCE.execCommand('mceAddControl', false, '#WysyWig');
I hope someone sees what I am overlooking.
Replace your script tags by one :
<script type="text/javascript">
jQuery(document).ready(function() {
$.get("test.php", function( EditorHTML ) {
$("#EditorSection")
.html( EditorHTML )
.find('.EditorField')
.tinymce({
script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
});
tinyMCE.execCommand('mceAddEditor', false, '.EditorField');
});
});
</script>
Basically, you'll wait the Ajax response, and once it is in your DOM then you will initialize tinyMCE.
First of all the button does not fire up the jquery dialog and
When the page loads, i check the console for errors and I get "Uncaught TypeError: undefined is not a function" which is pointing to $("#dialog").dialog({
Here are my codes below.
Default.aspx
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="JavaScript1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CustomValidator runat="server" ID="cv1" ControlToValidate="fupCV" ClientValidationFunction="validate"></asp:CustomValidator>
<asp:FileUpload runat="server" ID="fupCV"/>
<asp:Button runat="server" ID="btnUpload" OnClick="btnUpload_OnClick" Text="Upload"/>
<asp:Button runat="server" ID="btnDialog" OnClientClick="return false;" Text="Open Dialog"/>
</div>
</form>
<div id="dialog" style="display: none">
This is a popup
</div>
</body>
</html>
JavaScript1.js
$(document).ready(function() {
$('#btnUpload').attr('disable', 'disable');
$("#dialog").dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable: false,
buttons: {
Accept: function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$(this).dialog("close");
}
});
$("#btnDialog").click(function () {
$("#dialog").dialog("open");
});
});
.dialog() is part of jQuery UI, not jQuery
http://jqueryui.com/dialog/
I don't see jQuery UI included anywhere in your source.
you can use also for id ending something like:
$('input:submit[id$=btnDialog]')).click(function () {});
I am using jQuery on a standard salesforce page. I can only place my jQuery script in the main page. When I click on an inline edit element, a dialog box opens up and this dialog box has a few input fields. I want to know how to access the input fields in the dialog box from the jQuery which is placed in the Main page.
Please help!!
Regards
Sameer
This tutorial might help you to start from somewhere: http://www.youtube.com/watch?v=b16V25eNyJY&feature=relmfu
<html lang="en">
<head>
<title></title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.dialog.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var cancel = function() {
$("#myDialog").dialog("close");
}
var getResponse = function(){
var answer;
$("input").each(function(){
(this.checked == true) ? answer = $(this).val() : null;
});
$("<p>").text(answer).insertAfter($("#poll"));
$("#myDialog").dialog("close");
}
var dialogOpts = {
modal: true,
buttons: {
"Done": getResponse,
"Cancel": cancel
},
autoOpen: false
};
$("#myDialog").dialog(dialogOpts);
$("#poll").click(function() {
$("#myDialog").dialog("open");
});
});
</script>
</head>
<body>
<button id="poll">Poll</button>
<div id="myDialog" class="flora" title="This is the title">
<p>Question?</p>
<label for="yes">Yes!</label><input type="radio" id="yes" value="yes" name="question"><br>
<label for="no">No!</label><input type="radio" id="no" value="no" name="question">
</div>
</body>
</html>
If you paste the code we could exactly show you.
You can access it by, For instance specifying it's id:
$("#the_id_element")
See code below for working demo. A jQuery UI modal dialog box is opened, and the user is asked to enter a password. If the submit button is highlighted, everything works just fine. If, however, the input area is still highlighted, then the page appears to reload, and the URL in the browser is changed to example.com?confirm_password=asdfasdf#.
I suspect this is because I have a form embedded in the dialog box, but this is based on a jQuery example.
How can I fix this so that pressing the enter key with the text input box highlighted is equivalent to clicking on submit?
<html>
<head>
<title>Problem Demo</title>
<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myDialog').dialog({
autoOpen: false,
modal: true,
buttons: {
"Submit": function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
$('#openMyDialog').click(function() {
$('#myDialog').dialog('open');
});
});
</script>
</head>
<body>
<a id="openMyDialog" href="#">Open Dialog</a>
<div id="myDialog">
<p style="text-align: left;">Please enter your password.</p>
<form>
<fieldset>
<label for="confirm_password">Password</label>
<input type="password" name="confirm_password" id="confirm_password" value="" />
</fieldset>
</form>
</div>
</body>
</html>
It is look like submit function is only working with button key(button submit function being called only on button click ).
you should explicitly bind your form using
$('yourformselector').submit(function(){
$(this).dialog('close');
});