I have followed a few other suggestions on this site but I cannot get the data from a textarea within a jQuery dialog element to post. The most relevant answer was provided in the ASP.NET button discussion here, I have added the suggestion to my code with no change in results.
Here is what I have:
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
dialogClass: "no-close",
buttons: {
"Done": function() {
$(this).dialog("close");
}
}
})
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
}).parent().appendTo("form1");
});
I have tried adding the ".appendTo()" syntax to both the .dialog and function with no change. Any help would be greatly appreciated.
Here is the html for reference as well
<div id="dialog" title="Enter Comments">
<textarea id="feedback" name="feedback" rows="5" autocomplete="off" value="<?php get_data("feedback"); ?>" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> ></textarea>
</div>
<input type="button" class="btn btn-primary btn-block" value="enter comments" id="opener" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> />
Thanks for all of the feedback! I have this figured out.
I ended up mirroring the data from the textarea to a text input within the form, I wrapped the input in a hidden div to keep it out of sight.
HTML
<div id="feedbackvalue">
<input type="text" name="sc_comment" id="sc_comment" value="<?php echo $sc_comment; ?>" />
</div>
CSS
#feedbackvalue {
display: none;
}
Related
I am trying to develop a calendar input variable which also allows for a datepicker for the input boxes.
HTML
<select id="select">
<option value="Type">Type</option>
<option value="Range">Range</option>
<option value="Individual">Individual</option>
</select>
<div id="range" style="display:none;">
<input type="text" name="job_from" id="job_from" placeholder="From" class="datepicker" />
<input type="text" name="job_to" id="job_to" placeholder="To" class="datepicker" />
</div>
<div id="ind" style="display:none;">
<button type="button" id="add2" class="submit">Add Another Date</button>
<div id="item2">
<div><input type="text" class="datepicker" name="jobdates[]" /></div>
</div>
</div>
SCRIPT
$(document).ready(function(){
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
$('#select').change(function(){
if($('#select option:selected').text() == "Range"){
$('#range').show();
}
else{
$('#range').hide();
}
if($('#select option:selected').text() == "Individual"){
$('#ind').show();
}
else{
$('#ind').hide();
}
})
});
Here is the jsfiddle
when I take away the datepicker jquery function the hide/show functionality works, when i put the datepicker script in nothing works. Can someone explain why I cannot get both to work
Your code is fine, I believe you just weren't including the core jQueryUI files that the DatePicker needs in order to run.
Add this to the head of your page:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
EXAMPLE 1
To address the issue where datepicker is not being initialized due to the new elements being written to the DOM after the jQuery has initialized the datepicker, you simply must call the datepicker when the user creates a new DOM element.
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
// This is where you need to add the datepicker jQuery again <<<<<<<<<
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'});
});
EXAMPLE 2
I think its not possible.
Make a second input (for datepicker) and show hide it if checked box...
The rest is js and css
EDIT:
$(document).ready(function(){
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]"/><button class="delete submit" type="button">Delete</button></div>');
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'});
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
$('#select').change(function(){
if($('#select option:selected').text() == "Range"){
$('#range').show();
}
else{
$('#range').hide();
}
if($('#select option:selected').text() == "Individual"){
$('#ind').show();
}
else{
$('#ind').hide();
}
})
});
I am developing a chat program using jquery, php and ajax. and my problem is that when user puts msgs and when the chat box is overflowed it should auto scroll down when new msg enter and chat box overflowed. What I tried to achieve is this.
CODE
$.ajaxSetup ({
cache: false
});
$(document).ready(function(e) {
setInterval (function() {
$('.main').load('display_messages.php');
},1000)
$(function() {
//Function for press Return button
$('#newMessageContent').keypress(function(e) {
if (event.keyCode == 13 || !event.keyCode == all ) {
setTimeout (function() {
$('.main').load('display_messages.php');
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
}
});
// Functions for click button
$('#newMessageSend').click(function() {
setTimeout (function() {
$('.main').load('display_messages.php');
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
});
var chckIt = setInterval(function(){
$('.main').one('DOMSubtreeModified',function(){
setTimeout(function() {
$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
},500);
})
},1000)
$('.main').on('scroll',function(){
if ( $('.main').scrollTop() === 0 ){
clearInterval(chckIt);
}
});
});
});
it has some bugs. it will auto scroll down but it repeat itself again and again and not stoping, and you cant scroll up to see older msgs if u want.
so then I used this function $('.main').on('scroll',function(){
if ( $('.main').scrollTop() === 0 ){
clearInterval(chckIt);
}
}); to control it but its useless.
here is html.
code
<div class="chatBox">
<div class="chatlogo">
<embed src="test2.swf" play="true" class="vid2" loop="true" width="180" height="50" salign="C" scale="ShowAll" id="vid_2" quality="High" wmode="transparent" name="vid_2" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
</div>
<div class="user">
<form name="signIn" id="signInForm" action="signout_delete_content.php" method="post" onSubmit="return false">
<span class="error animated">Invalid uername</span>
<input name="username" type="text" id="username" placeholder="Enter username" size="13px" onClick='document.username.value = "" '>
<input type="submit" id="signIn" value="SING IN">
</form>
<span class="welcome"></span>
<input type="button" id="signOut" value="SIGN OUT" onclick="window.location.reload();">
</div>
<div class="main">
<p>Admistrator: Hello msgs here.</p>
</div>
<div class="messageBox">
<form name="messageBoxSignInForm" id="messageBoxSignInForm" onSubmit="return false">
<input type="submit" id="messageBoxSignIn" value="Sign In to Enter Chat">
</form>
<form name="newMessage" class="newMessage" action="" onSubmit="return false">
<textarea name="newMessageContent" id="newMessageContent" placeholder="Enter your message here.">Enter your message here</textarea>
<input type="submit" id="newMessageSend" value="Send">
</form>
</div>
</div>
any help would be appreciated. thanks
You can't scroll up because you keep triggering load('display_message.php'), which will trigger 'DOMSubtreeModified' event. So, you can't rely on 'DOMSubtreeModified' and have to check for a new message by other means. For example, you may count the number of messages for each 'display_message.php' and check for difference.
var old = 0, new = 0;
$('#newMessageSend').click(function() {
setTimeout (function() {
$('.main').load('display_messages.php', chckIt);
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
});
var chckIt = function(){
new = $('.main').children().length;
if (new > old)
{
old = new;
setTimeout(function() {
$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
},500);
}
};
You were right,my previous answer doesn't works..
$('.messageBox').scrollTop($('.messageBox')[0].scrollHeight)
this works well:
jsfiddle:
http://jsfiddle.net/Lh4TN/6/
I am stuck with modal window. My modal window is on same page which I put in <div>, this modal window will popup when user click on a 'Reply Message' text.
while (($i < $num3b)&&($i < ($start+$perpage))) {
$tododetail_id=mysql_result($result3b,$i,"tododetail_id");
$comment=formatUrlsInText(mysql_result($result3b,$i,"comment"));
$staff_name=mysql_result($result3b,$i,"staff_name");
echo "<tr><td><span><font color='#5858FA'>" . $staff_name . nl2br($comment) . "</font>
<span style='float:right' id='create-user'>Reply Message</span>";
$i++;}
And Modal Window will appear using below code, i want to pass $staff_name and $comment so that it will appear in modal window. but i don't know how to call and pass those variables
$(function() {
var repmsg = $( "#repmsg" );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 280,
width: 660,
modal: true
});
$( '[id^="create-user"]')
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
Here my modal window code
<div id="dialog-form">
<p class="validateTips"><!--show php variable ($staff_name)--></p>
<form>
<fieldset>
<textarea class="text ui-widget-content ui-corner-all" name='repmsg' cols='100' rows='8' tabindex='1004'></textarea><br/>
<span id="quote" style="float:left">Requote</span>
<span style='float:right' id='button'>
<span id="add" class="button_form" style="cursor:pointer;">Add</span>
<span id="cancel" class="button_form" style="cursor:pointer;">Cancel</span>
</span>
</fieldset>
</form>
</div>
Hopefully you can understand my statement. Thank you.
In your loop you create several span with the same id. An id must be unique in a html page.
You must create different ids. This will also allow you to get the data with jquery.
Also think about putting your staff name in a separate div or span. This will ease accessing it.
In below part, just put the staffname variable:
<p class="validateTips"><?php echo $staff_name; ?></p>
This staffname will be shown when dialog opened
To begin, I'm working with 3 languages. HTML, Javascript and PHP. I'm unable to pass user inputted textarea text to a PHP variable which would be used as a message in an email that would be sent out. What I believe to be the problem is that my textarea is actually in a modal window and for some reason I think that is what is screwing things up.
Here is my HTML Code:
<form name="rejectForm" action="">
<div class="rejectModal" title="rejectModal" id="rejectModal" style="display: none; padding:15px ">
<b> Text in the modal window</b>
<center>
<textarea id="rejectArea" name="rejectArea" value="{$rejectAreaNote}" rows="6" cols="43"/> </textarea>
</center>
<br/>
<center>
<input type="button" value="Reject" class="btn success id="submitReject"" id="btnRejectDocumentModal" name="Reject" />
<input class="btn" type="reset" value="Cancel" id="btnCancelSaveModal" />
</center><br/><br/>
</div>
</form>
</div>
JS Code:
$(function() {
$(".submitReject").click(function() {
// validate and process form here
$('.error').hide();
var rejectAreaNote = $("textarea#rejectArea").val();
var noteLength = rejectAreaNote.length;
if (rejectAreaNote == "" || noteLength < 5) {
$("label#rejectArea_error").show();
$("textarea#rejectArea").focus();
return false;
}
var dataString = rejectAreaNote;
alert (dataString);return false;
$.ajax({
type: "POST",
url: "gs_ViewDocument.php",
data: dataString,
success: function() {
$('#reject_form').html("<div id='message'></div>");
$('#message').html("Reject Form Submitted!");
}
});
return false;
});
});
What creates the Modal (JS):
$('.rejectModal').css("background", "lightblue");
$('#btnRejectDocument').bind(isTouchScreen ? "touchstart" : "click", function(){
if (!gsSelection.unselectElem()) return false;
$('.rejectModal').dialog({
modal:true,
resizable:false,
width: 400,
}).removeClass("ui-widget-content");
$(".ui-dialog-titlebar").hide();
return;
});
$('#btnRejectDocumentModal').bind(isTouchScreen ? "touchstart" : "click", function(){
$(this).parents('div.rejectModal').dialog('close');
});
$('#btnCancelSaveModal').bind(isTouchScreen ? "touchstart" : "click", function(){
$(this).parents('div.rejectModal').dialog('close');
});
PHP Code:
if(isset($_POST['Reject'])&&$_POST['Reject']=='Reject')
{
$isReject = true;
RejectAction($DocumentID, $ClientName, $ClientEmail);
$smartyvalues["isReject"] = $isReject;
$smartyvalues["RejectMsg"] = "The document invitation was successfully rejected!";
}
Any help is greatly appreciated.
Try the below is should fix it :
<textarea id="rejectArea" name="rejectArea" rows="6" cols="43"> {$rejectAreaNote}</textarea>
you were closing your textarea tag twice /> and then </textarea>
<input type="button" value="Reject" class="btn success id="submitReject"" id="btnRejectDocumentModal" name="Reject" />
The closing quotes here are wrong (Two quotes after submitReject).
I am using jquery serialize and Ajax to capture form values and process them with Ajax using json as data Type, but no values are being returned. I have tried various ways to try and see why this is happening, but to no avail. There is no errors being returned in firebug or chrome. I would be grateful if someone could check my code and point out my error. Thanks
html code
<!--- Form to add box -->
<div id="boxaddform" style="display:none;">
<div class="dialogTop_padd"></div>
<form id="BA_boxform" name="BA_boxform" method="post">
<fieldset>
<legend><span></span>Select Company</legend>
<div class="spacer"></div>
<div class="formMessage">Click again to open</div>
<div class="fld_fld">
<div>
<label for="BA_customer">Company:</label><br />
<select name="BA_customer" id="BA_customer">
<option SELECTED VALUE="">Select a Company</option>
<?php
do {
?>
<option value="<?php echo $row_Recordsetcust['customer']?>"><?php echo $row_Recordsetcust['customer']?></option>
<?php
}
while ($row_Recordsetcust = mysql_fetch_assoc($Recordsetcust));
$rows = mysql_num_rows($Recordsetcust);
if($rows > 0)
{
mysql_data_seek($Recordsetcust, 0);
$row_Recordsetcust = mysql_fetch_assoc($Recordsetcust);
}
?>
</select>
<div class="spacer"></div>
<!--- displays the address and dept from the change function -->
<div id="BA_dept"></div>
<br />
<div id="BA_address"></div>
</div>
</fieldset>
<div class="dialogTop_padd"></div>
<!--- fieldset for service level -->
<fieldset>
<legend>Service Level</legend>
<div class="spacer"></div>
<div>
<label for="BA_service">Service level:</label>
<select name="BA_service" id="BA_service">
<option SELECTED VALUE="">Select an option</option>
<option value="Standard">Standard</option>
<option value="Rapid">Rapid</option>
</select><br />
</div>
</fieldset>
<div class="dialogTop_padd"></div>
<!--- fieldset for box # -->
<fieldset>
<legend>Box Details</legend>
<div class="spacer"></div>
<div>
<label for="BA_box">Box#:</label><br />
<input id="BA_box" name="BA_box" type="text" size="32" maxlength="128" value = "" /><br />
</div>
<div>
<label for="BA_destdate">Destroy date:</label>
<input id="BA_destdate" name="BA_destdate" type="text" size="32" maxlength="128" value = "" /><br />
</div>
</fieldset>
<div class="dialogTop_padd"></div>
<!--- fieldset for authorisation -->
<fieldset>
<legend>Authorisation</legend>
<div class="spacer"></div>
<div>
<label for="BA_authorised">Requested By:</label>
<input id="BA_authorised" name="BA_authorised" type="text" value="<?php echo $_SESSION['kt_name_usr']; ?>"><br />
</div>
</fieldset>
<!--- div to show callback result from ajax via dialog -->
<div id="BA_addbox"></div>
<br />
<input type="submit" name="submit" value="Submit Intake" />
<input type="reset" name="cancel" value="Clear Form" />
<!--- buttons to submit form and reset form to default status -->
<!-- <button id="BA_submit" class="submitbutton icon-right ui-state-default2 ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Add Box</button>
<button type="reset" id="BA_reset" class="resetbutton icon-right ui-state-default2 ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Reset</button>
--><br />
</form>
</div>
jquery code
$(function() {
$("#BA_customer").live('change', function() {
if($(this).val()!="")
$.get("/domain/admin/getDept.php?BA_customer=" + $(this).val(), function(data) {
$("#BA_dept").html(data).show();
});
$.get("/domain/admin/getOptions.php?BA_customer=" + $(this).val(), function(data) {
$("#BA_address").html(data).show();
});
});
});
//Begin function to submit box intake form
$(function() { // Function to add box
$("#boxaddform").dialog({
autoOpen: false,
resizable: false,
modal: true,
title: 'Submit a box intake request',
width: 550,
height: 400,
beforeclose: function (event, ui) {
$("#BA_addbox").html("");
$("#BA_dept").hide();
$("#BA_address").hide();
},
close: function (event, ui) {
//$("#BA_boxform").get(0).reset();
$("#BA_addbox").html("");
}
});
});
$(function(){
$("#boxaddform").submit(function(){
var formdata = $(this).serialize();
$.ajax({
type: "POST",
url: "/domain/admin/requests/boxes/boxesadd.php",
data: formdata,
dataType: 'json',
success: function(msg){
//$("#confirm_department").hide();
/*
var $dialog = $('<div id="dialog"></div>')
.html('Your intake was successfully submitted and will be viewable in the reporting area.<br /><br />Thank you.');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'Box intake submission successfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
*/
//alert('You have succesfully submitted your ' + msg.company + ' report. Thank you.');
//console.log(msg);
//$("#BA_addbox").html("You may now close this window.");
//$("#formImage .col_1 li").show();
$("#BA_boxform").get(0).reset();
$("#boxaddform").hide();
}
});
return false;
});
});
// End function to submit box intake form
php code
<?php
$dept = mysql_real_escape_string($_POST['BA_dept']);
$company = mysql_real_escape_string($_POST['BA_customer']);
$address = mysql_real_escape_string($_POST['BA_address']);
$service = mysql_real_escape_string($_POST['BA_service']);
$box = mysql_real_escape_string($_POST['BA_box']);
$destroydate = mysql_real_escape_string($_POST['BA_destdate']);
$authorised = mysql_real_escape_string($_POST['BA_authorised']);
$form = array('dept'=>$dept, 'company'=>$company, 'address'=>$address, 'service'=>$service, 'box'=>$box, 'destroydate'=>$destroydate, 'authorised'=>$authorised);
$result = json_encode($form);
echo $result;
?>
The problem in your code is that you are serializing a DIV, what is incorrect.
The solution would be to serialize only the FORM included in your DIV with a Javascript code like:
...
$(function(){
$("#boxaddform").submit(function(){
var formdata = $('#BA_boxform').serialize();
$.ajax({
type: "POST",
url: "/domain/admin/requests/boxes/boxesadd.php",
data: formdata,
dataType: 'json',
success: function(msg){
...
}
});
return false;
});
....
Also, remember that serialize will only care for INPUT, SELECTand TEXTAREA controls as a normal FORM submit would do (http://api.jquery.com/serialize/).