Develop Reference

Changing jquery UI dialogue titlebar HTML from span to H2

I am using a JQuery UI dialogue and it renders the below HTML. I want the span tag to be replaced with H2 tag, do we have any way to do this
<div class="ui-dialog-titlebar ui-widget-header">
<span class="ui-dialog-title" id="ui-id-20">
</span>
I am using the Jquery UI 1.11

Please consider the following example, based on https://api.jqueryui.com/1.11/dialog/#entry-examples
$(function() {
$("#dialog").dialog({
autoOpen: false,
create: function(e, ui) {
var w = $(this).dialog("widget");
var t = $(".ui-dialog-title", w);
var h2 = $("<h2>", {
id: t.attr("id"),
class: t.attr("class")
}).html(t.text());
t.replaceWith(h2);
}
});
$("#opener").click(function() {
$("#dialog").dialog("open");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
Please see:
https://api.jqueryui.com/1.11/dialog/#event-create
You can inject your own code or elements during the create callback.

Fancy Box is not working with Box slider

I am doing a project for one of my client. I am using box slider for the banner and it works fine. For a specific page on the website I am also trying to use fancy box for image light box.But It doesn't work however box slider is still working. Here is the head tag.
<!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#single_2").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'float'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
And here is the the element where I am trying to use fancy box
<a href="images/lightbox/groups-size-option.jpg" target="_blank" id="single_2" title="Work Shops Chart">
<img src="images/group-size.jpg" alt="" border="0" />
</a>
when I disable box slider fancy box works. But when it is active fancy box doesn't work. Please help asap.Thanks

jQUery Dialog Box when Clicking Navigation Bar Link not Working

I'm trying to set up a jQuery Dialog box from clicking a list element in my navigation bar. I have the code working for a separate project when clicking a canvas element but it wont work for this application. My code is as follows:
Clickable Div in Nav-Bar List:
<nav id="nav_bar">
<ul>
<li><a class="fancypdf" href="img/resume.pdf">Resume</a></li>
<li><a>Youtube</a></li>
<li class="contact" style="cursor:pointer;">Contact</li>
</ul>
</nav>
Div that Should Show up in Dialog Box:
<div class='dialog'>
Hello
</div>
jQuery:
<script>
$(function(){
$(".contact").click(function(event){
$(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>
My "imports":
http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script type="text/javascript" src="js/libs/fancybox-2.1.4/jquery.fancybox.pack.js"> </script>
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">
Here is all of my main script tags:
<script>
$(".fancypdf").click(function(){
$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
</script>
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>window.jQuery || document.write('<script src="js/libs/jquery- 1.7.1.min.js"><\/script>');</script>
<!-- FancyBox -->
<script src="js/fancybox/jquery.fancybox.js"></script>
<script src="js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title = this.title + " - " + $(this.element).data("caption");
}
});
}); // ready
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeShow : function(){
this.title = $(this.element).data("caption");
}
});
});
</script>
<script>
var jquery = jQuery.noConflict();
jquery(function(){
jquery(".contact").click(function(event){
console.log("clicked");
jquery(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>

It looks like you forgot to include jQuery UI or the order of jQuery and jQuery UI loaded are wrong.
Your code is working fine.
Tested in jsBin
Just make sure all js are included properly:
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Error in jquery Dialog when used with jquery tablesorter pager JavaScript runtime error: Object doesn't support property or method 'dialog'

I have a Admin screen in Area = "PrivateCEQRApplication". I am using Jquery table sorter (http://tablesorter.com/docs/) and jquery dialog (https://jqueryui.com/dialog/#default) in that page. I am using MVC4 and razor.
My view is
#model CEQRApplication.Areas.PrivateCEQRApplication.Models.CEQRUser
#{
ViewBag.Title = "AdminPage";
Layout = "~/Views/Shared/_LogoutLayout.cshtml";
}
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/jquery-ui.css")" />
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (event) {
$(".tablesorter")
.tablesorter({
widthFixed: true,
cssChildRow: "expand-child",
widgets: ["zebra"],
headers: { 0: { sorter: false } }
, onRenderHeader: function () {
this.wrapInner("<span></span>");
}
, debug: false
})
.tablesorterPager({
positionFixed: false,
container: $("#pager")
})
.bind('pagerChange', function () {
$('.expand-child td').hide();
});
$('.buttonsAddUser').click(function (event) {
$("#editResult").dialog({
title: 'Add User',
autoOpen: false,
resizable: false,
height: 500,
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load('#Url.Action("AddUser", "Admin")');
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$("#editResult").dialog('open');
return false;
});
});
</script>
my button and div for rendering dialog
<td style="padding-left:30px;">
<div class="buttonsAddUser">
<img src="#Href("~/Content/themes/base/Images/add-users.png")" style="height: 2.0em; width: 3.0em; vertical-align:middle; display:inline-block; cursor:pointer;" id="AddRow" alt="Add User" title="Add User" />
Add New User
</div>
</td>
<div id="editResult" title="Edit User">
</div>
Now the issue is when i use these script only on the page and remove table sorter
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/jquery-ui.css")" />
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
dialog works
and when i use these script only on the page and remove dialog
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
sorter works
but if i put the j-query script for both sorter and dialog dialog throws the error
**
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'**
I am using tablesorter.js which is dependent on jquery.js file. Modal dialog is also dependent on jquery-1.9.1.js. Since 2 jqueries can't be on the same template how can I get both tablesorter.js and jquery dialog to work together? is there any way i can resolve this issue I will really appreciate the help.
Also, I am not very clear on the concept of bundling. So if i want to bundle the scripts shown above how will i do it.
Thanks

You have 2 versions of jQuery loaded (1.9.1 and latest).
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
jQuery UI is loaded after the first one, and is attached to that instance of jQuery. When you load the second jQuery, you're essentially throwing out the first one along with any plugins attached to it.
Pick one version of jQuery that works with both jQuery UI and the sorter, and make sure the jQuery script the first of the scripts you load, and both the dialog and sorter should work. For example...
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
--- Update ---
Since it appears that you need different versions of jQuery... one for jQuery UI (1.9.1) and one for the sorter (1.4.x, in jquery-latest.js), you're going to have to do something like this...
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script type="text/javascript">
$oldJQuery = $.noConflict();
// $ is now 1.9.1, $oldJQuery is the first jQuery that was loaded ("latest")
</script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
Anywhere where you need to access the table sorter plugin, you need to use $oldJQuery, otherwise just use $...
<script type="text/javascript">
$(document).ready(function (event) {
$oldJQuery(".tablesorter")
.tablesorter({
widthFixed: true,
cssChildRow: "expand-child",
widgets: ["zebra"],
headers: { 0: { sorter: false } }
, onRenderHeader: function () {
this.wrapInner("<span></span>");
}
, debug: false
})
.tablesorterPager({
positionFixed: false,
container: $("#pager")
})
.bind('pagerChange', function () {
$('.expand-child td').hide();
});
$('.buttonsAddUser').click(function (event) {
$("#editResult").dialog({
title: 'Add User',
autoOpen: false,
resizable: false,
height: 500,
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load('#Url.Action("AddUser", "Admin")');
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$("#editResult").dialog('open');
return false;
});
});
</script>

jQuery UI does not load on $("#content").load page for .button

I seem to make a mistake in the following:
html: index.html, main.html, etc
js: jQuery, jQuery UI, own.js, own_main.js
The end result should be an index page that based on a menu choice loads a html in a div.
The HTML that loads has a button element that I want to use with jQuery UI.
Index.html
<html lang="us">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dev</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="css/kendo.dataviz.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link href="css/typ.css" rel="stylesheet" />
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/typ.js"></script>
<script src="js/typ-persons.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
typ.js file
function currentLoc(goToLoc) {
if (CheckLogin() == 0) {
//Not logged in, go to main
$("#content").load("/main.html");
window.localStorage.globalLocation = "/main.html";
} else {
if (goToLoc == '') {
console.log("No GoToLoc: " + goToLoc);
if (window.localStorage.globalLocation == '') {
console.log("No Global location");
$("#content").load("/main.html");
window.localStorage.globalLocation = "/main.html";
} else {
console.log("Global Location " + window.localStorage.globalLocation);
$("#content").load(window.localStorage.globalLocation);
}
} else {
console.log("GoToLoc " + goToLoc);
$("#content").load(goToLoc);
window.localStorage.globalLocation = goToLoc;
}
}
}
persons.html
<script src="js/typ-persons.js"></script>
<div class="container">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
* + html #toolbar {
display: inline;
}
</style>
<div id="toolbar" style="width:100%;" class="ui-widget-header ui-corner-all">
<button id="btnNew" ></button>
<button id="btnSave"></button>
<label for="persons">Find Person by Name or ID: </label>
<input type="text" class="input-sm" id="persons">
<input type="hidden" id="person-id">
</div>
</div>
typ-persons.js
$(function () {
$("#btnNew").button({
text: false,
label: "New Person",
icons: {
primary: "ui-icon-document"
}
})
.click(function () {
});
$("#btnSave").button({
text: false,
label: "Save",
disabled: true,
icons: {
primary: "ui-icon-disk"
}
})
.click(function () {
});
});
On the persons page there is also an autocomplete element with json data.
This works like a charm.
The problem is that the toolbar does not get the buttons applied from the typ-persons.js.
When I add the jQuery UI to the persons.html the buttons do work and get styled as they are supposed to.
The problem then is that jQuery UI loads twice and the autocomplete drowdown disappears on mouse over.
Kind of a paradox here and I would like both to work.
Thanks for your help,
Joris

I have the hunch that your persons.html file is the main.html addressed in the code. Otherwise I can't see where do you load persons.html or what are you loading when you load main.html.
Why are you adding typ-persons.js to persons.html, if you already have it in your main html file? In the way it's added, there's going to be double binding on button clicks. More than once, I believe. It would work on first load and then screw button behavior for good.
EDIT: After OP clarifications, these are my suggestions.
First: instead of putting new JS into persons html, make it just plain html. Make sure you don't use id attributes when that content is prone to be loaded several times. In that case, it's best to use classes.
<div class="container">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
* + html #toolbar {
display: inline;
}
</style>
<div id="toolbar" style="width:100%;" class="ui-widget-header ui-corner-all">
<button class="btnNew" ></button>
<button class="btnSave"></button>
<label for="persons">Find Person by Name or ID: </label>
<input type="text" class="input-sm" id="persons">
<input type="hidden" id="person-id">
</div>
</div>
Second: since you won't load new JS in that ajax call, you need to give the new buttons their behavior somewhere, right? Try to do that after they're appended, using jQuery's callback. I'd reccomend you use get method instead of load to have a bit more control on new content. Instead of
$("#content").load("/persons.html");
Try
$.get("/persons.html",function(responseText) {
var newElement=jQuery(responseText);
$("#content").append(newElement);
$(".btnNew", newElement).button({
text: false,
label: "New Person",
icons: {
primary: "ui-icon-document"
}
}).click(function () {
});
$(".btnSave",newElement).button({
text: false,
label: "Save",
disabled: true,
icons: {
primary: "ui-icon-disk"
}
}).click(function () {
});
});
Third: whatever listener you need to be set on dynamic elements, delegate them to the document to avoid needing to redeclare it (with the risk of double binding). I see no examples of this in your original post, but if you have any case of click, focus, or blur listeners (to name a few) I'll include a practical example.