There seem to be an issue with the last version of jQueryUI (1.11) when it comes to using several modal dialogs.
What I am trying to achieve is the following: I have two modal dialogs, the first one contains a button which should open the second dialog:
HTML
<div id="test1">
Test 1
<button id="open_test2">Open Test 2</button>
</div>
<div id="test2">
Test 2
</div>
JS
$(function() {
$('#test1').dialog({
autoOpen: true,
modal: true
});
$('#test2').dialog({
autoOpen: false,
modal: true,
position: {
my: "right top", at: "right top", of: window
}
});
$('#open_test2').click(function() {
$('#test2').dialog('open');
});
})
Once the second dialog is opened, I am still able to click on the first dialog !
Here is a link to a fiddle that shows what I am trying to achieve:
http://jsfiddle.net/JC4t5/1/
Thanks a lot in advance for your help !
This has been fixed with the jQuery UI 1.11.2 release.
Related
tailwindcss and phoenix liveview.
My code look like this
<div x-data="{isExpaned: false}">
<button #click="isExpanded = !isExpaned">Parent menu</button>
<div x-show="ixExpanded">Sub menu</div>
</div>
And First loaded page, even though isExpanded value is false, it shows sub menu.
and refresh the page also shows submenu.
And I checked that x-data="{isExpanded: false}"
why is it happened?
This problem is not related to tailwindcss nor alpinejs
It relates to Phoenix liveview setup
I need to add this code to work with alpinejs and liveview together in app.js file
let liveSocket = new LiveSocket('/live', Socket, {
dom: {
onBeforeElUpdated(from, to) {
if (from.__x) {
window.Alpine.clone(from.__x, to)
}
}
},
params: {
_csrf_token: csrfToken
},
hooks: Hooks
})
I am trying to bind jplayer on my site to mediaelement player(wordpress) that plays music on my site.
I done somethings already but I am missing something. In functions.php file I added
//Enqueue scripts
function register_scripts() {
wp_enqueue_script('jplayer',get_template_directory_uri().'/jplayer/jplayer.min.js',null,'1',false);
}
add_action('wp_enqueue_scripts','register_scripts');
then I added in header
<div id="WM" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls-holder" style="width:100px">
<div class="jp-controls" style="float:left;">
<button class="jp-play" role="button" tabindex="0" style="padding:0;">p</button>
<button class="jp-stop" role="button" tabindex="0" style="padding:0;">s</button>
</div>
<div class="jp-current-time" role="timer" aria-label="time"> </div>
</div>
</div>
</div
then I added in footer
<script>
jQuery(document).ready(function() {
jQuery("#WM").jPlayer({
ready: function(){
jQuery(this).jPlayer("setMedia", {
mp3: "https://example.com/mymp.mp3"
});
},
});
});
</script>
and now here is part that and I am struggling with. Jplayer needs to play along with mediaelement player on my site because jplayer contains file that has audio watermark on it so it will play over my music that is played over mediaelement(my theme supports it). So code that I added also in footer is:
<script>
// click on play button
jQuery('.home, .page-id-53, .page-id-29 ,.tax-download_tag, .tax-download_category, .search-results,.tax-download_tempo,.tax-download-artist').find('.mejs-button.mejs-playpause-button').on('click', function () {
jQuery(window).load(function() {
setTimeout( function(){
jQuery("#WM").jPlayer("volume", 1);
jQuery("#WM").jPlayer("play", 0);
}, 1000 );
});
jQuery(document).on('click', '.mejs-play > button', function() {
</script>
so for some reason jplayer is not playing that file when I click play button(mediaelement) I guess I am missing something, but dont know what, if anyone maybe knows what to do to make it play when I click on play button, but when I pause it and play it again it should play from start.
Thank you
Lets say this is start of code
<script>
// click on play button
jQuery('.home, .page-id-53, .page-id-29 ,.tax-download_tag, .tax-download_category, .search-results,.tax-download_tempo,.tax-download-artist').find('.mejs-button.mejs-playpause-button').on('click', function () {
now I need to add something to run jplayer play button
I'm able to create a jquery ui dialog using the following:
$("#dialogs .add_entry").dialog
({
height: 500,
width: 750,
autoOpen: false,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
modal: true
});
<div id="dialogs">
<div class="add_entry">Test</div>
</div>
But when I later use $("#dialogs .add_entry").dialog("open"); to open the dialog nothing happens (No js errors). I think it is selector related, switching the autoOpen to true shows the dialog. Has anyone come across this?
$(function(){
$element = $("#dialogs .add_entry");
$element.dialog({
height:500,
width:750,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
autoOpen:false,
modal: true
});
$element.dialog("open");
});
This works if placed BEFORE the element. Does not work after. Also does not work with out variable, does not work without wrapper function... what a buggy function.
Try this:
$("#dialogs > .add_entry")
OR
$("#dialogs").children(".add_entry")
I am trying to find a way to get a close (X button) in the top right hand corner of the Ext.MessageBox in Sencha Touch 2.0 so that when you click on the button it closes the MessageBox.
You might want to have a look at this nice tutorial:
Add action buttons to floating sencha touch panels
the explanation is for ST1, but it might help you understanding how you could achieve this in ST2.
Hope this helps.
There's no built-in config which meets your need, so you have to do it manually.
Note that Ext.MessageBox is just a float and modal Ext.Container, so you can customize it like a normal container.
Let's try something like this (you can edit this code live through Sencha Touch 2 documentation here:
http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox
var box = Ext.create('Ext.MessageBox',
{
id: 'message-box',
title: 'title',
message: 'message',
items: [
{
xtype: 'toolbar',
height: '40px',
docked: 'top',
items: [
{xtype: 'spacer'},
{xtype: 'button',
text: 'X',
ui: 'plain',
style: {padding: '5px'},
handler: function(){Ext.getCmp('message-box').hide();}
},
],
}
]
});
box.show();
Hope it helps.
I'm developing an app with asp.net and jQuery and I have a strange problem, I have the div(used as dialog) and a button to show the dialog, the first time I call the dialog, it shows correctly, I close it but when I try to show for the second time the background grays but the dialog doesn't show (only in IE in firefox it works fine). Is there a way to fix this? Or maybe I'm doing somethign wrong.
<div id="divAuto">
....
</div>
<button id="openAuto">SHOW</button>
And here's the js:
$(document).ready(function() {
var dlg = $('#divAuto').dialog({ autoOpen: false, modal: true, show: "fold", hide: "drop", width: "500", height: "370" });
dlg.parent().appendTo(jQuery("form:first"));
$('#openAuto').click(function() {
$("#divAuto").dialog("open");
return false;
});
});
I'm using "appenTo" because I'm using asp.net buttons in the dialog and it's the "fix" to get the buttons to work.
Thanks in advance for any help.
Ariel
Try initiating the dialog in the click event instead.
$("#divAuto").parent().appendTo($("form:first"));
$("#openAuto").click(function() {
$("#divAuto").dialog({
width: "500",
height: "370",
modal: true,
close: function(event, ui) {
$(this).dialog("destroy");
}
});
});