I have dynamically added a select box of dijit.form.filteringSelect type into my page.
I have called an ajax request on some button click and the content returned from the ajax request contains select box of dijit.form.filteringSelect. The select box shows up but does not appear as a dijit element.It shows up as a normal html select box without dijit style of select box.
My page is something like this:
<head>
<style type="text/css">
#import "dojo-1.7/dijit/themes/claro/claro.css";
#import "dojo-1.7/dojo/resources/dojo.css";
#import "dojo-1.7/dojox/grid/resources/claroGrid.css";
</style>
<script type="text/javascript" src="dojo-1.7/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.FilteringSelect");
</script>
</head>
<body class="claro">
//ajax output appended to body after some button click
<select id="testSelect" data-dojo-type="dijit.form.filteringSelect">
<option value="">...</option>
</select>
</body>
I think the problem is rendering. How can I render dijit element when they are added dynamically using server side script like php in my case. Have I done the parsing correctly?
If you know the id of the new node, you can call the dojo parser for just that node.
dojo.parser.parse("testSelect");
http://dojotoolkit.org/reference-guide/1.7/dojo/parser.html#examples
Related
On our website we use a HubSpot registration form with custom styling that loads in a fancybox popup.
This is how it should look
Our problem is that we need to add an 'on click trigger' (see HTML and JS below) to load the dropdown with the right styling We want to form to work properly without the trigger. Without the click trigger it looks like below:
Also the dropdown isn't working when this form appears.
Our code looks like:
<div class="popup-mask">
<div class="popup sm" id="popup-gartner-get-in-touch">
<h4 class="section-title blue">Get in touch</h4>
<div class="download-form">
<div class="hubpop">
<div class="download-form">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
$('a[href="#popup-gartner-get-in-touch"]').click(function() {
hbspt.forms.create({
portalId: "538005",
formId: "190bdb23-c363-4d93-8189-9c7d28782017",
target:'.hubpop',
});
});
</script>
</div>
</div>
</div>
</div><!-- end popup -->
</div><!-- end popup-mask -->
My guess is that you are using some kind of jQuery plugin to style the dropdown. The problem is, your code for that is trying to style something that doesn't exist in the DOM until that trigger is clicked. What you should do is put that jQuery plugin code into the forms onReady function.
hbspt.forms.create({
portalId: '',
formId: '',
onFormReady: function($form) {
// YOUR CODE TO MODIFY THE SELECT DROPDOWN SHOULD GO HERE
console.log($form.find('select'));
}
});
If you're just looking to style the form selects without using a jQuery plugin, you can use this tool to get the css needed to do that.
I am trying to insert some MathJax code into a contentEditable div, like so:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> </script>
</head>
<body>
<div id="editor" contentEditable="true" style="width:400px;height:400px;">
</div>
and the JS
$(document).ready(function () {
$('#editor').focus();
var code = "\\alpha";
var html = '<span id="_math"><script type="math/tex;mode=in-line">'+ code +'</script></span>';
document.execCommand('insertHTML', false, html);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, '_math']);
});
Which renders OK, but once this is inserted, the element freezes and further input is not possible. Can someone point out the problem here.
You need to call MathJax when the content changes. See this fiddle: http://jsfiddle.net/rfq8po3a/ (note, I had to escape the < and > in html).
This was achieved with a few things:
1) move the MathJax logic into its own function, refreshMathJax which will re-populate the tag and code.
2) call this function when first loading the page, and again onBlur.
3) Clear the editable element onFocus. Without this, the editable element can't be reused easily. You can change the onFocus callback function to instead replace the contentEditable html with the original LaTeX content.
I'm having trouble opening a dijit.Dialog from another dijit.Dialog. I've seen other posts here suggesting that it works fine as of Dojo version 1.5, but I'm using Dojo 1.6.1 and not having much luck. The Dojo documentation at http://dojotoolkit.org/documentation/tutorials/1.7/dialogs_tooltips/ seems to suggest that this is supported where it says, "One important fact to know about dijit/Dialog is that instances are added to a "stack" so that you may have instances on top of one another."
When I call show() on a second dialog from one that is currently shown, the second dialog is barely visible for a moment and then the browser refreshes, leaving just the first dialog shown.
Here's a simple example:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dijit.Dialog");
dojo.ready(function () {
dijit.byId("dialog1").show();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit.Dialog" id="dialog1" data-dojo-props="title:'Dialog 1'">
I'm dialog 1
Open dialog 2
</div>
<div data-dojo-type="dijit.Dialog" id="dialog2" data-dojo-props="title:'Dialog 2'" style="visibility:hidden;">
I'm dialog 2
</div>
</body>
</html>
I have a feeling I'm missing something simple. Can anybody help me out? Ideally dialog1 would stay in the background while dialog2 appears on top of it as a modal dialog.
You have an anchor tag, it fires a document.location.href = "" since the onclick returns true.
See following:
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
Correct to
<a href="javascript:void(0); "
onclick="dijit.byId('dialog2').show(); return false ">
<!-- note 'false' -->
Open dialog 2</a>
If the onclick returns a true (the .show() does that) , then the expected behavior of an <a> is to be expected, youre clicking a link that will bring you to another page. While the hrefis a blank, then same page is reloaded.
I want to display basic portlet on mozilla browser in dojo 1.7, but the following is displaying data as simple text without actually creating any portlet using dojo API. Could anyone please tell me what wrong I'm doing?
<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../lib/dijit/themes/claro/claro.css"/>
<style type = "text/css">
#import "../lib/dojox/widget/Portlet/Portlet.css"</style>
<script src = "../lib/dojo/dojo.js" data-dojo-config = "async: true, parseOnLoad:true" >
dojo.require("..lib/dojox/widget/Portlet");
dojo.require("..lib/dijit/dijit");
</script>
</head>
<body class="claro">
<div data-dojo-type="dojox.widget.Portlet" title="A Simple Portlet">
<div data-dojo-type="dojox.widget.PortletSettings">
This is a simple setting widget.
Put Whatever you like in here
</div>
<div style="height: 100px;">
The contents of the portlet go in here.
</div>
</div>
</body>
</html>
Take a look at dojox.widget.Portlet source code. It's not rewritten to AMD format and therefore you are not able to resolve dependencies. Even the test dojox/widget/tests/test_Portlet.html does not work.
To workaround this switch the loader into sync mode defining async: false or completely omit the definition as in Dojo 1.7 the synchronous mode is default.
There is also another unresolved dependency, which I resolved by explicitly requiring AMD module dijit._Container before requiring dojox.widget.Portlet:
dojo.require("dijit._Container");
dojo.require("dojox.widget.Portlet");
See the working example at jsFiddle: http://jsfiddle.net/phusick/MWnYZ/
I read a lot about how to add stuff dynamically in jquery mobile, but I couldn't figure out how to add links.
Currently my solution looks like this:
Add a new Page - with id (id="list-1")
Creating a Link for it (href="#list-1")
This solution works perfectly in static pages, but I want to do it dynamically. I have tried a lot with page() and stuff like that but nothing helped me.
My questions are:
How do I add dynamic links & pages?
Did I choose the right way to use ids & anchors (#list-1) as links or is there another solution for jquery mobile?
Let me know if you need more information
To add dynamic links, I have found the easiest way is to just have an event listener waiting for a click on those links. This event listener then saves any parameters you want to pass into the next page you are visiting. You pass the parameters from the list element to the event listener by just specifying parameters within each "li" element.
(create the HTML for a list dynamically & store it into list-1-html)
$("div#my-page div[data-role=content]").html(list-1-html);
$("div.list-1 ul").listview();
$("div.list-1 ul").listview('refresh');
Then your event listener would look something like:
$('#my-page').delegate('li', 'click', function() {
passedParameter = $(this).get(0).getAttribute('passed-parameter');
});
When jQuery Mobile loads your next page, you'll probably want to load this page dynamically and you'll have this passedParameter variable available to you. To load the page dynamically, just add a listener that waits for JQM to try to load the page:
$('[data-role=page]').live('pageshow',function(e, ui){
page_name = e.target.id;
if (page_name == 'my-page-2'){
(do something with passedParameter)
}
});
This is the workflow I use with jQuery Mobile and it has been working just fine. I'm guessing in future releases, though, that they'll build in some kind of support for passing dynamic parameters to pages.
Any new enhancement to the DOM should be done before the page initializes. But by default JQM automatically initializes the page once the page is load in browser.
Hence first you need to set autoInitializePage property to false and then call initializePage() method after the new page and links are add to the document. Hope this helps.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).ready(function() {
//add a link.
$("#page1 div[data-role='content']").append('Next Page');
//add a page.
$('body').append(' <div data-role="page" id="page2" data-title="next page"><header data-role="header" class="header"> <h5>Page 2</h5></header><div data-role="content"><h3>Good Morning...</h3>Back</div><footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer></div>');
});
window.onload = function() {
$.mobile.initializePage();
};
</script>
</head>
<body>
<div data-role="page" id="page1">
<header data-role="header" class="header">
<h5>jQuery Mobile</h5>
</header>
<div data-role="content">
<form method="get" action="" data-transition="slideup">
<label for="email">Email:</label>
<input type="email" name="email" id="email" value=""/>
</form>
</div>
<footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer>
</div>
</body>
</html>