jQuery UI Dialog with an embedded video problem in IE - javascript

I have a link which when clicked opens up a jQuery UI dialog, the data is loaded in the dialog through ajax which is an embedded flash video(using flowplayer). The probelm in ie is that when i click on the link the dialog opens and the videos starts to play and when i close the dialog, the video still continues to play. If i click on the link again the dialog opens up and the video plays but not from the start.
The main html file has the following code
<script type="text/javascript">
$(document).ready(function(){
var $dialog = $('<div> </div>');
var dialogOpts = {
title: "My Videos",
modal: true,
autoOpen: false,
height: 500,
width: 800
};
$('.videobox').one('click', function(){
$dialog.load('data.html').dialog(dialogOpts);
});
$('.videobox').click(function(event){
event.preventDefault();
var url = event.target;
$dialog.dialog('open');
return false;
});
})
</script>
Click me!
and the remote file has the following code
<div id="player" style="width:640px;height:360px;"></div>
<script>
$f("player", "flowplayer-3.2.2.swf", "004.flv");
</script>
Everything works fine in FF, Safari and chrome, but in ie the video does not stop and continues to play even after the dialog is closed. I have spent a lot of time debugging but nothing seems to work. Cna anybody help please!!

replace code with this...
<script type="text/javascript">
$(document).ready(function(){
var $dialog = $('<div> </div>');
var dialogOpts = {
title: "My Videos",
modal: true,
autoOpen: false,
close: function() {
$(this).dialog('destroy').empty();
},
height: 500,
width: 800
};
$('.videobox').one('click', function(){
$dialog.load('data.html').dialog(dialogOpts);
});
$('.videobox').click(function(event){
event.preventDefault();
var url = event.target;
$dialog.dialog('open');
return false;
});
})
</script>

On dialog close you need to call the pause and then the unload methods of the player.
Something like
$f().pause().unload();

Related

How to open a jQuery dialog box only when first visited/refreshed

Is it possible to set a specific webpage to auto open a jQuery dialog box only when first visited/refreshed and not open every time other pages lead to the page?
/*HTML*/
<div id="dialog" title = "Welcome" class="white">
<p>Please Enter Your Name</p>
<label for="FirstName">Name: </label>
<input type = "text" id="input"/>
</div>
/*jQuery*/
$(function () {
$("#dialog").dialog({
modal: true,
dialogClass: 'defaultDialogClass',
buttons:{
Ok: function(){
$(this).dialog("close");
}
}
});
});
The absolute simplest way:
if (!localStorage.getItem('visitedOnce')) {
// Your code for showing the modal/whatever
localStorage.setItem('visitedOnce', '1');
}
You're setting a flag on the user's machine that says they have been there, then checking when the page loads if that flag has been set.
Check localStorage here
Interesting. Andrew answered your question. Just adding this since you also want to run the dialog when the page is reloaded.
$( document ).ready(function() {
//run the method
checkWhatsGoingOn();
});
var checkWhatsGoingOn = function(){
//if page is reloaded or localstorage value's pair is not set
if((location.reload()) || (!localStorage.getItem('visited')) ){
//set it to true
localStorage.setItem('visited', 'true');
//run the dialog
myDialog();
}
}
var myDialog = function(){
$("#dialog").dialog({
modal: true,
dialogClass: 'defaultDialogClass',
buttons:{
Ok: function(){
$(this).dialog("close");
}
}
});
}
Hope this helps as well.

Close a JQueryUI dialog works only one time

I was looking at this answere jQuery how to close dialog from iframe within dialog?.
I have the same situation i.e. a page that calls a jqueryui dialog in this way:
var message = '<div id="pickDialog"><iframe frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe></div>'
$(message).dialog({
modal: true,
width: 'auto',
title: 'Seleziona'
});
In the Anagrafica page, when the user press a button I run another jqueryui dialog as follows
var message = '<div>Hai selezionato ' + value + '.</div><div>Confermi?</div>'
$('<div></div>').html(message).dialog({
modal: true,
title: 'Conferma',
buttons: {
"Si": function () {
window.parent.setCodice(value);
$(this).dialog("close");
window.parent.closePick();
},
"No": function () {
$(this).dialog("close");
}
}
});
Function closePick in main page is:
function closePick() {
$('#pickDialog').dialog('close');
return false;
}
This code works... but only first time! When I open the iframe id="pickDialog" the second time, when I press Si button the dialog doesn't close.
The function closePick is executed and I haven't errore in Javascript console.
What could it be?
I've solved this issue placing in the html page this
<div id="pickDialog" style="display:none"></div>
and then the jquery function becomes
function pickDialog() {
var message = "<iframe width="100%" height="100%" frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe>"
$("#pickDialog").dialog({
modal: true,
width: dWidth,
height: dHeight,
title: 'Seleziona'
}).html(message);
}
The other code is unchanged. I don't know why but this solved the issue.

clicking a link in jqueryui dialog

I'm using jquery dialog for displaying html files in a modal dialog:
main site calling test.html:
<body>
<div id="layer" style="display: none;">
</div>
</body>
<script type="text/javascript">
$("#layer").dialog({
dialogClass: 'noTitleStuff',
autoOpen: false,
position : ['center',20],
/*draggable: false, */
resizable : true,
modal : true,
show : 'fade',
hide : /*'drop'*/'fade',
width: 'auto',
heigth: 'auto',
open: function() {
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
},
});
$( function() {
$("#layer").load('test.php', function() {
$("#layer").dialog("open");
});
});
</script>
This works fine and the content of test.php is displayed well. But when i'm clicking a link in test.php the link is opened in the whole browser windows. How i can display the new site in the dialog too?
Thanks for your help
Load the content of new url to the dialog.
$(function(){
$(document).on("click", ".yourLinkCssClassName", function (e) {
e.preventDefault();
$.get($(this).attr("href"), function (data) {
$("#layer").html(data);
});
});
});

How to open jQuery modal dialog using <input type="button"> instead of anchor tag?

We previously have:
<input type='button' value='Some Button' onClick="window.open('somefile.php')">
Now we want to activate jQuery UI modal dialog instead of having a pop-up. We can trigger the modal dialog if we use an anchor tag like so: Open Dialog.
But what if it's an input button?
I am using this script to call the dialog (and so that it can open a file into the dialog box):
$(document).ready(function() {
$('.classfordialog').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #content')
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
Src: http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
You can use anything to activate the opening of the jQuery Dialog.
For example.
$(function(){
$('.classfordialog').click(function(e){ e.preventDefault(); $('#dialog').dialog(); });
});
You can add the class to either a button, input, anchor, image, etc...
Well you obviously cant get the link and title from the "Link/A" if it isnt there?
$(document).ready(function() {
$('.classfordialog').each(function() {
var $dialog = $('<div></div>')
.load('somefile.php #content')
.dialog({
autoOpen: false,
title: 'Some title',
width: 500,
height: 300
});
$('.inputdialog').click(function(e){
e.preventDefault();
$dialog.dialog('open');
});
});
});

ui Dialog works once in IE

I hope someone can help with this problem. I am using ui Dialog that pops up on clicking a link with the same class. The problem is that the link work great once but if i click it again or another link with the same class then only the overlay loads but not the content box in IE only. It works great in firefox.
My script includes an ajax post, if i remove the ajax code then the box works fine on every click.
My code:
$().ready(function() {
$('#dialog').dialog({
autoOpen:false,
title: $(this).attr("title"),
modal: true, width: 450, height:"auto", resizable: false,
close: function(ev, ui) { $(this).remove(); },
overlay: {
opacity: 0.5,
background: "black"
}
});
$(".mybutton").click(function(){
$.post($(this).attr("href"), { },
function(data) {
$('#dialog').html(data);
}
);
$('#dialog').dialog('open');
return false;
});
});
I have multiple links with the class "mybutton" and a div with the id #dialog . I am also using the latest version of jQuery and ui.
Any help would be greatly appreciated. Thanks
I am using IE8, jQuery 1.3.2, jQuery UI 1.7.1
The post is done asynchronously by default. It looks like you expect it to be synchronous. Try moving the open of the dialog into the callback after the data is set rather than in the click function -- which may execute before the callback returns.
move the open into the callback...
$('#dialog').html(data).dialog('open');
I was having the same problem. I resolved it by managing the state of the Dialog myself...creating a new one and disposing of it each time.
function makeDialog()
{
var html = '';
html += '<div>My dialog Html...</div>';
return $(html).dialog(
{
position: 'center',
modal: true,
width: 518,
height: 630,
autoOpen: false,
close: function() { $j(this.remove(); }
});
}

Categories

Resources