I'm having trouble with the button on my form not working in IE 11.
You can view the page at brandinfluencegroup.com/test
I have created the form based on this script http://www.html-form-guide.com/contact-form/contact-form-attachment.html
It also uses styling for the file field which I used one of the suggestions I found here Twitter Bootstrap Form File Element upload button
My code below:
<?PHP
require_once("./include/fgcontactform.php");
$formproc = new FGContactForm();
$formproc->AddRecipient('email#email.com.au'); //<<---Put your email address here
$formproc->SetFormRandomKey('HG9hPBpn9Bn26yg');
$formproc->AddFileUploadField('file','pdf,doc,pages,jpg,jpeg,gif,png,bmp',6024);
if(isset($_POST['submitted']))
{
if($formproc->ProcessForm())
{
$formproc->RedirectToURL("thank-you.php");
}
}
?>
<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- ========== PAGE TITLE ========== -->
<title>BIG | Brand Influence Group</title>
<!-- ========== META TAGS ========== -->
<meta name="description" content="Brand Influence Group - BIG on you">
<meta name="keywords" content="BIG, brand, influence, group">
<meta charset="utf-8">
<meta name="author" content="ThemesEase">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ========== VIEWPORT META ========== -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- ========== FAVICON & APPLE ICONS ========== -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<!-- ========== GOOGLE FONTS ========== -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100" rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' type='text/css'>
<!-- ========== MINIFIED VENDOR CSS ========== -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/bootstrap-select.css">
<link rel="stylesheet" href="styles/vendor.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/custom.css">
<!-- ========== MODERNIZR ========== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script>
<script type='text/javascript' src='scripts/gen_validatorv31.js'></script>
<script type='text/javascript' src='scripts/fg_captcha_validator.js'></script>
</head>
<body class="dark-header animation">
<form class="notify-div" id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' enctype="multipart/form-data" accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div><span class='error'><?php echo $formproc->GetErrorMessage(); ?></span><span id='contactus_name_errorloc' class='error'></span><span id='contactus_email_errorloc' class='error'></span></div>
<input type="text" name="name" placeholder="Name"/>
<input type="email" name="email" placeholder="Enter your email"/>
<select name="message" class="selectpicker" data-hide-disabled="true" data-size="10">
<option selected value="I want to...">I want to...</option>
<option value="Apply for a position in Brand Activation">Apply for a position in Brand Activation</option>
<option value="Apply for a position as Influencer">Apply for a position as Influencer</option>
<option value="Apply for a position as Account Executive">Apply for a position as Account Executive</option>
<option value="Apply for a position as Account Manager">Apply for a position as Account Manager</option>
<option value="Apply for a position as Accountant">Apply for a position as Accountant</option>
<option value="Apply for a position as Weekend warrior">Apply for a position as Weekend warrior</option>
<option value="Apply for a position as Cricket Coach">Apply for a position as Cricket Coach</option>
<option value="Apply for a position as Intern">Apply for a position as Intern</option>
<option value="Other...">Other...</option>
</select>
</span><span><input class="btn btn-primary" type="button" value="Upload your cv..." onclick="$(this).parent().find('input[type=file]').click();"/>
<input type="file" name="file" id="file" style="visibility:hidden; width: 1px;" onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" />
<span class="badge badge-important" ></span></span>
<button type="image" class="sr-btn white-btn" id="submit" name="submit" value="Send"><span class="bold">Say</span> <span class="italic">hello</span></button>
</form>
<script type='text/javascript'>
// <![CDATA[
var frmvalidator = new Validator("contactus");
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("email","req","Please provide your email address");
frmvalidator.addValidation("email","email","Please provide a valid email address");
frmvalidator.addValidation("message","maxlen=6048","The message is too long!(more than 2KB!)");
frmvalidator.addValidation("file","file_extn=jpg;jpeg;gif;png;bmp","Upload images only. Supported file types are: jpg,gif,png,bmp");
// ]]>
</script> <br/>
<br/>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</section>
<!-- end section -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
// (function(b, o, i, l, e, r) {
// b.GoogleAnalyticsObject = l;
// b[l] || (b[l] =
// function() {
// (b[l].q = b[l].q || []).push(arguments)
// });
// b[l].l = +new Date;
// e = o.createElement(i);
// r = o.getElementsByTagName(i)[0];
// e.src = 'https://www.google-analytics.com/analytics.js';
// r.parentNode.insertBefore(e, r)
// }(window, document, 'script', 'ga'));
// ga('create', 'UA-XXXXX-X');
// ga('send', 'pageview');
</script>
<script src="scripts/vendor.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
This is likely to happen because of Internet Explorer blocking ActiveX Controls, as soon as I just open Internet Explorer, it shows a bar saying this:
If I don't press anything, then the button wont work, and that bar message also disappears after 1 or 2 minutes, so after a while you might not notice that the message was there at the beginning.
Also I think this happens because of you working locally, this shouldn't happen if the site is at a trusted domain.
Hope this helps,
Leo.
Related
Hi everybody :) I have a problem. I would like to make it so that when I enter the address. Click on "Send Email" button to send me an email with "http: //" in the form of a link which opens after pressing the Navigator Maps. My code is here.
<?php
echo "<!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' dir='ltr' lang='en-us' xml:lang='en-us'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='Content-Language' content='en-us' />
<link rel='icon' type='image/gif' href='http://www.nsc.ee/rssimg/favicon.png' />
<link rel='stylesheet' href='contact.css' type='text/css' />
<link rel='stylesheet' href='info.css' type='text/css' />
<script src='http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places'>
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src='js/jquery.geocomplete.js'></script>
<script>
$(function(){
$('#geocomplete').geocomplete({
map: '.map_canvas',
details: 'form ',
markerOptions: {
draggable: true
}
});
$('#geocomplete').bind('geocode:dragged', function(event, latLng){
$('input[name=lat]').val(latLng.lat());
$('input[name=lng]').val(latLng.lng());
$('#reset').show();
});
$('#reset').click(function(){
$('#geocomplete').geocomplete('resetMarker');
$('#reset').hide();
return false;
});
$('#find').click(function(){
$('#geocomplete').trigger('geocode');
}).click();
});
</script>
<script>";
echo"
<form>
<table border='0' bgcolor='#1c1a1a'>
<tr>
<td align='center'><input id='geocomplete' type='text' size='48px' placeholder='Palun sisestage aadress' value='' /><form>
<label><font color=#FFFFFF>Pikkus:</font></label>
<input name='lng' type='text' size='20px' value=''>
<label><font color=#FFFFFF>Laius:</font></label>
<input name='lat' type='text' size='20px' value=''>
<a id='reset' href='#' style='display:none;'></a>
</form></td></tr></table>
<table border='0' bgcolor='#1c1a1a'>
<tr>
<td align='center'><div class='map_canvas'></div></td></tr></table></p>
</form>";
?>
I have the following problem.
If I put he JavaScript code into the head or body tag, I need to click twice the submit button and then the Ajax form or whatever I need to do it does correctly, but I need to click twice.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>XXXX</title>
<!--Este es el JS que hace que funcione Phonegap-->
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<!--JS específicos de Jquery Mobile-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<!--Estos son script creados para la aplicacion-->
<script src="js/md5.js"></script>
<script src="js/login.js"></script>
<!--CSS del tema que he creado para apotecalia-->
<link rel="stylesheet" href="themes/XXXX.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.2.min.css" />
</head>
<div id="login">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<form id="check-user" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label> Usuario </label>
<input type="text" id="correo" name="correo">
</div>
<div data-role="fieldcontain">
<label> Contraseña </label>
<input type="password" id="pwd" name="pwd" >
</div>
<input type="submit" data-role="button" value="Acceder" name="enviar" id="enviar">
</fieldset>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Login.js
$(function () {
$('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
alert($('#correo').val() + $('#pwd').val());
}
});
});
But if I put the script code into the tag page where I need to use it, I don't need to click twice, but I cannot get the data form to do my Ajax request.
The same code, but if I put the script code into data-role="page" I have to put this code into all the tags... The alert in this case is empty.
<div id="login">
<script src="js/login.js"></script>
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
Please I don't know how to do it, I tried two weeks fixing this, I need your help.
Add simple type="button" instead of type="submit" .
<input type="button" data-role="button" value="Acceder" name="enviar" id="enviar">
$(function () {
$('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
alert($('#correo').val() + $('#pwd').val());
// Add code here submit form data using Ajax
var ajax_call = your_serviceURL;
var str = $('#check-user').serialize();
$.ajax({
type: "POST",
url: ajax_call,
data: str,
dataType: "json",
success: function(response){
// It's success json response
}
}).done(function() {
})
}
});
});
Include your script in the head tag.
Declare your page container <div data-role="page" id="login">.
Change your code in login.js to:
$(document).on("pageinit", "#login", function(event, ui)
{
$(document).on("click", "#enviar", function(event)
{
if ($('#correo').val().length > 0 && $('#pwd').val().length > 0)
alert($('#correo').val() + $('#pwd').val());
});
});
Following my previous question, now things are not working again, here it goes:
I have form in MVC 4, and the form button does not respond:
Controller (that should get the post action):
public class GeneralController {
[HttpPost]
public ActionResult SearchResults(SearchParamsModel searchParams)
{
// doin some stuff here
return View("SearchResultsView");
}
}
View (.cshtml):
#model MVC.Models.SearchParamsModel
#{
ViewBag.Title = "SomeTitle";
}
#Html.Partial("~/Views/SomePartials/ssi-header.cshtml");
#Html.Partial("~/Views/SomePartials/ssi-sidebar-notifications.cshtml");
<!-- content -->
<section class="content right">
<section class="some-search">
<div class="form-separator gradient"></div>
#using (Html.BeginForm("SearchResults", "Home", FormMethod.Post))
{
<section class="form-field">
<input type="text" name="City" id="City" class="field field139 autocomplete-init-no-img" />
<label for="City">City</label>
</section>
<input type="submit" value="Submit Search" class="submit btn blue-btn special-submit" />
}
</section>
</section>
<!-- end content -->
#Html.Partial("~/Views/SomePartials/ssi-footer.cshtml");
Model :
public class SearchParamsModel
{
public string City{ get; set; }
}
Things are only working if I add in View : Layout = null (!!!Wierd)
My Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/SomeStyles")
#*#Scripts.Render("~/bundles/SomeScripts")*#
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../../Scripts/script1.js" type="text/javascript"></script>
<script src="../../Scripts/script2.js"></script>
....
</head>
<body>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#*#RenderSection("scripts", required: false)*#
</body>
</html>
Like the answer in your previous question you should post to General controller and not Home controller.
#using (Html.BeginForm("SearchResults", "General", FormMethod.Post))
Cheers.
I have tested Xpage Application in Notes Client (xpinc) 9 and find the following bugs with Date/Time Picker.
Given default value for the Date field.
When viewing in the xpinc,not able to see the default value in the date field. On click of the Date picker icon, default value is showing up. This may be because dafault value is over laid behind the date picker icon.
Date picker icon is displaying right side instead of left side.
Once we pick the date, we are not able to view the date picker icon any more.
My code follows like,
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:inputText id="inputText1">
<xp:this.defaultValue><![CDATA[#{javascript:#Date("16/12/2013")}]]></xp:this.defaultValue><xp:dateTimeHelper id="dateTimeHelper1"></xp:dateTimeHelper>
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
</xp:view>
When preview in web, the default values coming fine and picker Icon aligned properly. But when preview in IBM Notes 9 (xpinc), The default value not showing in the field. The UI of date field looks bad! Refer the following link
http://www-10.lotus.com/ldd/ndseforum.nsf/xpTopicThread.xsp?documentId=CA3D7B61284FEE3185257B6300352563
seems problem with Notes 9 client.
I have tried again same thing in Notes 9 client. My source code like below
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.beforeRenderResponse><![CDATA[#{javascript:viewScope.DateEntered = viewScope.DateEntered || #Yesterday()}]]></xp:this.beforeRenderResponse>
<xp:table>
<xp:tr>
<xp:td>
<xp:label value="Sample date input" id="label1"></xp:label></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label value="Please enter a date:" id="label2"></xp:label></xp:td>
<xp:td>
<xp:inputText id="inputText1"
value="#{viewScope.DateEntered}">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
<xp:dateTimeHelper></xp:dateTimeHelper>
</xp:inputText>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label value="Please enter some Text:" id="label3"></xp:label></xp:td>
<xp:td>
<xp:inputText id="inputText2"
value="#{viewScope.textEntered}">
</xp:inputText></xp:td>
</xp:tr>
</xp:table>
</xp:view>
Html code in notes client like below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tcxsp.css&2TcxspLTR.css&2TcxspRCP.css.css">
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.0/dojo/dojo.js" djConfig="locale: 'en-us', parseOnLoad: true"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-us/#Ie&#Iu.js"></script>
<script type="text/javascript">dojo.require('ibm.xsp.widget.layout.xspClientDojo')</script>
<script type="text/javascript">dojo.require('ibm.xsp.widget.layout.xspClientRCP')</script>
<script type="text/javascript">dojo.require('dojo.parser')</script>
<script type="text/javascript">dojo.require('ibm.xsp.widget.layout.DateTextBox')</script>
</head>
<body class="xspView tundra">
<form id="view:_id1" method="post" action="/xsp/Dev9!!ESI/Sprint55/AcctMgr.nsf/xpCombo.xsp?1367948337%3FOpenXPage&xspRunningContext=Notes" class="xspForm" enctype="multipart/form-data">
<table><tr><td><span id="view:_id1:label1" class="xspTextLabel">Sample date input</span></td>
<td></td>
</tr>
<tr><td></td>
<td></td>
</tr>
<tr><td><span id="view:_id1:label2" class="xspTextLabel">Please enter a date:</span></td>
<td><input type="text" value="2013-05-06" id="view:_id1:inputText1" name="view:_id1:inputText1" class="xspInputFieldDateTimePicker" dojoType="ibm.xsp.widget.layout.DateTextBox" iconStyleClass="xspInputFieldDatePickerIcon" constraints="{datePattern:"MMM d, yyyy",timePattern:"h:mm:ss a",selector:"date"}"></td>
</tr>
<tr><td><span id="view:_id1:label3" class="xspTextLabel">Please enter some Text:</span></td>
<td><input type="text" id="view:_id1:inputText2" name="view:_id1:inputText2" class="xspInputFieldEditBox"></td>
</tr>
</table>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!dgw1o52zpc!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
<script type="text/javascript">
XSP.addOnLoad(function() {
XSP.attachValidator("view:_id1:inputText1",null,new XSP.DateConverter("MMM d, yyyy","This field is not a valid date."));
});
</script>
<input type="hidden" id="XspBridgeIn">
<input type="hidden" id="XspBridgeOut">
</body>
But still I am facing same issue. Date field not aligned properly
https://www.dropbox.com/s/9bmj3nmcbwy1cxd/DatePicker.jpg
I am using notes 9 client and Xp machine.
Is any problem with my notes client?
Adding the following Css in to xpage, can resolve alignment issue of Date picker in Notes 9 xpinc.
<style type="text/css">
.xspInputFieldEditBox > div {
width:auto;
}
</style>
Your source code will be following
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<style type="text/css">
.xspInputFieldEditBox > div {
width:auto;
}
</style>
<xp:inputText id="inputText1" value="#{viewScope.inputText1}"
defaultValue="#{javascript:#Now()}">
<xp:this.converter>
<xp:convertDateTime type="date" />
</xp:this.converter>
<xp:dateTimeHelper />
</xp:inputText>
</xp:view>
Even with change of theme such as One UI V2, 2.1, web standard you can resolve this issue
I tried this:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.beforeRenderResponse><![CDATA[#{javascript:viewScope.DateEntered = viewScope.DateEntered || #Yesterday();}]]>
</xp:this.beforeRenderResponse>
<xe:formTable id="formTable1" formTitle="Sample date input"
formDescription="Test for date functionality">
<xe:formRow id="formRow1" for="inputText1" label="Please enter a date:"
labelPosition="left">
<xp:inputText id="inputText1"
value="#{viewScope.DateEntered}">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
<xp:dateTimeHelper></xp:dateTimeHelper>
</xp:inputText>
</xe:formRow>
<xe:formRow id="formRow2" for="inputText2" label="Please enter some Text:"
labelPosition="left">
<xp:inputText id="inputText2"
value="#{viewScope.textEntered}">
</xp:inputText>
</xe:formRow>
</xe:formTable>
</xp:view>
Works flawless. How does your code look like? If you use data binding, then NO default value is pulled from the control's properties, but the value provided by the variable the control is bound to. Binding always trumps defaults.
When I look at the page source (that what gets generated in the client in this case - which you can see on the machine where your Domino designer is installed, then I get:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/2Ojcore.css&2Ojdojo.css&2OldefaultTheme.css&2OldojoTheme.css&#Da&#Ib&#Th&#Ti.css">
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.0/dojo/dojo.js" djConfig="locale: 'en-us', parseOnLoad: true"></script>
<script type="text/javascript">dojo.registerModulePath('extlib', '/xsp/.ibmxspres/.extlib');</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-us/#Eya&#Ie&#Iu.js"></script>
<script type="text/javascript">dojo.require('ibm.xsp.widget.layout.xspClientDojo')</script>
<script type="text/javascript">dojo.require('ibm.xsp.widget.layout.xspClientRCP')</script>
<script type="text/javascript">dojo.require('dojo.parser')</script>
<script type="text/javascript">dojo.require('extlib.theme.OneUIA11Y')</script>
<script type="text/javascript">dojo.require('ibm.xsp.widget.layout.DateTextBox')</script>
</head>
<body class="xsp lotusui tundra">
<form id="view:_id1" method="post" action="/xsp/My2003Xpages.nsf/Test6.xsp?1367936627%3FOpenXPage&xspRunningContext=Notes" class="lotusForm" enctype="multipart/form-data">
<fieldset id="view:_id1:formTable1">
<table class="lotusFormTable" role="presentation" cellpadding="0" cellspacing="0" border="0"><tbody>
<tr><td class="lotusFormTitle" colspan="3"><h2>Sample date input<div class="lotusMeta">Test for date functionality</div></h2></td></tr>
<tr class="lotusFormFieldRow"><td style="width:15%" class="lotusFormLabel"><label for="view:_id1:inputText1">Please enter a date:</label></td><td><input type="text" value="2013-05-06" id="view:_id1:inputText1" name="view:_id1:inputText1" class="xspInputFieldDateTimePicker" dojoType="ibm.xsp.widget.layout.DateTextBox" iconStyleClass="xspInputFieldDatePickerIcon" constraints="{datePattern:"MMM d, yyyy",timePattern:"h:mm:ss a",selector:"date"}"> <td></td></td></tr>
<tr class="lotusFormFieldRow"><td style="width:15%" class="lotusFormLabel"><label for="view:_id1:inputText2">Please enter some Text:</label></td><td><input type="text" id="view:_id1:inputText2" name="view:_id1:inputText2" class="xspInputFieldEditBox"><td></td></td></tr>
</tbody>
</table>
</fieldset>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!dgw05ue5xc!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
<script type="text/javascript">
XSP.addOnLoad(function() {
XSP.attachValidator("view:_id1:inputText1",null,new XSP.DateConverter("MMM d, yyyy","This field is not a valid date."));
});
</script>
<input type="hidden" id="XspBridgeIn">
<input type="hidden" id="XspBridgeOut">
</body>
</html>
What do you get?
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.