We Keep Coding

How to prevent executing javascript code before data is entered in jquery dialog form

I'm trying to develop reusable function based on a jQuery dialog form, as a replacement for JS prompt. I need user to input data before other JS code is executed (the AJAX request that follows depends on the input of the user).
The function should read one text field and return the value entered if OK button or Return are pressed.
I managed to create the function with callback and it is working, except it doesn't wait for the user to react and the code after the function is executed.
I understand that jQuery calls are asynchronous and tried versions with deferred option, but that didn't work either.
Is there any way to make my code wait for the user input before it continues executing? Of course, the ideal solution would be to use like var userInput = getTxtField(....);
Update:
The function getTxtField is triggered by other user actions (buttons): renameFile, renameFolder, addFile etc.
Update #2 Problem solved
Thanks to #SuperPrograman's suggestion I started thinking with the logic of asynchronous execution. The original code was developed with value = prompt(...) approach and the AJAX code was at the bottom of the single function. I simply took the AJAX code in a separate function and now it works as expected. I've updated the JS code at the bottom.
My code is the following
....
<div class='hidden' id='dialog-newName' title=''>
<label id='label-txtField' for="txtField"></label>
<input type="text" name="txtField" id="txtField" value="" class="text ui-widget-content ui-corner-all">
</div>
....
function getTxtField (title, label, defVal, callBack) {
$('#label-txtField').text(label);
$('#txtField').val(defVal);
$( '#dialog-newName' ).dialog({
modal: true, closeOnEscape: false,
height: 200, width: 500,
title: title,
buttons: {
OK: function() {
callBack('OK', $('#txtField').val());
$(this).dialog( "close" );
},
Cancel: function() {
$('#txtField').val('');
//callBack('Cancel', ''); // not necessary
$(this).dialog( "close" );
}
},
});
}
...
switch (action) {
case 'action1':
// user pressed button for Action1
console.log('before dialog getTxtField ');
getTxtField('Action1', 'Label1', 'defaultValue1', function(buttonP, result) {
console.log(buttonP + ' value=' + result); // prints OK
});
// executed before input finished
console.log('after dialog getTxtField returnVal=' + newName + ')');
break;
case 'action2':
// ....
break;
}
// proceed with AJAX request for selected action
...
//=========================
// working code
//=========================
$('.selector').click ( function() {
var frmId = $(this).closest('form').attr('id');
var action = $(this).attr('ajaxAction');
var form = $('#theForm')[0];
var ajaxData = new FormData(form);
switch action {
case 'actions that do not require function getTxtField':
ajaxData.append(specific data for the action);
ajaxCall (frmId, ajaxData);
break;
case 'actions that with function getTxtField':
getTxtField('Titlexx', 'Labelxx', 'defaultValuexx', function(buttonP, result) {
// process result
ajaxData.append(specific data for the action);
ajaxCall (frmId, ajaxData);
});
break;
}
})
function ajaxCall (id, data) {
// standard ajax code
}

Since my comment helped, I'll add answer for quick access.
Basically you want to format code so everything that comes after dialog runs inside callback directly or is initiated from the callback.
So assuming a simple getTxtField prompt method taking a message and a callback function, instead of:
stuffBeforePrompt();
getTxtField('stuff', function() { });
stuffAfterPrompt();
You'll just need:
stuffBeforePrompt();
getTxtField('stuff', function() {
stuffAfterPrompt();
});
Perhaps you could make some solution using 'threads' or workers where you run prompt on separate thread and sleep main until result (or vice versa); but I doubt that would be worth the slight usage convenience.

Why returned value from AJAX disappears almost instantly?

this is my server-side code:
modify_emp.php
<?php
echo $_POST[id];
?>
And this is my Javascript in my html page:
<script>
$(document).ready(function () {
var alreadyClicked = false;
$('.element').hover(
//mouseenter function
function(){
$('.element').click(
function(){
$(this).css("color","blue");
var objName = $(this).attr('name');
var objColumn = $(this).attr('id');
if(!alreadyClicked){
alreadyClicked = true;
$(this)
.prepend('<form method="POST" class="newInput"><input type="text" name="newInput" style="width:140px"></input></form>');
var elemento = $(".newInput");
var position = elemento.position();
$(".newInput").css({
'position': 'absolute',
'top': position.top + 15,
'opacity':0.9,
'z-index':5000,
})
.focus();
//on enter keypress
$(document).keypress(function(e) {
if(e.which == 13) {
$.ajax({
url: 'modify_imp.php',
type: 'post',
data: { id : objName, column : objColumn },
success: function(data, status){
$("#debug").html(data);
}
});
}
});
} //if (!alreadyClicked) end
}); //end mouseenter function
},
//mouseleave function
function () {
alreadyClicked = false;
$(this).css("color","red");
$(".newInput").remove();
}
); //end .hover
});
The debug is a <div id="debug"> </div> at the end of my html page where i want to show my response from server. When i press 'ENTER' I can actually see the value for 0.1s inside that div, but then it disappears.
I already tried to pass the return value to a local or global variable but it didn't work.
For some reason the value inside response is lost after 0.1s, even if i pass it to another variable elsewhere.
Can someone explain me why and how can i "store" the server response?
EDIT: Just edited with my entire <script>

Since you see the result momentarily, I'm going to hazard a guess that you have a form element on your page and when you hit return, it's actually submitting the form. You briefly see the result of the ajax operation and then your form submits causing the page to reload as a new blank page. This is a common issue and always has these same symptoms.
You can either remove the form element or block the default submission of the form with javascript.
If you show us more of your actual HTML, we could help more specifically with how to prevent the form from submitting.

You can solve this by calling the function in the form tag i.e,
<form action="javascript:AnyFunction();">
your code goes here
.

Another way would be to assign a BUTTON to trigger the ajax, and set the button outside of the FORM

Filling multiple divs with single ajax() call, form submit button fails

The short question is when I fill a <div> containing a type=submit button the .click(function(){...} function fails.
What I'm doing is this, #formDialogButton opens #accordion populated by .ajax() containing #userForm with an input type=submit. When client clicks submit it is supposed to fire .ajax() where php does database stuff and returns one of the #userform.
$(".formDialogButton").click(function(){
var userDialog = "#" + this.id + "Dialog";
$("#userForm, #siteForm, #limitForm").html("<img src='ajax-loader.gif' />");
$("#userForm, #siteForm, #limitForm").load("ajax.php", {op: "forms"}, function(responseTxt,statusTxt,xhr){
$("#userForm").html($("#user").html());
$("#siteForm").html($("#site").html());
$("#limitForm").html($("#limit").html());
if(statusTxt=="success") {
$(userDialog).dialog({
autoOpen: false,
draggable: true,
modal: true,
resizable: true,
width: 700,
position: { within: "#mainContent" }
});
$(userDialog).dialog("open");
$( "#accordion").accordion({
collapsible: true,
heightStyle: "content",
});
};
if(statusTxt =="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
This is working and returns a <input class="submitAndReturn" type="submit" value="Submit" /> in the form. But I can't "find" it to do anything.
$(".submitAndReturn").click(function() {
alert ('this is where I call my regular .formSubmitButton and let success: function() do a .formDialogButton ');
});
I'm a total self taught amateur so please forgive me and try to help. Thanks

Sounds like you are trying to add the click event before the element is loaded on the page. Change
$(".submitAndReturn").on("click", function() {
alert ('as .submit and return is dynamically loaded. so, use on function');
});
to
$(document).on("click", ".submitAndReturn", function(e) {
e.preventDefault(); //cancel the click action if needed
alert ('as .submit and return is dynamically loaded. so, use on function');
});

$(".submitAndReturn").on("click", function() {
alert ('as .submit and return is dynamically loaded. so, use on function');
});

What I'm doing is this, #formDialogButton opens #accordion populated by .ajax() containing #userForm with an input type=submit
If I understand it correct .formDialogButton DOM element is getting loaded in .ajax() callback event.
If you are loading the javascript in question above in header or at the page end, most likely the $(".formDialogButton").click(function() event is not getting attached to DOM.
This happens because the script has already fired before the AJAX has fetched the required DOM to which event has to be attached. You would need to attach the event in .ajax() success callback. Something like
$.ajax({
url: 'YOUR_URL_TO_FETCH_FORM',
success: function(data) {
// associate click
$(".formDialogButton").click(function() // rest of the code
}
});

How to place a jQuery snippet into a global file

I have a JavaScript file here http://www.problemio.com/js/problemio.js and I am trying to place some jQuery code into it that looks like this:
$(document).ready(function()
{
queue = new Object;
queue.login = false;
var $dialog = $('#loginpopup')
.dialog({
autoOpen: false,
title: 'Login Dialog'
});
var $problemId = $('#theProblemId', '#loginpopup');
$("#newprofile").click(function ()
{
$("#login_div").hide();
$("#newprofileform").show();
});
// Called right away after someone clicks on the vote up link
$('.vote_up').click(function()
{
var problem_id = $(this).attr("data-problem_id");
queue.voteUp = $(this).attr('problem_id');
voteUp(problem_id);
//Return false to prevent page navigation
return false;
});
var voteUp = function(problem_id)
{
alert ("In vote up function, problem_id: " + problem_id );
queue.voteUp = problem_id;
var dataString = 'problem_id=' + problem_id + '&vote=+';
if ( queue.login = false)
{
// Call the ajax to try to log in...or the dialog box to log in. requireLogin()
}
else
{
// The person is actually logged in so lets have him vote
$.ajax({
type: "POST",
url: "/problems/vote.php",
dataType: "json",
data: dataString,
success: function(data)
{
alert ("vote success, data: " + data);
// Try to update the vote count on the page
//$('p').each(function()
//{
//on each paragraph in the page:
// $(this).find('span').each()
// {
//find each span within the paragraph being iterated over
// }
//}
},
error : function(data)
{
alert ("vote error");
errorMessage = data.responseText;
if ( errorMessage == "not_logged_in" )
{
//set the current problem id to the one within the dialog
$problemId.val(problem_id);
// Try to create the popup that asks user to log in.
$dialog.dialog('open');
alert ("after dialog was open");
// prevent the default action, e.g., following a link
return false;
}
else
{
alert ("not");
}
} // End of error case
}
}); // Closing AJAX call.
};
$('.vote_down').click(function()
{
alert("down");
problem_id = $(this).attr("data-problem_id");
var dataString = 'problem_id='+ problem_id + '&vote=-';
//Return false to prevent page navigation
return false;
});
$('#loginButton', '#loginpopup').click(function()
{
alert("in login button fnction");
$.ajax({
url:'url to do the login',
success:function() {
//now call cote up
voteUp($problemId.val());
}
});
});
});
</script>
There are two reasons why I am trying to do that:
1) I am guessing this is just good practice (hopefully it will be easier to keep track of my global variables, etc.
2) More importantly, I am trying to call the voteUp(someId) function in the original code from the problemio.js file, and I am getting an error that it is an undefined function, so I figured I'd have better luck calling that function if it was in a global scope. Am I correct in my approach?
So can I just copy/paste the code I placed into this question into the problemio.js file, or do I have to remove certain parts of it like the opening/closing tags? What about the document.ready() function? Should I just have one of those in the global file? Or should I have multiple of them and that won't hurt?
Thanks!!

1) I am guessing this is just good practice (hopefully it will be
easier to keep track of my global variables, etc.
Yes and no, you now have your 'global' variables in one spot but the chances that you're going to collide with 'Global' variables (ie those defined by the browser) have increased 100% :)
For example say you decided to have a variable called location, as soon as you give that variable a value the browser decides to fly off to another URL because location is a reserved word for redirecting.
The solution to this is to use namespacing, as described here
2) More importantly, I am trying to call the voteUp(someId) function
in the original code from the problemio.js file, and I am getting an
error that it is an undefined function, so I figured I'd have better
luck calling that function if it was in a global scope. Am I correct
in my approach?
Here's an example using namespacing that will call the voteUp function:
(function($) {
var myApp = {};
$('.vote_up').click(function(e) {
e.preventDefault();
myApp.voteUp();
});
myApp.voteUp = function() {
console.log("vote!");
}
})(jQuery);
What about the document.ready() function? Should I just have one of
those in the global file? Or should I have multiple of them and that
won't hurt?
You can have as many document.ready listeners as you need, you are not overriding document.ready you are listening for that event to fire and then defining what will happen. You could even have them in separate javascript files.

Be sure your page is finding the jquery file BEFORE this file is included in the page. If jquery is not there first you will get function not defined. Otherwise, you might have other things conflicting with your jquery, I would look into jquery noConflict.
var j = jQuery.noConflict();
as seen here:
http://api.jquery.com/jQuery.noConflict/
Happy haxin
_wryteowl

Extending what KreeK has already provided: there's no need to define your "myApp" within the document ready function. Without testing, I don't know off the top of my head if doing so is a potential source for scope issues. However, I CAN say that the pattern below will not have scope problems. If this doesn't work, the undefined is possibly a script-loading issue (loading in the right order, for example) rather than scope.
var myApp = myApp || {}; // just adds extra insurance, making sure "myApp" isn't taken
myApp.voteUp = function() {
console.log("vote!");
}
$(function() { // or whatever syntax you prefer for document ready
$('.vote_up').click(function(e) {
e.preventDefault();
myApp.voteUp();
});
});

jQuery: Can't retrieve an attribute of a dynamically created DOM element

Here's the situation: I'm writing a simple AJAX application that performs CRUD functions. When the user double clicks on a particular element, the element changes into a text box so that they can edit inline. When the text box loses focus (code for which is below), the value of the textbox gets POSTed to a PHP script that updates the database.
All is groovy except for one thing. When I create a new record, which gets popped onto the top of the list with AJAX, I can't edit that record without refreshing the page. I mean, the edit looks like it's been committed, but when you refresh, it reverts back to the original. After refreshing, there are no issues.
To boil it down: When I try to run the following code on newly created rows in my table (both in the database and on the page), the edit appears to be made on the page, but never makes it to the database.
//Make changes on FOCUSOUT
$('#editable').live('focusout', function(){
var parentListItem = $(this).parents('li');
var theText = $(this).val();
var parentListItemID = parentListItem.parents('ul').attr('id');
$(this).remove();
parentListItem.html(theText);
parentListItem.removeClass('beingEdited');
$.post("databasefuncs.php?func=edit", { postedMessage: parentListItemID, fullTextContent: theText },
function(result){
if(result == 1) {
parentListItem.parents('ul').animate({ backgroundColor: 'blue' }, 500).animate({ backgroundColor: '#eeeeee' }, 500);
} else {
alert(result);
}
});
});

I suppose you are not binding the event to the new DOM Element loaded via AJAX.

Your problem is that the post executes but the function you target (func=edit) never fires, the params you are sending after the question mark are never read by your php, you are sending a post request and wanting it to behave like a get by attaching parameters to the URL, change your request to:
$.ajax({
type: "POST",
url: "databasefuncs.php",
data: {func: "edit", postedMessage: parentListItemID, fullTextContent: theText},
success: function(data, textStatus, jqXHR) {
if(textStatus === "success") {
parentListItem.parents('ul').animate({ backgroundColor: 'blue' }, 500).animate({ backgroundColor: '#eeeeee' }, 500);
}
else {
alert(textStatus);
}
}
});
Now in your PHP you have $_POST["func"] = "edit";
Hope this is clear and it helps. Cheers.