After trying to animate an element, when clicking on a button using this script:
$(document).ready(function()
{
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function()
{
// $(this).css('border', "solid 2px red");
// var divs = $("#div_one, #div_two, #div_three, #div_four, #div_five, #div_six, #div_seven, #div_eight, #div_nine, #dive_ten, #div_eleven, #div_twelve, #div_thirteen, #div_fourteen, #div_fifteen, #div_sixteen, #div_lone, #div_ltwo, #div_lthree, #div_lfour, #div_lfive, #div_lsix, #div_lseven, #div_leight, #div_lnine, #dive_lten, #div_leleven, #div_ltwelve, #div_lthirteen, #div_lfourteen, #div_lfifteen, #div_lsixteen");
// $(divs).siblings().slideToggle();
$(this).next().slideToggle();
$(this).siblings().slideToggle();
});
});
I've got some animation unwanted result. So I decided, instead of animating the next element of the clicked button, why I don't send the result into dialog bix using jQuery UI plugin. So I tried the following:
<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script src="../include/bootstrap.min.js" type="text/javascript"></script>
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
$(this).next().dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
//$(this).dialog("open");
});
});
And here is the html code for only the first 2 buttons, because the cod is too long:
<div class="form-group col-md-12">
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" />
<div id="div_one" class="collapse">3rd Molar:
<?php echo $resTeeth['one'] ?>
</div>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" />
<div id="div_two" class="collapse">
<?php echo $resTeeth['two'] ?>
</div>
So I had this error:
jquery-1.12.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
How to fix this error, and is it possible to send the next() div element into dialog box using jQuery UI, or should I specify id for each div, and create a dialog script for each one of them ?
Your problem is, you're creating the dialog from the next div, but you're trying to open the dialog on the CURRENT div.
You can fix this pretty easy:
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
var dialog = $(this).next();
dialog.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
dialog.dialog("open");
});
});
I made the assumption you want the dialog to contain the contents of the next (following) div.
This would do that:
$(document).ready(function() {
var dialog = '<div class="mydialog" title="Basic dialog"><p class="dialogcontent">me</p></div>';
var newDiv = $(dialog);
newDiv.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".form-group").on('click', ".img1", function() {
var me = $(this);
newDiv.find('.dialogcontent').html(me.next('.collapse').html())
newDiv.dialog("open");
});
});
Example in action: https://jsfiddle.net/89pyhsuj/
I'm using the following code:
<script src="/js/spectrum.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/spectrum.css" />
<script type="text/javascript">
jQuery(function() {
var opts = {
showInput: true,
className: "full-spectrum",
showInitial: true,
showPalette: true,
showSelectionPalette: true,
maxSelectionSize: 20,
preferredFormat: "hex"
};
jQuery( '#driverColor' ).spectrum( opts );
} );
</script>
...
<input type="text" name="driverColor" value="#ff0000" id="driverColor" />
when I hit the color picker, the original input field is also appearing:
How can I fix it?
TIA
This may be a little late but, in an older rails app (2.3.4), I was able to force the original input field to not show up by adding width, height, border and padding to the style of the input eg:
<input id="your_id" name="your_field_name" type="text" style="width:0;height:0;padding:0;border:0;">
I was trying to make a extension of datebox were I first needed to select the date and then click "Choose date".
All works, well almost. When I click the "Choose date" button the content behind the modal window get clicked, and in my case it is a search button.
Anyone know why?
if (o.useSelectDateButton) {
$('Välj datum')
.appendTo(hRow).buttonMarkup({ theme: o.theme, icon: 'check', modal: true, iconpos: 'left', corners: true, shadow: true })
.on(o.clickEvent, function(e) {
if ($(this).jqmData('enabled')) {
w.theDate.set(2, 1).set(1, $(this).jqmData('month')).set(2, $(this).jqmData('date'));
w.d.input.trigger('datebox', { 'method': 'set', 'value': w._formatter(w.__fmt(), w.theDate), 'date': w.theDate });
}
if (w.theDate == new Date()) {
w.theDate.set(2, 1).set(1, $(this).jqmData('month')).set(2, $(this).jqmData('date'));
w.d.input.trigger('datebox', { 'method': 'set', 'value': w._formatter(w.__fmt(), w.theDate), 'date': w.theDate });
}
w.d.input.trigger('datebox', { 'method': 'close' });
});
}
I call the datebox like this:
<input name="datepicker" id="datepicker" type="date" data-role="datebox" data-options='{"mode": "calbox", "calShowWeek": true, "overrideCalStartDay": 1, "useModal": true, "useAltIcon": true, "afterToday": true, "useFocus": true }'>
Added a JsFiddle
Click for fiddle
The problem is that i cant recreate the problem in the browser, it only happens in a mobile device.
can you make fiddle with this?which jquery libraries you use for this?
An another option / alternative:
Take at look at this
its a very simple datetimepicker which jquery libraries and it is very simple to put this to work.
head tag:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
body tag:
<p>Date: <input type="text" id="datepicker" /></p>
I have a jQuery dialog with a nested form inside of it. The form contains an input box and a submit button. When the dialog pops up I want the user to only be able to fill it out, and nothing else on the page. My css for that is done here:
.ui-widget-overlay
{
height: 1339px !important;
width: 595px !important;
}
This works in allowing the user not to do anything else on the page, but the problem is that the input field is also disabled.
Any suggestions?
Edit: Here is how I make the dialog
function dialog(left, top) {
//Creates a new dialog
$('#dialog').dialog({
position: [left, top],
height: 90,
width: 200,
resizable: false,
modal: true,
title: '<span class="ui-icon ui-icon-home"></span> Enter Info',
});
}
Here is the form I use for the dialog:
<!-- Store Location Dialog -->
<div id = "dialog">
<form id = "info" method = "post" action = "Default.aspx" \>
<input type = "text" id = "changeDialogText" name = "changeLocation" /> <!-- THIS IS DISABLED -->
<input type = "button" id = "changeDialogSubmit" value = "" onclick = "function()"/>
</form>
</div>
I figured out the issue. I had the z-index of my form lower then the z-index of the page. This caused issues with the dialog because it was unsure if the input was in the dialog or on page
The above does not provide a literal answer that is correct. z-Index auto does not cut it.
title: 'Quantity 1',
autoOpen: false,
show: 'slide',
hide: 'explode',
resizable: true,
stack: true,
height: "200",
width: "790",
zIndex: "auto",
modal: true
I have a jQuery Modal dialog with an iframe in it, the iframe includes a form. When a user submits the form, I would like to close down the modal dialog.
How can I do that?
jquery modal script on index.php:
<script type="text/javascript">
function showRegDialog(url) {
$(function() {
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="externalSite" scrolling="no" frameborder="0" class="externalSite" src="' + url + '" />').dialog({
title: ($this.attr('title')) ? $this.attr('title') : 'Choose your location',
autoOpen: true,
width: 700,
height: 700,
modal: true,
resizable: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(700 - horizontalPadding).height(700 - verticalPadding);
});
}
</script>
link on index.php to call showRegDialog modal:
Register now
This is the content of the register.php
<html>
<body>
<form action="" method="POST">
<input type="text">
<input type="submit">
</form>
</body>
</html>
Call javascript function in parent window like this:
parent.yourJsFunction();
put it in "onsubmit" in your form.
You might be looking for close
Give your form an id.
$("#formID").submit(function(){
parent.closeModal();
});
// function for closing modal window (in parent page)
function closeModal() {
$("#externalSite").dialog("close");
}