I have a comboxbox loading its data from a url store. My code is below... What I noticed in Firebug is that the Combobox loads this info once I put the focus on it. I would love to have the Combobox to populate when the page is done loading.I am guessing I use dojo.ready for this? Does anyone have a suggestion as to how I would pull this off? Many thanks! Janie
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="lib/dojo/dijit/themes/claro/claro.css" />
<style type="text/css">html, body {
width: 100%;
height: 100%;
margin: 0;
}</style>
<script src="lib/dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>require(["dojo/ready", "dojo/data/ItemFileReadStore", "dijit/form/ComboBox"]);
</script>
</head>
<body class="claro">
<label for="user">User: </label>
<div dojoType="dojo.data.ItemFileReadStore" url="test.json" jsId="countryStore">
<input dojoType="dijit.form.ComboBox" searchAttr="last_name" store="countryStore" class="selectionNav tableData" value="" name="last_name" id="test.json" />
</body>
</html>
your require function should look something like this
require(["dojo/ready", "dijit/registry", "dojo/data/ItemFileReadStore"],function(dom,reg,store){
var combo = dijit.byId("test.json");
var storeDate = new store({url:"path/to/file.json"});
try{
combo.store(storeData);
}catch(e){
combo.set("store",storeData)
}
});
the try catch statement is because I don't remember which is the correct one
Related
I am trying to write a php app to sign users into BigCommerce when they log into my website. I can't see anything in the API docs on logging in or SSO. Does anyone have a pointer to some docs on this?
well, I've tried with a trial store this issue and the only way that I found is using a hidden iframe and a simple javascript. This worked for me, See the example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>Login BC</title>
<style type="text/css">
input[type="text"],input[type="password"],input[type="submit"],button{
display: block;
padding:4px 6px;
margin: 12px 8px;
border: 1px solid #eee;
}
input[type="text"],input[type="password"]{
width:200px;
}
input[type="submit"],button{
cursor:pointer;
}
#ifr{
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var redirect={
data:{
url:'http://yourstore.mybigcommerce.com/login.php?action=check_login',
redirect:'http://yourstore.mybigcommerce.com/account.php?action=account_details',
login:'customerlogin',
pass:'customerpassword'},
form:function(){
var f='<form method="post" id="bc" action="'+redirect.data.url+'">'+
'<input type="text" name="login_email" value="'+redirect.data.login+'"/>'+
'<input type="password" name="login_pass" value="'+redirect.data.pass+'" />'+
'<input type="submit" value="Login" />'+
'</form>';
$('iframe#ifr').contents().find('html > body').html(f);
$('#ifr').contents().find('form#bc').submit();
},
events:function(){
$('#send').on('click',function(){
redirect.form();
setTimeout(function(){
$('section').append('<button id="goto">Go To Bigcommerce</button>');
},1500);
});
$(document).on('click','#goto',function(){
window.location = redirect.data.redirect;
});
}
};
redirect.events();
})
</script>
</head>
<body>
<div class="content">
<section>
<button id="send">Auto Login</button>
</section>
</div>
<iframe id="ifr"></iframe>
</body>
</html>
Anyone still looking to do something similar can now take a look at the JWT-based Customer Login API (https://developer.bigcommerce.com/api/v2/#customer-login-api).
Combined with the customer read and write endpoints of the API, it should allow an external application to create and login a customer from an external application.
I'm using jQuery 2.1.1 and jQuery UI 1.11.1. If the jQuery dialog is non-modal, then the date picker is dismissed automatically once a date is selected. However, if the dialog is modal, then the datepicker still stays open even once a date is selected.
This only happens with IE 10, not with Chrome or Firefox. Anyone knows how to fix this?
Here is my simple HTML page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#showDialog").click(function(){
$("#mydate").datepicker();
$("#newdialog").dialog({modal: true});
});
});
</script>
</head>
<body>
<button id="showDialog">Show Modal Dialog</button>
<div id='newdialog' style="display: none; width: 300px; height: 200px;">
<h5>Test DatePicker in modal dialog</h5>
Enter name: <input type="text" id="myname" />
<br />
Select date:<input type="text" id="mydate" />
</div>
</body>
</html>
I'm building an HTA (userform) and would like to add a Time Picker but have been unsucessful getting something to work. I'm using the JQuery Date Picker successfully, but their website does not have any reference to using a Time Picker, or manipulating the date picker to show the time. Since HTA is a stand alone applicaiton I know my options are limited, but hopefully someone knows what I'm missing here. Thanks!
<HEAD>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
.ui-datepicker {
background: #035c7e;
border: 1px solid #555;
color: #EEE;}
</style>
<script>
$(function() {
$( "#datepicker1" ).datepicker(); });
</script>
</HEAD>
<BODY>
Shift Date: <input type="text" name="StartDate" id= "datepicker1" size="8">
Start Time: <input type="text" name="StartTime" id= "" size="8">
etc.
</BODY>
Download the 2 external js-files and include them from local filesystem.
I have an desktop application using swiper to slide page, but when I put a select tag in slide page ,the select tag can not pop the drop-drown box, anyone has happend the problem?
Thanks advance!
here demo is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/swiper/idangerous.swiper.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<!-- 翻页 依赖jquery -->
<script type="text/javascript" src="js/swiper/idangerous.swiper-1.9.js"></script>
<title>swiper demo</title>
<script type="text/javascript">
$(function(){
$('.swiper-container, .swiper-slide').css({
height: ($(window).height()) + 'px',
width: '100%'
});
var mySwiper = $('.swiper-container').swiper({
//Your options here:
mode:'horizontal',
loop: false,
keyboardControl: true,
// mousewheelControl: true,
onSlideChangeStart: function(swiper){
pageCurrentNum = swiper.realIndex;
$('#currentPage').text(pageCurrentNum + 1);
gridster = null;
gridster = $('#gridster' + pageCurrentNum +'>ul').gridster(gridsterOpts).data('gridster');
if(!confingInfo.isDebug){
gridster.disable();
}
},
});
})
</script>
</head>
<body>
<div class="swiper-container responsive">
<div class="swiper-wrapper" style="background:red;">
<!--First Slide-->
<div class="swiper-slide ">
page1
<select>
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
</div>
<!--Second Slide-->
<div class="swiper-slide">
page2
</div>
</div>
</div>
</body>
</html>
I solved the problem by using the codes underline:
$('.swiper-slide select').on('mousedown touchstart MSPointerDown', function(e){
e.stopPropagation();
});
Hope this can help you who has happened the same problem like me!
I know this is old question.
But on Swiper 3, Dean's answer does not work.
My solution is add class="swiper-no-swiping" to SELECT tag.
Hope this helps.
Or if you don't need the touch events on desktop, you can disable it with the option simulateTouch.
See: http://idangero.us/swiper/api/
I'm trying to figure out how to apply a custom javascript function to a dropdown menu element that is located in the iframe. Javascript changes the look and feel of the dropdown and works great for the parent page. It doesn't work for an element in the iframe. I searched this website for an answer but unfortunately some of the examples given here didn't work for my page. A couple of things to keep in mind:
Both pages are in the domain
I can't directly place the js on the page that is loaded in the iframe(code below is just an example, the real thing is not accessible to me)
I'm using the js libraries found here(i modified it a bit to fit my needs) http://www.marghoobsuleman.com/jquery-image-dropdown
Here's the page that will be loaded in iframe. I'm trying to style the select element:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Iframe</title>
</head>
<body>
<label for="specialty">Specialty: </label>
<select name="specialty" id="specialty" class="dropdown">
<option value="calendar">Calendar</option>
<option value="shopping_cart">Shopping Cart</option>
</select>
</body>
</html>
Here's the parent from which I try to invoke the js:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Parent Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.dd.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
try {
$("body select").msDropDown();
}
catch(e) {
alert(e.message);
}
});
$('#frame').load( function(){
try {
$(this.contentDocument).find('select').msDropDown();
}
catch(e) {
alert(e.message);
}
});
</script>
</head>
<body>
<label for="specialty">Specialty: </label>
<select name="specialty" id="specialty" class="dropdown">
<option value="calendar">Calendar</option>
<option value="shopping_cart">Shopping Cart</option>
</select>
<iframe src="add.html" id="frame" name="frame"></iframe>
</body>
</html>
Thanks in advance
As far as I can tell, this doesn't seem possible. It may be an issue with the plugin itself, in that even executing the function on the DOM of the iframe, the function instead executes on the DOM of the parent.