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
Related
UPDATED
CONTEXT:
I have a form that is editing event data: event photo, title, description, etc. When the user opens the edit form, all of the data is in the form fields. The user can choose to edit the data and update, or not to.
PROBLEM:
If the user does not change the photo and presses 'submit', the photo disappears.
DESIRED RESULT:
I want the photo to be updated if the user chooses to change the photo, and I want the existing photo to remain if the user doesn't change the photo.
** UPDATE**
I previously thought this was a PHP isset() / empty() check but it's not. It's a javascript problem, which I'm not experienced with. I believe the submit button and submit id is causing the javascript to fire regardless of the php.
CODE of HTML image input form.
<div class="row">
<div class="col-md-12">
<div id="event_picture" style="width:350px"></div>
</div>
<div class="col-md-12" style="padding-top:30px;">
<strong>Select Image:</strong>
<br/>
<img width='100' src="images/<?php echo $e['event_picture'];?>" alt="">
<input type="file" id="upload" class="form">
<br/>
<input type="hidden" name="event_picture" id="event_picture_base64">
</div>
</div>
SUBMIT BUTTON
<input type="submit" name="submit" class="upload-result" value="Update Event" class="btn btn-primary btn-lg">
JAVASCRIPT
<script type="text/javascript">
$uploadCrop = $('#event_picture').croppie({
enableExif: true,
viewport: {
width: 300,
height: 300,
type: 'square'
},
boundary: {
width: 350,
height: 350
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
document.getElementById("event_picture_base64").value = resp;
});
});
</script>
I think the problem is I need a conditional to prevent the javascript from firing when I press submit button. I'm searching online now, but I really don't know how to write that conditional.
Any help is appreciated.
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");
}
});
});
I have a button (create) and when it's clicked, it creates a new button (Change coordinates) that should be able to open dialog when it's clicked.
First of all I created body of dialog window, I created this via JavaScript, this is just how it looks like in HTML:
<div id="dialog-form" title="Change coordinates">
<p class="validateTips">Both fields are required.</p>
<form>
<fieldset>
<label for="lon">Longitude (decimal)</label>
<input type="text" name="lon" id="lon" value="" class="text ui-widget-content ui-corner-all">
<label for="lat">Latitude (decimal)</label>
<input type="text" name="lat" id="lat" value="" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
Now when create button is clicked I crate new button able to open dialog:
$( "#create" ).button().on( "click", function()
{
var btn = document.createElement("BUTTON");
btn.id = "change_coord";
var t = document.createTextNode("Change coordinates");
btn.appendChild(t);
document.body.appendChild(btn);
});
And this is how my dialog looks like:
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons:{
"Create an account": addUser,
Cancel: function(){
dialog.dialog( "close" );
}
},
close: function(){
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
Weird is that it works when I'm creating body of dialog and button to open it in
$(function()
{
....
});
But when I'm dynamically creating this button to open dialog it doesn't work at all.
HERE is my fiddle to show you my problem.
Per Charlietfl, who is correct "live" has been deprecated, but it does still remains a common solution to the problem. The other method I've used, which also works is:
$(document).on("mouseenter","#lsTMFmenu", function() {
However, I cannot get JQuery to work against dynamically loaded HTML using just $("#selector").on(), I must use $(document).on statement shown above.
Thanks.
I have a form with two instances of mobiscroll one of which pops depending on the button clicked.
$(function(){
$('#clocklater').mobiscroll().time({
theme: 'default',
display: 'modal',
mode: 'scroller',
setText: "Save",
cancelText: "Cancel",
headerText: "Available after",
timeFormat: 'HHii',
timeWheels: 'HHii',
stepMinute:10
});
$('#later').click(function(){
$('#clocklater').mobiscroll('show');
$('[name=available]').val(2);
return false;
});
});
$(function(){
$('#clockyes').mobiscroll().time({
theme: 'default',
display: 'modal',
mode: 'scroller',
setText: "Save",
cancelText: "Cancel",
headerText: "ETA station",
timeFormat: 'ii',
timeWheels: 'ii',
stepMinute:5
});
$('#yes').click(function(){
$('#clockyes').mobiscroll('show');
$('input[name=available]').val(1);
return true;
});
});
my HTML is
<form name="response" action="" method="post" >
<input name="clocklater" id="clocklater" class="i-txt" type='hidden' onChange="document.response.submit();"/>
<input name="clockyes" id="clockyes" class="i-txt" type='hidden' onChange="document.response.submit();"/>
<div class='yes button'><input id='yes' name='available' type='button' alt="YES" value="yes" /></div>
<div class='no button'><input id='no' name='available' type='button' alt="NO" value="no" /></div>
<div class='later button'><input id='later' name='available' type='button' alt="later" value="later" /></div>
</form>
(aarrgghh can't get that to format nicely)
When I submit the form without calling mobiscroll it all works fine, however when I call mobiscroll after clicking the yes or later buttons the value of the available input isn't passed. Console is not generating any errors.
As you can see I have tried forcing the value depending on the click, that doesn't work either. If I put an alert in before the return the value is there - this is also indicates the js isn't breaking.
Any thoughts on why the value of available isn't there?
FWIW I am processing the form using PHP.
[UPDATE] I just dumped the POST array and the available key isn't even in it.
Button values are only submitted if the form is submitted by clicking the respective button.
In your case the form is submitted in the onChange event of the "clocklater" or "clockyes" inputs.
You can submit it via a hidden field, or instead of submitting in the change event, you can use button type="submit" and trigger a button click in the mobiscroll's onSelect.
E.g. (for the "clocklater"):
$(function(){
$('#clocklater').mobiscroll().time({
theme: 'default',
display: 'modal',
mode: 'scroller',
setText: "Save",
cancelText: "Cancel",
headerText: "Available after",
timeFormat: 'HHii',
timeWheels: 'HHii',
stepMinute:10,
onSelect: function () {
submit = true;
$('[name=available]').val(2);
$('#later').click();
}
});
var submit;
$('#later').click(function(){
if (!submit) {
$('#clocklater').mobiscroll('show');
return false;
}
submit = false;
});
});
HTML changes:
<input name="clocklater" id="clocklater" class="i-txt" type='hidden' />
<div class='later button'>
<input id='later' name='available' type='submit' alt="later" value="later" />
</div>
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");
});