I'm using Material Design Lite (http://getmdl.io) along with dialog-polyfill (https://github.com/GoogleChrome/dialog-polyfill) for the modal dialog boxes.
Everything works great on my desktop browsers (Chrome, Safari, etc.), but on iOS (both Chrome and Safari), I can't tap inside the modal dialog boxes. It just doesn't respond.
I've tried the suggestion I've seen posted several places to put "cursor: pointer" in the CSS, but either I'm not doing it correctly, or it's not working.
Here's a typical modal dialog from my code:
<dialog class="mdl-dialog" id="delete_alias_confirm_dialog">
<h4 class="mdl-dialog__title">
Delete alias
</h4>
<div class="mdl-dialog__content" id="delete_alias_confirm_dialog_content">
<p>
Alias [ALIAS NAME] has been successfully deleted.
</p>
<form action="#">
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button mdl-button--raised mdl-button--colored" onClick="delete_alias_confirm_dialog.close()" id="delete_alias_confirm_dialog_ok_button">OK</button>
</div>
</form>
</div>
</dialog>
<script>
var delete_alias_confirm_dialog = document.querySelector('#delete_alias_confirm_dialog');
if (! delete_alias_confirm_dialog.showModal) {
dialogPolyfill.registerDialog(delete_alias_confirm_dialog);
}
var delete_alias_curr_name=""
function show_delete_alias_confirmation(clicked_element) {
delete_alias_curr_name=((clicked_element.parentNode).parentNode).parentNode.parentNode.querySelector('#alias_name').innerText
var delete_alias_dialog_delete_button=document.querySelector('#delete_alias_dialog_delete_button');
var delete_alias_dialog_alias_name=document.querySelector('#delete_alias_dialog_alias_name');
delete_alias_dialog_alias_name.innerHTML=delete_alias_curr_name
delete_alias_dialog.showModal();
delete_alias_dialog_delete_button.blur();
}
</script>
Check the order in which you load the CSS.
If you are loading dialog-polyfll.css before material.min.css that might be the source of the problem.
Also check if you don't have a dialog duplicate, this also results on a dialog that can't be closed on IOS.
Related
I have a responsive page built upon bootstrap. For some reason, I cannot get the checkbox to display in an iOS built device. The checkboxes work in every browser imaginable, and even work in the developer module of chrome (emulating iOS devices) and even works in the iOS reader. It just will not display on an iPhone. Is it being hidden behind another element?
Thanks in advance!
http://www.johnstoncc.edu/FA/2/depnbrhhc.html
Changing the column sizes to the following fixes it.
<div>
<div class="col-xs-2 col-sm-2 col-lg-1" style="margin-top:20px;">
<input id="OBKey_Signed_1" type="checkbox" name="OBKey_Signed_1"
value="Y" required="" data-com.agilebits.onepassword.user-edited="yes"
style="-webkit-appearance: radio;">
</div>
<div class="col-xs-10 col-sm-10 col-lg-11">
By checking this box, I ratify the use of my typed name and
Student ID number as an electronic representation of my signature.
</div>
</div>
I am having trouble having my React application to work optimally on mobile Safari. My app will PUT, POST, PATCH, and DELETE normally on desktop but won't do so on my iPhone. I've tried adding "cursor:pointer" and onTouchStart to my React component below but nothing seems to be doing the trick.
onSubmit(event) {
const name = this.state.name;
const instructor = cookies.get('instructor')._id;
this.setState({
submitted: true,
});
this.props.dispatch(actions.editCourse(name,this.props.match.params.cuid));
}
render() {
if (this.state.submitted) {
window.location.href = `https://young-mountain-65748.herokuapp.com /courses/${this.props.match.params.cuid}`;
}
return (
<div className="container">
<div className="field-line">
<label htmlFor="coursename">New Course Name:</label>
<input
id="coursename"
name="coursename"
value={this.state.name}
onChange={this.updateName}
/>
</div>
</div>
<div className="edit-course-buttons">
<button
className="edit-course"
onClick={this.onSubmit}
onTouchStart={this.onSubmit}>
Edit Course
</button>
</div>
</div>
);
}
}
I too had the same issue on iOS devices. Was able to get over these by replacing onClick with touch events. Check this documentation on touch events in ReactJS. You may use onTouchStart instead of onClick and see if it works! So your button should look like this:
<button onTouchStart="{this.onSubmit}" onclick = "void(0)" ...>
</button>
I have added onClick as suggested in an accepted answer here.
https://facebook.github.io/react/docs/events.html#touch-events
Check the similar question, as per the answer most voted you need to use touchevent and add cursor: pointer; css to elemnt you have click event associated with.
I have a jQuery UI dialog with several tabs, sometimes, I need to pop up one of those tabs as a separate dialog (atop of tabbed initial dialog), so, can I achieve this by re-using the same dialog?
(of course with a bit run-time customizations, JavaScript/DOM HTML manipulations, but with the same <div></div> template initially defined and with the same HTML FORM elements IDs)
This is not the optimal solution, but could be an approach of what should you do.
HTML:
<div id="dialog" title="Basic dialog">
<div class="dtabs">
<ul>
<li>First
</li>
<li>Second
</li>
<li>Third
</li>
</ul>
<div id="tab1">
<p>First!</p>
</div>
<div id="tab2">
<p>Second!</p>
</div>
<div id="tab3">
<p>Third!</p>
</div>
</div>
</div>
<input value="Tab 1 on Dialog" type="button" alt="1" />
<input value="Tab 2 on Dialog" type="button" alt="2" />
<input value="Tab 3 on Dialog" type="button" alt="3" />
Javascript:
$(function () {
// Dialog without autoOpen just to hide it from viewport
$('#dialog').dialog({
autoOpen: false
});
$('input').click(function () {
// Clone the dialog and append it to body
// Get "tab" number to know which tab should I set as active later
var d = $('#dialog').clone().appendTo('body'),
tab = $(this).attr('alt')-1;
// Assign "dialog" behaviour and remove it when I close it
d.dialog({
autoOpen: false,
close: function (e, ui) {
$(this).dialog('destroy').remove();
}
});
// Tabs inside my dialog has "tabs" behaviour by JQueryUI
d.find('.dtabs').tabs({
active: tab
});
// Open up!
d.dialog('open');
});
});
http://jsfiddle.net/franverona/k7cuH/
Let me explain you what I did:
I create my dialog in pure HTML and using JQueryUI assign it a dialog behaviour.
Every button has a property that will tell me later what tab should I open in my future dialog.
When user click on button I clone my previous dialog, append it to body and get "tab" attribute. Then I assign it a dialog behaviour without autoOpen and with a function associated to close event to remove it from DOM (to avoid multiple dialogs on my HTML body).
Before open, I assign a tabs behaviour to all the content inside my recently created dialog (look that I'm using find function) and set as an active tab the correct tab using tab property retrieved before.
Now I'm ready to open my dialog with all set up.
I repeat: this isn't an optimal solution, but should work as a prototype of later development iterations.
Happy coding!
I'm really hoping someone can help. I just got over one big hurdle in my current project, only to hit another. I have a deadline fast approaching, so any advice would be very much appreciated.
I am developing a mobile application for iPad using MVC4 and Jquery Mobile. At a certain point in my app, the user will trigger a pop-up box, which contains "yes" and "no" buttons. If the user clicks "yes", I want to send some parameters to an action in my controller, do some database work, and then return a partial view (with updated model) that will be displayed in my main view. I have the following jquery that executes upon click of a href button that is inside a pop-up.
$(function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('#Url.Action("LoadTestData", "WO")',
{TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestServiceRequestNum.innerHTML },
function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); });
}
});
In the above code, #popupSubmit is the href button, LoadTestData is an Action that returns a partial view, WO is the Controller, and #detailsDiv is a placeholder div in the main view. TestKey and TestRequestNumber are parameters that must be passed to the Action. Below is the code for the Action, LoadTestData. _ShowTestPartial is the Partial View.
[HttpPost]
public ActionResult LoadTestData(string TestKey, string TestRequestNumber)
{
//do database work
return PartialView("_ShowTestPartial", model);
}
Now, all of this code works on my desktop in Safari. However, this DOES NOT work on the iPad. I've tested, and the code does make it into the tHandler event when the button is clicked on the iPad, but there's something about the URL.Action or about returning a partial view in this way that the iPad just doesn't like.
Does anyone know how to solve this issue for iPad?
Edit (additional info from comments): To be clear, the partial view isn't being rendered at all on iPad, but it is on desktop Safari (and in Chrome for that matter). I have tried replaced "create" with "pagecreate" but this actually took away the JQM styling in the desktop browers and didn't change anything about the iPad.
It also doesn't seem to matter where I place the bind function...I've tried it as a separate function. I've tried it in .ready() and in .on('pageinit'). In all of these cases, it works on desktop Safari and Chrome, but not on iPad.
Also, as I said before, the .bind("tap") works on iPad. I've tested by putting other code in the tHandler. However something in the .$post does not work on iPad.
Thank you Omar, and anyone else who has any ideas. All are welcome!
Edit # 2: On Omar's advice I moved my function to $(document).on('pageinit'). I also added error catching on the $.post. Updated code below:
$(document).on('pageinit', function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('#Url.Action("LoadTestData", "WO")', { TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestRequestNum.innerHTML })
.done(function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); })
.fail(function (xhr, textStatus, errorThrown) { alert(xhr.responseText); })
}
});
Fortunately, this enabled me to see the error occurring on the iPad. Unfortunately, the error coming out of $.post is "An unknown error occurred while processing your request". Everything is still running smoothly on the desktop browsers with this code.
It turns out the answer was that, on the iPad the parameters were not getting passed to $.post. lblTestRequestNum and lblTestKey are labels on my JQM popup dialog box. See below:
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false"
style="max-width:416px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Selection <label id="lblTestRequestNum" style="text-align:left; height:22px; font-size:14px;">#Model.TestRequestNumber</label></h1>
</div>
<div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">
<h3 class="ui-title" style="text-align:center; height:22px;">Are you sure?</h3>
<label id="lblTestKeyLabel" style="text-align:left; height:22px; font-size:14px; margin-left:95px;">Test Key: </label>
<label id="lblTestKey" style="text-align:left; height:22px; font-size:14px;"></label>
<label id="lblTestType" style="text-align:left; height:22px; font-size:14px; margin-left:95px;"></label>
<a id="popupSubmit" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-theme="b" style="width:150px;" type="submit">Yes</a>
<a href="#" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-transition="flow" data-theme="b" style="width:150px;">No</a>
</div>
</div>
On the desktop, Safari was able to retrieve the parameters I needed from the labels in the popup. But on iPad, it could not. So, I simply found places outside of the pop-up, in my main view to display/retrieve my parameters from. Lesson learned: Don't expect iPad to be able to read anything from labels/inputs inside your pop-up dialog.
I have a weird problem with a simple form with checkboxes..
The first time it's shown it looks fine.. But then after navigating back to the previous page and be to it again - the ui is not updates resulting in plain checkboxes without jQuery mobile style..
I've Googled like crazy and found a couple of hints like .fieldcontain(); but it's doesn't work =(
The data is being retrieved through knockout bindings..
Any good ideas?
Here's the code...
<div id="searchCitiesPage" data-role="page" data-theme="a" class="page searchCities">
<header data-role="header" data-theme="b">
</header>
<div data-role="content" class="content" data-theme="a">
<script id="countyListTemplate" type="x-jquery-tmpl">
<form id="fieldform" action="form.php" method="post">
<fieldset id="fieldsetgroup" data-role="controlgroup">
{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
<input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
<label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}
</fieldset>
</form>
</script>
<div data-bind="template: 'countyListTemplate'"></div>
<div class="submit">
Næste
</div>
</div>
I was having a problem like this too, but in my case, the checkboxes were being redrawn dynamically before loading the page. I tried refreshing:
$("input[type='checkbox']").checkboxradio("refresh");
But it gave me an error stating that checkboxradio hadn't been initialized. However, when I tried this instead:
$("input[type='checkbox']").checkboxradio();
It made the checkboxes appear correctly every time. I'm still fumbling in the dark with JQuery Mobile and can't say exactly what happens where and why (I think I'm initializing the checkboxes?), but I thought I would share for the next time someone like me googles their way to this thread.
You can add some javascript to re-initialize the jQuery Mobile markup for your checkbox on each page load. Something like this:
<script type="text/javascript">
$(function() {
$('[data-role=page]').live('pageshow',function(){
$('#fieldform').find('input').checkboxradio();
});
});
</script>
I would suspect this code
{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
<input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
<label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}
is being called again when you transition back to the page. I would suggest pulling the infomation/tags/etc.. before the page displays (on the first load) and display it statically. So when transitioning back it shows the same data.
of you could use one of the live events and restyle it before the page shows, example:
$('.zipcodecheckbox').live('pagebeforeshow',function(event, ui){
$("input[type='checkbox']").checkboxradio("refresh");
// or
$(".zipcodecheckbox").checkboxradio("refresh");
});