Changing jquery UI dialogue titlebar HTML from span to H2 - javascript

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.

Related

JQuery dialog not displaying content on upgrade to Bootstrap 4

I am working on upgrading our website from Bootstrap 3 to Bootstrap 4. I have a JQuery dialog that no longer works when I change to Bootstrap 4- the content of the dialog is not displayed. The buttons in the JQuery dialog definition are, but nothing else. Any ideas are appreciated!
Bootstrap 3 dialog:
Bootstrap 4 dialog:
var themedialog = $("#theme-change-form").dialog({
autoOpen: false,
height: 'auto',
width: 450,
modal: true,
buttons: {
"Update Theme": updateTheme,
Cancel: function() {
themedialog.dialog("close");
}
},
close: function() {
$('.subtheme-button').removeClass('active');
$('.subtheme-button.selected').addClass('active');
}
});
//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
themedialog.dialog('open');
});
function updateTheme() {
console.log('theme udated');
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<div hidden id="theme-change-form">
<div>
<h3>Air</h3>
<button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
</div>
<!--more buttons here in the same format as above-->
</div>
<button id="change-theme">Change Themes</button>
Thank you!
Remove the hidden attribute on the dialog element. Bootstrap has CSS that sets display: none on elements with that attribute, and it doesn't seem necessary anyway. Your browser's document inspector is a great tool for seeing things like that.
var themedialog = $("#theme-change-form").dialog({
autoOpen: false,
height: 'auto',
width: 450,
modal: true,
buttons: {
"Update Theme": updateTheme,
Cancel: function() {
themedialog.dialog("close");
}
},
close: function() {
$('.subtheme-button').removeClass('active');
$('.subtheme-button.selected').addClass('active');
}
});
//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
themedialog.dialog('open');
});
function updateTheme() {
console.log('theme udated');
}
body {
padding: 30px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<div id="theme-change-form">
<div>
<h3>Air</h3>
<button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
</div>
<!--more buttons here in the same format as above-->
</div>
<button id="change-theme">Change Themes</button>

how to generate media queries with JQUERY

I am trying to display a dialog box when users access a page with a device smaller than a desktop. I am not an expert in jQuery. I tried the following below but was not successful.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
}).show();
} else {
$("ScreenSize").dialog().hide();
}
});
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
This code is executed on Dom ready. Considering that you open that dialog only in the if branch, actually the else branch is useless because when you reload the page, it doesn't get opened at all. Or maybe there is some other logic that you are not providing.
Then .dialog() is a method of the jQuery UI library. You should add also that library in order to get the dialog working. If you open your console you see that the method dialog() is undefined.
Your javascript code is OK. On the html part, jQuery and jQuery UI (for the dialog widget) scripts must be loaded in the correct order: jQuery first, UI after. Try the following code snippet, it works as you wanted.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true
}).show();
} else {
// this part is useless...
$("ScreenSize").dialog().hide();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
</body>
</html>
Why is jQuery needed? Why not just use css media query to display and hide your dialog box.
CSS:
#ScreenSize {
display: none;
}
#media only screen and (max-width: 767px) {
#ScreenSize {
display: block;
}
}
i have used these following below in order to find a solution to my problem
$(function () {
if (screen.width < 1023) {
$("#ScreenSize").show();
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
resizable: false, draggable: false,
})
}
else {
$("#ScreenSize").hide();
}
});
<span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
<div style="margin-left: 23px;">
<p>go to Text Box</p>
</div>
<//div>

Resizable div just isn't working no matter what I do

I've been trying to use JqueryUIs resizable to create resizable divs like on jsfiddle for example. Jsfiddle makes use of JqueryUI resizable with handles so that you can expand the code editor or the output area displaying the dhtml results (a design etc). I've just about tried every solution given to others who experience problems working with jquery ui's resizble. Is there a way to create a resizable div with CSS only and have a custom handle? I've tried this as well and it's not working either http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/ but it's what I'm looking for; two divs, one containing the main content and the other containing sidebar stuff. I made a fiddle quickly of that solution given here: http://jsfiddle.net/asx4M/1/ I would appreciate it if someone could tell me what it is I'm doing wrong or provide me with another solution for what I'm trying to do.
here's the code as well:
<!DOCTYPE html>
<html>
<head>
<style>
#sidebar {
width: 49%;
}
#content {
width: 49%;
float: left;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery- ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$( "#sidebar" ).resizable({
});
$("#sidebar").bind("resize", function (event, ui) {
var setWidth = $("#sidebar").width();
$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);
});
});
</script>
</head>
<div id="sidebar">
<div class="sidebar-menu">
<!-- all your sidebar/navigational items go here -->
</div>
</div>
<div id="content">
<!-- all your main content goes here -->
</div>
$('#content).width(1224-setWidth);
$('.menu).width(setWidth-6);
Should be
$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);
The problem is with the quotes that you have not closed. for menu class and content id
$(document).ready(function() {
$( "#sidebar" ).resizable({
});
$("#sidebar ").bind("resize", function (event, ui) {
var setWidth = $("#sidebar").width();
$('#content').width(1224-setWidth);
$('.sidebar-menu').width(setWidth-6);
});
});

click handler with dojo editor

i have this code:
<!DOCTYPE HTML>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
type="text/javascript" djConfig="parseOnLoad: true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var myButton = dojo.byId("btn");
dojo.connect(myButton, "onclick", function (evt) {
require(["dojo/_base/xhr", "dojo/parser", "dojo/dom"], function (xhr, parser, dom) {
xhr.get({
url: "teste_apagar.php",
load: function (data) {
alert("as");
var um = [];
dijit.registry.filter(function(w){
if(dojo.indexOf(um)){
w.destroyRecursive();
}
});
dom.byId("result").innerHTML = data;
parser.parse("result");
}
});
});
});
</script>
</head>
<body class="claro">
<script type="text/javascript">
dojo.require("dijit.Editor");
</script>
<div id="btn" style="width: 100px; height: 30px; margin-bottom: 150px; background-color: red;">load</div>
<div id="result">
</div>
</body>
</html>
However, when i click in bold button, or italic, even with right click in top bar with the formatting options, the ajax request is reloaded. So the dojo editor is loaded when i press the formatting toolbar
Any idea ? demo here
You need to execute Dojo code once Dojo is loaded. See http://jsbin.com/ukesup/7.
In the way you are doing the 'myButton' is null beacuse dojo isn't loaded yet and dojo.byId returns invalid value or simply doesn't exist.
Also remember to load required widgets once dojo is loaded. In the sample i used the Dojo <1.7 way:
dojo.addOnLoad(function() {
dojo.require("dijit.Editor");
...
more code here
...
});

Modal dialogs from within a tabbed UI (Improved example)

(I have tightened up my original example)
I'm trying to invoke modal dialogs from within a tabbed UI, and I'm confused about the behavior I'm seeing. The first time I display the UI, my dialog behaves as expected, I can pull the data out of the fields, everything's wonderful.
tabtest2.html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabtest 2</title>
<link rel="stylesheet" type="text/css" href="js/css/smoothness/jquery-ui-1.7.2.custom.css" media="screen"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var tabs = $('#tabs').tabs({
load: function(event, ui)
{
initializeUI();
}
});
});
function initializeUI()
{
jQuery("#button1").click(function()
{
$(initializeUI.win).dialog("open");
});
$(initializeUI.win) = jQuery("#window1");
//instantiate the dialog
$(initializeUI.win).dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Create Agent',
overlay: { opacity: 0.5, background: 'black'},
buttons:
{
"Check Text 1": function()
{
var t1 = $("#text1");
alert("text 1 = " + t1.val());
},
"Close": function()
{
$(initializeUI.win).dialog("close");
}
}
});
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Tab1</li>
<li>Google</li>
</ul>
</div>
</body>
</html>
And tab1.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tab 1</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
</head>
<body>
<button id="button1" class="ui-button ui-state-default ui-corner-all">Button 1</button>
<div id="window1" style="display:none">
<form>
<fieldset>
<label for="text1">Text 1</label>
<input type="text" name="text1" id="text1" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
</body>
</html>
This allows the dialog to (apparently) work on repeated tab selections, but when I try to change the contents of the text field and examine it, I get the old value (the value from the first invocation)!! It's as if I have created a new copy of the dialog and it's fields, but the original text field is sitting there unseen in the original dialog window, returning it's old results.
Obviously, there's a paradigm for handling these dialogs, divs and tabs that I haven't grasped yet. Anyone care to point out my errors?
In your example you are using the same remote content twice and more importantly, using the same ID in both tabs. After the content of the second page is loaded into the DOM, you will have two divs with the same ID. Since an ID is supposed to be unique on a page, the "old" values may simple be the values of the first div that javascript happens to find in the DOM.
You also appear to have two buttons with the id "button1"; one inside the modal div and one outside. This may also cause problems.
Using FireBug, I see that I create a new 'dialog' DIV element everytime I call InitializeUI(). So deleting the old DIVs seems to give me the desired results:
function initializeUI()
{
jQuery("#button1").click(function()
{
initializeUI.win.dialog("open");
});
initializeUI.win = jQuery("#window1");
// remove old 'dialog' DIV elements
$('div[role="dialog"]').each(function() {
$(this).remove();
});
//instantiate the dialog
$(initializeUI.win).dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Create Agent',
overlay: { opacity: 0.5, background: 'black'},
buttons:
{
"Check Text 1": function()
{
var t1 = $("#text1");
alert("text 1 = " + t1.val());
},
"Close": function()
{
initializeUI.win.dialog("close");
}
}
});
}

Categories

Resources