We can create a button component on the fly by using the following code,
var $page = '<div/>'
$("<a>", {text: "Button"}).
buttonMarkup({
inline: false,
mini: true,
icon: "check"
}).on("click", function () {
//Click Function
}
).appendTo($page);
Like this how to create other JQM components/widgets or suggest me where to find that methods/events in the JQuery Mobile Docs.
Question updated on 10-12-13
Please check the following code
<!DOCTYPE html >
<head>
<title>:::: DYNAMIC JQM PAGE ::::: </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css"/>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(function () {
var page = $("<div/>", {
"data-role":"page"
}).append($("<h1/>")
.text("This is Header"))
.appendTo($.mobile.container);
})
</script>
</head>
<body>
</body>
</html>
above code is not working while creating a mobile page in the document body. How do i achieve this?...
Related
Hi I am creating a typewriting effect Using Type Js Library and I want to know is there any way I can know the Typed JS effect is completed?
Any kind of help is highly appreciated :)
var typed = new Typed('.typed', {
stringsElement: '.typed-strings',
loop:false
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<title>Document</title>
</head>
<body>
<div class="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span class="typed"></span>
</body>
</html>
A quick glance at the library's documentation shows that there is an onComplete parameter that takes a function: docs link
In the onComplete you can set a variable to mark the animation as completed.
let isEffectComplete = false;
const typed = new Typed('.typed', {
stringsElement: '.typed-strings',
loop:false,
onComplete: () => { isEffectComplete = true },
});
I have been experimenting with this for a couple of hours and I remain confused.
I am attempting to open a JQuery UI dialog (modal) when a link ([a] tag) is clicked, getting the content of the dialog window from the href of the link.
So far I have (gleaned from various places) where testb.html is a simple html fragment:
<div><p>Some text</p><p>more text</p</div>
The idea is that when anchor (link) is click the content of testb.html appears in the dialog.
Why doesn't this work???
David (70-year-old pre-Alzheimers ex-programmer with little HTML experience)s
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href).dialog("open");
});
</script>
</head>
<body>
<div class="container"></div>
<p>Click!</p>
</body>
</html>
you can use this code:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p>Click!</p>
</div>
<div id="dialog" title="Basic dialog"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$('.modal').on('click', function () {
var data = $(this).attr('data-get')
$('#dialog').html(data)
$("#dialog").dialog()
});
</script>
</body>
</html>
You run the assignment before the element exists on the page. Wrap it in a load handler
$(function() { // on page load
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
});
})
You cannot open the container as a dialog the way you try it. You need something like
$(function() { // on page load
$(".container").dialog({
autoOpen: false,
width: 750,
modal: true
});
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
$(".container").dialog('open');
});
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#modal" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#modal" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="modal">This my first jQuery UI Dialog!</div>
<p>Click!</p>
</body>
</html>
This opens a jquery dialog modal when the anchor tag is clicked.
Combining bits from the previous answers, I got this, which works!
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<p>Click!</p>
<div id="dialog" title="Basic dialog"></div>
<script>
$('.modal').on('click', function (e) {
e.preventDefault();
$('#dialog').load(this.href)
$("#dialog").dialog()
});
</script>
</body>
</html>
With codeangler's answer, the dialog appeared,but didn't have the content of testb.html, instead had the content of the div.
With mplungjan's answer... Well, I couldn't get it to work.
With Sepehr Pourjozi's answer, the dialog appeared but contained the literal text "testb.html", not the content of testb.html.
Taking hints from all three answers, I got it to work. And now I understand JQuery dialogs a little bit better.
Thanks, all.
David
Iam using fontawesome for the icons right now. I have created my own icons ( in svg ) and now i try to use it as fontawesome does.
Everything is working, my icons are in a json file in svg format and on page load js loads all the icons inside the svg to the appropirate tags. But this is happens only once, on page load. What if i have some dynamically added elements on the body? I need a listener to any append event to readd every icon to the DOM.
Can i do this? How does fontawesome does it?
Here is how i do it right now:
var icons = [];
$(document).ready(function () {
getIcons();
});
function getIcons(){
$.ajax({
url:'/fileDown?param0=/icons.json',
success: function (data){
if(IsJsonString(data)){
icons = JSON.parse(data);
insertIcons();
}
}
});
}
function insertIcons(){
for (const icon of icons ) {
if(icon.svg !== ""){
$(`.hsh.${icon.iconClass}`).html(icon.svg);
}
}
}
What i'm thinking on:
$("body").on("changed appendedTo", function () {
insertIcons();
});
Example html for a basic fontawesome icon:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a26f6e4ee4.js" crossorigin="anonymous"></script> <!-- init font awesome here -->
<title>Document</title>
</head>
<body>
<i class="fa fa-user"></i> <!-- user is there -->
<script>
$(document).ready(function () {
// plane icon will be there even after 5sec.
setTimeout(() => {
$("body").append(" <i class='fa fa-plane'></i> ");
}, 5000);
});
</script>
</body>
</html>
I have this kind of bootstrap popover from W3 schools site and edited code for my situation (see onPopoverHtmlLoad() function):
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
Question is, how can I change HTML data content of popover after I hit
popover button/trigger, please? Is there some function like
onHtmlDomPopoverLoad?
I appreciate solutions in Javascript, but accept JQuery help too. I was looking for similar issues but didn't find anything yet.
You can replace onPopoverHtmlLoad with:
function onPopoverHtmlLoad(){
$("#inpopover_button").text("true")
}
And attach the event handler with:
$('[data-toggle="popover"]').on('shown.bs.popover', onPopoverHtmlLoad)
See the codepen: https://codepen.io/anon/pen/MxXwQe
read about bootstrap popover events here :
https://getbootstrap.com/docs/4.0/components/popovers/#events
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover()
.on('shown.bs.popover', onPopoverHtmlLoad);
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
I'm trying to follow this example: http://easyautocomplete.com/example/ajax-get to create an input field that will autocomplete hints from API.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Remote datasource</title>
<head>
<!-- Easy Autocomplete -->
<link rel="stylesheet" href="/plugins/easy-autocomplete/dist/easy-autocomplete.min.css">
<link rel="stylesheet" href="/plugins/easy-autocomplete/dist/easy-autocomplete.themes.min.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>
<!-- Easy Autocomplete -->
<script src="/plugins/easy-autocomplete/dist/jquery.easy-autocomplete.min.js"></script>
<script>
var options = {
url: "http://localhost:8081/api/customers",
getValue: "name",
template: {
type: "description",
fields: {
description: "email"
}
}
};
$(document).ready(function () {
console.log("ready");
$("#example-ajax-post").easyAutocomplete(options);
});
</script>
</head>
<body>
<input id="example-ajax-post" />
</body>
</html>
In my API response, I can see all my returned values (26 in total) however my input displaying only first 6 hints, even if I try to enter some data that's in my response I can only see the first 6 loaded fields each time.
API Return
Input hint
Am I missing something?
Default value for parameter maxNumberOfElements is 6.
you can increase this by adding this to your options
list: {
maxNumberOfElements: 10,
match: {
enabled: true
}
}
Docs
http://easyautocomplete.com/guide#sec-maxsize