We Keep Coding

jquery - datepicker inside modal form

I have a simple modal form which is triggered by click on the button. In that form there are two datepicker fields. After clicking on the button and open modal form first text field (datepicker) is immediately active and the datepicker calendar is showing.
It looks like that:
current state
I don't want first field active, showing calendar from the beginning. Instead of this I want open datepicker after click textfield.
How can I do this?
Here is my simple code:
<form>
<fieldset>
<label for="firstDay">Wybierz pierwszy dzień</label>
<input type="text" name="firstDay" id="firstDay" class="text ui-widget-content ui-corner-all">
<label for="lastDay">Wybierz ostatni dzień</label>
<input type="text" name="lastDay" id="lastDay" class="text ui-widget-content ui-corner-all"/>
<input type="submit"/>
</fieldset>
</form>
$(function(){
$("#dialogForm").dialog({
autoOpen: false,
width:400,
modal: true,
buttons: {
"Anuluj": function(){
dialog.dialog("close")
}
}
});
$("#firstDay").datepicker(
{
firstDay: 1
}
);
$("#lastDay").datepicker(
{
firstDay: 1
}
)
$("#addButton").click(function(){
$('#dialogForm').dialog('open');
})
})

Couldn't tell you for sure without access to your css but I believe this will work for you. In the css of the datepicker, set display: none;. Then using js code, set display: block; (or whatever you have it as now) when the text field is clicked using the code below.
$(document).on('click', 'input', function(){
$(this).attr("style", "display: block;");
});

I found couple days ago better solution for that. But unfortunatelly I can't find right now post that helped me.
This is code which makes the input fields are inactive and calendars are hide at the beginning:
$(".addButton").click(function(){
firstDay.datepicker("disable");
lastDay.datepicker("disable");
$('#dialogForm').dialog('open');
firstDay.datepicker("enable");
lastDay.datepicker("enable");
})

jqueryui dialog inside php while loop not opening as expected

i want to show jquery dialog on link click but when i click multiple dialog are opening instead of one.
i tried this but still not working.
if i use next() method then no dialog is opening as you can read in link above.
i think i should use data attribute but i don't know how to use it.
Here is my jqueryui dialog div content inside a php while loop:
while ($rows8 = $sql8->fetch_assoc()){
echo "<div id='view-reply'>
<span class='report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report to admin'/></a></span>
<div style='display: none;' class='post_reply_report_win'>
<h4><span>Report to Admin</span><hr/></h4>
<form class='reportForm' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>
</div>
}
and i am displaying it like this:
$(document).ready(function(){
$(".post_reply_report_win").dialog({
modal : true,
draggable : false,
resizable : false,
autoOpen : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
$("#view-reply .report_link a").click(function() {
$(".post_reply_report_win").dialog("open");
return false;
});
});

Your click listener simple opens them all as they do all have the class!
$(".post_reply_report_win").dialog("open");
You need to have unique identifiers for opening the dialog. Assignment can be done by class.
So I would go like this:
Give this line <div style='display: none;' class='post_reply_report_win'> a unique id like so <div style='display: none;' class='post_reply_report_win' id='post_reply_report_dialog_<?echo $i;?>';
$i would start at 1 and $i++ at the end in your loop.
your listener should then use .closest() from jquery to find the closest .post_reply_report_win element and get the id from that.
that id is the one you pass to your .open call of the dialog.
$('#'+$(this).closest('.post_reply_report_win').attr('id')).dialog("open");

The id should be unique. id='view-reply' is inside while loop and it is repeating.
Try below code:
$(".report_link a").click(function() {
$(this).parent('.report_link').next('.post_reply_report_win').dialog("open");
return false;
});

i have solved it myself after a long research.
i am posting my solution here just to help others that are also searching for the solution :)
So here is the solution:
php:
while ($rows8 = $sql8->fetch_assoc()){
echo "<span class='post_reply_report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report abuse'/></a></span>
<div class='post_reply_report_win_$rows8[reply_id]' id='post_reply_report_win' >
<h4><span>Report Abuse</span><hr/></h4>
<form class='post_reply_report_form' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>";
}
javascript:
$(document).ready(function(){
$(".post_reply_report_link a").click(function() {
var myID = $(this).attr("data-myid");
$(".post_reply_report_win_"+myID).dialog({
modal : true,
draggable : false,
resizable : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
});

jQuery: Can't get the submit button to work

I am familiar with JavaScript but new to jQuery and very lost at the moment. I realise this question has been asked before, but I am not clear on how to solve this one. I am creating a dialog box with a submit button. When the submit button is clicked, it should direct to the function ’getUsername()’. I tested the code in JavaScript and I got it to work successfully, but can’t get the same result with the jQuery dialog box. The dialog box shows, with the text input and submit button, but clicking the button doesn't yield any result.
This is the html code:
<body onload="showDialog()">
<form id="usernameInput" action="" onsubmit="return getUsername()">
<br><br>
<input type="text" id="usernameBox" required>
<input type="submit" value="Start chatting!">
</form>
</div>
</body>
and this is the script:
function showDialog(){
$(document).ready(function(){
$( "form" ).dialog({
open: function() {
$( this ).find( "[type=submit]" ).hide(); },
title: 'Enter username',
width: 500,
height: 300,
modal: false,
buttons: [{
text: "Start chatting!",
click: $.noop,
type: "submit"
}
]
});
});
}

Because the submit button is created outside the form, so the automatic form submit won't work
function showDialog() {
$(document).ready(function () {
$("form").dialog({
open: function () {
$(this).find("[type=submit]").hide();
},
title: 'Enter username',
width: 500,
height: 300,
modal: false,
buttons: [{
text: "Start chatting!",
click: function(){
$("form").submit()
},
type: "submit"
}]
});
});
}
See the dom structure
Demo: Fiddle

Closing Liferay dialog box programmatically

I have Liferay dialog box, I want to close this dialog box and wish to redirect my url to a page.
I am doing it this way.
<aui:column columnWidth="16" >
<%if(UserGroupRoleLocalServiceUtil.hasUserGroupRole(u.getUserId(), groupId, role.getRoleId())){ %>
<input value="delete" type="button" onclick="document.location.href='
<portlet:actionURL name="deleteUserRole"><portlet:param name="memberId" value="<%= memberIdStr %>"/>
<portlet:param name="organization" value="<%= Long.toString(organizationID) %>"/></portlet:actionURL>'" />
<%} %>
</aui:column>
public void deleteUserRole(ActionRequest actionRequest,ActionResponse actionResponse){
// process to delete user role
Role r = RoleLocalServiceUtil.getRole(org.getCompanyId(),
"Power User");
UserGroupRoleLocalServiceUtil.deleteUserGroupRoles(userID, groupId, new long[] { r.getRoleId() });
actionResponse.sendRedirect("/group/employee/empHome");
}
By using this way when I click on delete button this method gets call, perform process and it redirects to this url but withing popup window.
I want to redirect to given page in actionResponse.sendRedirect page but not in dialog box, it should not open in dailog box.
How can I close this dialog box first and then redirect my page to given url?
I am opening dialog box by calling this class on a link
Below is my js file
/test.js/
var myPopup;
AUI().ready( function() {
if (AUI().one('#testing-menu')) {
AUI().one('.extendClick').on(
'mouseenter',
function(event){
AUI().one('.navi-type').setStyles({'display': 'none'});
AUI().one('.extendClick').setStyles({'display': 'none'});
AUI().one('.collapseArrow').setStyles({'display': 'block'});
}
);
AUI().all('.employee-dialog').on(
'click',
function(event){
var url = event.currentTarget.get('href');
event.preventDefault();
//console.info(url);
window.myPopup= Liferay.Util.openWindow(
{
dialog: {
align: { points: ['tc', 'tc'] },
width: 960
},
title: 'Settings',
uri: url
}
);
}
);
}
});

Save the popup reference, and use that to close the popup later:
var myPopup;
AUI().all('.employee-dialog').on(
'click',
function(event){
[..]
myPopup = Liferay.Util.openWindow([...]);
}
);
Use the saved popup reference in onclick:
<input value="delete" type="button" onclick="myPopup.close();document.location.href='
[...]

Finally I am able to close this dialog box in this way.
<input value="delete" type="button" onclick="javascript:closePopUp;document.location.href='
<portlet:actionURL name="deleteUserRole"><portlet:param name="memberId" value="<%= memberIdStr %>"/>
<portlet:param name="organization" value="<%= Long.toString(organizationID) %>"/></portlet:actionURL>'" />
<script type="text/javascript">
function closePopUp(){
top.document.getElementById('closethick').click();
}
</script>

window.prompt multiple line input JavaScript CSS

I am trying to find a way to make something equivalent to window.prompt, but which allows multiple lines of input.
I could create my own using a div with z-index containing a textArea, but I am hoping there is something out there in jQuery or a plugin that would be more elegant.
Any ideas?

You can use the jQuery Dialog to do that.
Here's an example: http://jsfiddle.net/RBKaZ/
Using this HTML
<div id="dialog">
<p>Please enter your name</p>
<textarea id="name"></textarea>
</div>
<label>Name entered: </label>
<label id="nameentered"></label>
<br />
<input type="button" id="open" value="Open Dialog" />
And this jQuery:
$("#dialog").dialog({
autoOpen: false,
buttons: {
Ok: function() {
$("#nameentered").text($("#name").val());
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#open").click(function () {
$("#dialog").dialog("open");
});