I am trying to create a JQuery-UI dialog with a jquery-ui tabbed construction embedded within it. This is my function:
<script type="text/javascript" language="javascript" charset="utf-8">
function createDialog(title, text) {
var tstr="<div id='tabs' >"
+"<ul>"
+"<li><a href='#tabs-1'>A</a></li>"
+"<li><a href='#tabs-2'>B</a></li>"
+"</ul>"
+"<div id='tabs-1'>"
+"A Stuff Goes Here"
+"</div>"
+"<div id='tabs-2'>B Stuff Goes Here"
+"</div>"
+"</div>"
return $("<div class='dialog' title='" + title + "'><p>" + tstr + "</p></div>")
.dialog({
resizable:true,
height:480,
width:650,
modal:true,
buttons: {
"Dismiss": function() {
$( this ).dialog( "close" );
}
}
});
tabs.tabs();
}
</script>
The dialog appears when the function is called, but the tabs are formatted as links. Can anyone give me an idea as to what is wrong? Note that the function is being called from a JQuery datatables callback.
"tabs" is not defined in your example
since you're creating a dialog in your return you'll need to chain the tabs call with the dialog call.
eg:
...
return $("<div class='dialog' title='" + title + "'><p>" + tstr + "</p></div>")
.dialog({
resizable:true,
height:480,
width:650,
modal:true,
buttons: {
"Dismiss": function() {
$( this ).dialog( "close" );
}
}
}).tabs();
you were on the right path but since "tabs()" is called after the return it'll never execute. also, since the "tabs" variable isn't defined you would've gotten a reference error.
Related
I have several delete href on a page.
</i>
When a user clicks on this link I'm showing a jquery box to ask if he is sure to delete.
Until now everything is working fine, but I can't the window.location.href with the parameters from data-key to work. Some help would much appreciated.
I have followed this example: http://jsfiddle.net/yayh3/3/
<script>
$(".delete").click(
function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:170,
modal: true,
buttons: {
"Verwijder": function() {
var me = $(this),
data = me.data('key');
window.location.href = "pagina_delete.php?id_record="+data.param1+"&id_table="+data.param2+"&table="+data.param3+"&paginanaam="+data.param4+"&template="+data.param5+"&lang="+data.param6;
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
}
);
});
</script>
You need to capture the context of the clicked element.
Directly within the click event handler, you can store the current value of this (which will refer to the clicked element), and then you can use this variable within the nested dialog methods/options.
In this case, you would just use var data = $(self).data('key') within the dialog method.
$(".delete").click(function () {
var self = this;
$("#dialog-confirm").dialog({
resizable: false,
height: 170,
modal: true,
buttons: {
"Verwijder": function () {
var data = $(self).data('key');
window.location.href = "pagina_delete.php?id_record=" + data.param1 + "&id_table=" + data.param2 + "&table=" + data.param3 + "&paginanaam=" + data.param4 + "&template=" + data.param5 + "&lang=" + data.param6;
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
The main page is an .aspx file. I'm trying to generate a popup. When user clicks the Send Email, a javascript on the page calls the openEmailPopup function, shown below.
function openEmailPopup(taskId, popupElementName, gridElementName) {
$("#" + popupElementName).dialog({
width: 1300,
height: 500,
draggable: false,
resizable: false,
modal: true,
open: function () {
$.get("/Resources/Sendmail", function (data) {
$('#masterPvlEmailGrid').html(data);
});
//more code here...
}
});
}
The problem is that the SendEmail.cshtml file depends on some javascript file.
<script language="javascript" src="../../Scripts/file1.js"></script>
<script language="javascript" src="../../Scripts/file2.js"></script>
<script language="javascript" src="../../Scripts/file3.js"></script>
<script language="javascript">
var sendEmailViewModel = new SendEmailViewModel();
var seUploadFilesViewModel = new UploadFilesViewModel();
$(function () {
sendEmailViewModel.Init();
});
</script>
When the response of the ajax call is returned, those above javascript don't execute. There are two solutions for that. Either I add javascript reference on the .aspx page. However, to do that, I also need to add a content placeholder element in the master page. The big problem with that is the actual aspx file has a master page that is nested 2 times deep in other master pages.
Many people relies on those master pages, I want to make sure that there are solutions to that before I touch them.
What about loading and executing those javascript file dynamically? I've done some researches but, I still don't understand how it work with jquery.
Any idea?
EDIT
This is how I'm calling those file.
$.getScript("/Scripts/file1.js", function () {
});
$.getScript("/Scripts/file2.js", function () {
});
$.getScript("/Scripts/file3.js", function () {
});
When I check google tools, I see that all the file being loaded.
You could use jQuery's getScript method, which allows you to load javascript over HTTP and then execute it:
http://api.jquery.com/jquery.getscript/
You might want to look at an AMD like RequireJS (http://requirejs.org/). RequireJS is designed to load JavaScript resources as needed, so you would not need to load them in the main page. In your example, all three files could be returned asynchronously for your popup form.
I am not sure if this will solve your problem because I cannot test it right now. Could you try this out?
function openEmailPopup(taskId, popupElementName, gridElementName) {
$("#" + popupElementName).dialog({
width: 1300,
height: 500,
draggable: false,
resizable: false,
modal: true,
open: function() {
var deferreds = [];
//Store a deferred into the array
function addDeferred(url) {
deferreds.push(
$.getScript(url)
.done(function() {
console.log("Module loaded: " + url);
})
.fail(function(ex) {
console.error(ex);
})
);
};
//Call the scripts
addDeferred("/Scripts/file1.js");
addDeferred("/Scripts/file2.js");
addDeferred("/Scripts/file3.js");
//When all the scripts has been loaded....
$.when.apply($, deferreds)
.done(function() {
$.get("/Resources/Sendmail", function(data) {
$('#masterPvlEmailGrid').html(data);
});
})
.fail(function(ex) {
console.log(ex);
});
//more code here...
}
});
}
I have the following problem with jQuery (1.10.3) tooltip plugin.
I have several links like
<a target="_blank" class="tooltip_top_studios">Link1</a>
and jquery code:
$(".tooltip_top_studios").tooltip({
tooltipClass:'ui-tooltip',
position: { my: "left+15 top", at: "right center" },
show: { effect: "fadeIn", delay: 300},
content: function() {
var img_src = $(this).attr('rel');
var html = "<h1 style='color:#d4dce8;margin-bottom:7px;'>"
+ $(this).attr('title') + "</h1>" + "<span style='font-weight:bold;font-size:10px;margin-bottom:7px;padding:0;display:block;'>"
+ $(this).attr('name') + "</span><img width=280 src='" + img_src + "' /> ";
return html;
},
});
The problem is that when I click the link, tooltip appears without any problem and new tab with link's URLopens, but when I return to the first page tooltip appears again. I have to click somewhere in page to close it.
Maybe there is a way to close all tooltips on window focus automatically ?
Finally I found the solution. The problem caused because then I return on page focus on tooltip anchore was not removed automaticaly, so tooltip executed again.
This code remove focus from all a tags and worked fine :
$(window).focus(function() {
$('a').focus(function() {
this.blur();
});
});
First:
I found that, if you return a null value into the content function, the tooltip will not be shown.
The second point:
You can find elements into html document using:
document.elementsFromPoint
And you have access to the event was fired into the context of content function.
Then the workaround is something like that:
$( "body" ).tooltip({
items: "[data-title]",
content: function() {
if (document.elementsFromPoint(event.pageX,event.pageY).indexOf(this) === -1)
return null;
var title = $(this).data("title");
return title;
},
hide: {
effect: "fadeOut"
}
});
Just a little preface... I am fairly new to jQuery so if something looks wrong or redundant please feel free to offer any helpful suggestions.
Now for the issue. I have 2 modals that are initiated from 2 separate links on the page.
The first modal was fairly problem free. It is a simple form that posts back to the same page. If you are wondering what the items in the "close:" section are, they are form fields that I want to clear the values on when the dialog is closed.
Once I added the second one I have had problems. This modal calls a coldfusion page into a modal to display pictures. The problems occur after opening up the second one. I can not close the second modal from the "close" button. I get the following error.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
I have to close it from the "x" in the upper right hand corner of the modal. After I close it, I get an error when trying to open up the first on.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
Here is the code for it.
$(document).ready(function() {
$(".dig").click(function() {
//based on which we click, get the current values
var cItemName = $("#checklistItemName").attr( "title");
var c2id = $("#check2id").attr( "title");
$("#ItemName").html(cItemName);
$("#ItemID").html(c2id);
$("#objCheckItemName").val(cItemName);
$("#objCheck2ID").val(c2id);
console.log(cItemName);
console.log(c2id);
});
$( "#image-form" ).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
buttons: {
"Submit": function() {
$('#mForm').submit();
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$('#defaultSectionName')
.val('');
$('#defaultSectionDesc_hidden')
.val('');
$('#Photo')
.val('');
$('#objCheck2ID')
.val('');
$('#Check21')
.val('');
},
zIndex: 500
});
The next piece of code is where I believe the problems are occurring.
$( "#image_trigger" )
.click(function() {
$( "#image-form" ).dialog( "open" );
});
var dlg=$('#register').dialog({
title: 'Case Pictures',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:650,
height:450,
buttons: {
close: function() {
$( this ).dialog( "close" );
}
},
zIndex: 500
});
$('#reg_link').click(function(e) {
e.preventDefault();
var linkurl=('assets/includes/modalPictures.cfm' + '?'
+ 'id=' + $("#objCheck2ID").val()
);
dlg.load(linkurl, function(){
dlg.dialog('open');
});
});
jQuery UI: 1.10.1
jQuery: 1.9.1
Server Side: Coldfusion
The HTML is pretty extensive. If you need to see any part of it please let me know. Thanks for your help!
Upper case?
Close: function() {
You have to initialize your jquery dialog before calling the open function.
<script type="text/javascript">
$(document).ready(function () {
initializeDialog();
});
</script>
And change your js file to have the dialog code in initializeDialog() function.
function initializeDialog(){
$("#your-dialog-id").dialog({
autoOpen: false,
buttons: {
"Cancel": function() {
$(this).dialog("close");
}
},
modal: true,
resizable: false,
width: 600px,
height: 400px
});
}
Thanks #bpjoshi
How the new jQueryUI's tooltip widget can be modified to open the tooltip on click event on certain element's on document, while the others are still showing their tootip on mouseover event. In click-open case the tooltip should be closed by clicking somewhere else on the document.
Is this possible at all?
Using jqueryui:
HTML:
<div id="tt" >Test</div>
JS:
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
You can check it using
http://jsfiddle.net/adamovic/A44EB/
Thanks Piradian for helping improve the code.
This code creates a tooltip that stays open until you click outside the tooltip. It works even after you dismiss the tooltip. It's an elaboration of Mladen Adamovic's answer.
Fiddle: http://jsfiddle.net/c6wa4un8/57/
Code:
var id = "#tt";
var $elem = $(id);
$elem.on("mouseenter", function (e) {
e.stopImmediatePropagation();
});
$elem.tooltip({ items: id, content: "Displaying on click"});
$elem.on("click", function (e) {
$elem.tooltip("open");
});
$elem.on("mouseleave", function (e) {
e.stopImmediatePropagation();
});
$(document).mouseup(function (e) {
var container = $(".ui-tooltip");
if (! container.is(e.target) &&
container.has(e.target).length === 0)
{
$elem.tooltip("close");
}
});
This answer is based on working with different classes. When the click event takes place on an element with class 'trigger' the class is changed to 'trigger on' and the mouseenter event is triggered in order to pass it on to jquery ui.
The Mouseout is cancelled in this example to make everything based on click events.
HTML
<p>
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1" title="bla bla 1">
?</button>
</p>
<p>
<input id="input_box2" />
<button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2">
?</button>
</p>
jQuery
$(document).ready(function(){
$(function () {
//show
$(document).on('click', '.trigger', function () {
$(this).addClass("on");
$(this).tooltip({
items: '.trigger.on',
position: {
my: "left+15 center",
at: "right center",
collision: "flip"
}
});
$(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
$(this).tooltip('close');
$(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
e.stopImmediatePropagation();
});
})
})
http://jsfiddle.net/AK7pv/111/
I have been playing with this issue today, I figured I would share my results...
Using the example from jQueryUI tooltip, custom styling and custom content
I wanted to have a hybrid of these two. I wanted to be able to have a popover and not a tooltip, and the content needed to be custom HTML. So no hover state, but instead a click state.
My JS is like this:
$(function() {
$( document ).tooltip({
items: "input",
content: function() {
return $('.myPopover').html();
},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
$('.fireTip').click(function () {
if(!$(this).hasClass('open')) {
$('#age').trigger('mouseover');
$(this).addClass('open');
} else {
$('#age').trigger('mouseout');
$(this).removeClass('open');
}
})
});
The first part is more or less a direct copy of the code example from UI site with the addition of items and content in the tooltip block.
My HTML:
<p>
<input class='hidden' id="age" />
Click me ya bastard
</p>
<div class="myPopover hidden">
<h3>Hi Sten this is the div</h3>
</div>
Bacially we trick the hover state when we click the anchor tag (fireTip class), the input tag that holds the tooltip has a mouseover state invoked, thus firing the tooltip and keeping it up as long as we wish... The CSS is on the fiddle...
Anyways, here is a fiddle to see the interaction a bit better:
http://jsfiddle.net/AK7pv/
This version ensures the tooltip stays visible long enough for user to move mouse over tooltip and stays visible until mouseout. Handy for allowing the user to select some text from tooltip.
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
},
}
);
$(this).tooltip("open");
});
HTML
Test
Sample: http://jsfiddle.net/A44EB/123/
Update Mladen Adamovic answer has one drawback. It work only once. Then tooltip is disabled. To make it work each time the code should be supplement with enabling tool tip on click.
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("enable"); // this line added
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
jsfiddle
http://jsfiddle.net/bh4ctmuj/225/
This may help.
<!-- HTML -->
Click me to see Tooltip
<!-- Jquery code-->
$('a').tooltip({
disabled: true,
close: function( event, ui ) { $(this).tooltip('disable'); }
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});