|
JavaScript - Jquery - Using Ajax During Form Validation
I am trying to perform an AJAX lookup during form validation onsubmit. It is important that it takes place during submit, but it seems to always return true and allow the form to post even when it should not. I have tried putting the AJAX portion in its own function and having it return true or false to the validation function but also does not seem to work. Here is what the code looks like...
Code: $("#companyform").submit(function() {
$.ajaxSetup({ cache: false });
$.post("ajax_v2Functions.cfm", { coNum: $("#companyNumber").val() },
function(response) {
if(response != "") {
alert("That company number is already in use by " + response);
$("#companyNumber").focus();
return false;
}
return false;
} , "html");
if($("#companyname").val() == "") {
alert("The company name cannot be left blank.");
$("#companyname").focus();
return false;
}
if($("#companyNumber").val() == "") {
alert("The company number cannot be left blank.");
$("#companyNumber").focus();
return false;
}
});
Similar TutorialsI've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
plz i want to know how i can make a form validation using AJAX??? i need a sample or an idea of how making my form validation using AJAX thnx alot in advance I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is. Here is the code. Code: // BEGIN JAVASCRIPT
$(function(){
//original field values
var field_values = {
//id : value
'name' : 'your name',
'email' : 'your email',
'yourmessage' : 'I would like to inquire about'
};
//inputfocus
$('input#name').inputfocus({ value: field_values['name'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });
//form validation
$('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
$('#submit').click(function(){
//remove classes
$('#sendamessage input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
var error = 0;
fields1.each(function(){
var value = $(this).val();
if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error'); // css class
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid'); // css class
}
});
if(!error) {
// this is where I get confused. How do I make this send the form?
alert('Data sent');
});
}
});
});
// END JAVASCRIPT
<form method="post" action="" onsubmit="return validateForm()" >
<input type="hidden" name="ccf_customhtml" value="1" />
<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
<input type="hidden" name="destination_email" value="dauidus@gmail.com" />
<input type="hidden" name="required_fields" value="" />
<label for="name">Name</label>
<input type="text" name="name" id="name" value="your name" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="your email" />
<label for="yourmessage">Your Message</label>
<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>
<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
</form>
I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent. Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page. Cheers! -Dave so i have this "class" defined in a javascript file, "a.cross-link". This enables the ability for users to navigate the webpage in a slider format. it works fine if I directly place the required html code: Code: <a class="cross-link" href="#3" title="Go to Page 2">View Results</a> but if i have php print out that line for me, it doesn't work: PHP Code: echo "<a class= \"cross-link\" href=\"#3\" title=\"Go to Page 3\">$name</a>";( Where $name is some variable) Note: the php code is just your average sql stuff. here is an interesting observation i've made: if i "hardcode" this this into the html: <a class="cross-link" href="#3" title="Go to Page 3">View Results</a> and then i go to generate the sourcecode, this is what appears (this works): <A class=cross-link title="Go to Page 3" href="#3" jQuery1283131847233="30">View Results</A> but if i have the html made by a php echo statement, it just stays the same - i dont get a jQuery1283131847233="30" generated in the sourcecode. i'm sorry i'm having difficulty describing the problem. i'm new to jquery and ajax stuff. to me, it seems like the "cross-link" class i have defined in the javascript isn't being applied to correctly. i have no idea. can you invoke javascript from a php echo statement that is formatted to produce html code? here is another thing i believe is true: when the page loads, the javascript loads. the users, through the use of ajax, submitts a sql querey and navigates, using a jquery slider, to another div (where i want the user to go after selecting a resulting link from the sql query). so the javascript is going to execute before the list of results is produced. do I need to rerun the javascript each time new php produced sql data is populated in a div? if so, how? i dont know what more information you may need, so please ask. Thanks. I'm updating a database w/o "reloading" the page using jquery & ajax. Everything works fine, but I need to display an error (in php - mysql_error()) in the error callback function. I also don't think that the success/error callbacks are working as even when I changed the password in to the mysql server in the php file, I got the success message :S Can any1 help me out? this is the php script Code: <?php
/*$fp = fopen('data.txt', 'a+');
fwrite($fp, 'ok');
fclose($fp);*/
$sections = $_REQUEST['sections'];
$fontColor = $_REQUEST['fontColor'];
$bgcolor = $_REQUEST['bgcolor'];
$font = $_REQUEST['font'];
$fontSize = $_REQUEST['fontSize'];
$lineHeight = $_REQUEST['lineHeight'];
$letterSpacing = $_REQUEST['letterSpacing'];
$fontStyle = $_REQUEST['fontStyle'];
//$tekst = $_REQUEST['tekst']
$connect = mysql_connect("localhost", "root", "password") or die ("Unable to connect to the database");
mysql_select_db("ipsum") or die ("doesnt exist: " . mysql_error());
$update = "INSERT INTO con (Sections, Fontcolor, BackgroundColor, Font, FontSize, LineHeight, LetterSpacing, FontStyle) VALUES ('".$sections."', '".$fontColor."', '".$bgcolor."', '".$font."', '".$fontSize."', '".$lineHeight."', '".$letterSpacing."', '".$fontStyle."')";
// the content of 'data.txt' is now 123 and not 23!
mysql_query($update) or die ("unable to update: " . mysql_error());
mysql_close($connect);
?>
and this is what I currently have for the error Code: error: (function (){$('#errorMessage').fadeIn("slow").delay(1000).fadeOut(2000);}),
but that needs to change... i have made one page this is page link http://pickthefights.com/fantansy-fi...482&page=fight the code of this page is this <script type="text/javascript"> //////////////////////////////// // // Refreshing the DIV FANBOO2 // //////////////////////////////// function refreshdiv_fanboo2(){ // Customise those settings var seconds = 1; var divid = "fanboo2"; var url = "http://pickthefights.com/fanboo2/?id=<?php echo $idvar ?>"; // Create xmlHttp var xmlHttp_two = AJAX(); // No cache var timestamp = fetch_unix_timestamp(); var nocacheurl = url+"?t="+timestamp; // The code... xmlHttp_two.onreadystatechange=function(){ if(xmlHttp_two.readyState==4){ document.getElementById(divid).innerHTML=xmlHttp_two.responseText; setTimeout('refreshdiv_fanboo2()',seconds*1000); } } xmlHttp_two.open("GET",nocacheurl,true); xmlHttp_two.send(null); } // Start the refreshing process window.onload = function startrefresh(){ setTimeout('refreshdiv_fanboo2()',seconds*1000); } </script> <script type="text/javascript"> refreshdiv_fanboo2(); </script> <div name="fanboo2" id="fanboo2"></div> now what ever i put in fanboo2 page it works fine but javascript or jquery is not working here is code of fanboo2 page, you can check page here http://pickthefights.com/fanboo2/?id=482# here is it is working but not here http://pickthefights.com/fantansy-fi...482&page=fight </script> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider1').bxSlider(); }); </script> <ul id="slider1"> <li>Slide one content</li> <li>Slide two content</li> <li>Slide three content</li> <li>And so on...</li> </ul> please help me out i want to make java script work on both of this page I have a page that has a simple AJAX call that works fine in firefox and chrome but not in ie. In IE my loading image shows up but the actual sourceURL never loads or shows. Below is my html and javascript code. Can anyone help me with this? <div id="design_strap" style="display:none"> <a href="javascript:loadContent('#content', 'strap.html');">Link</a> <div id="content"></div> </div> <script type="text/javascript"> $.ajaxSetup ({ // Disable caching of AJAX responses cache: false }); function loadContent(elementSelector, sourceUrl) { $(""+elementSelector+"").html('<p><img src="images/loading.gif" width="150" height="150" /></p>'); $(""+elementSelector+"").load(""+sourceUrl+""); //$("content").height(350); } </script> I want to pass the "divId' function so that i can grab functions dynamically into the server where "success" is. this possible? I know the current setup is not (because " d.divId " isn't a variable) Code: function run(times,divId)
{
$(function()
{
var client_id = $('#client_id').attr('value');
$.ajax(
{
url:'http://urlhere.com',
data:{c:client_id},
timeout:99999999999999,
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'jsonpCallback',
error:function()
{
if (times==1)
{
run(2);
}
else
{
$('#'+divId).html('Error')
}
},
success:function(d)
{
$('#'+divId).html('$'+d.divId);
}
});
}
right now I almost have this script working the way I want it to, here it is: Code: var hash = window.location.hash.substr(1);
var href = $('.workimg a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #selected';
$('#selected').load(toLoad)
}
});
$('.workimg a').click(function(){
var toLoad = $(this).attr('href')+' #selected';
$('#selected').slideUp('slow',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href');
function loadContent() {
$('#selected').load(toLoad,'',showNewContent)
}
function showNewContent() {
$('#selected').slideDown('slow',hideLoader);
}
function hideLoader() {
$('#load').slideUp('slow');
}
return false;
});
How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are 1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect? 2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next? Hi there, I am trying to make a view that stacks images on top of one another. As the user uses mouseup or mousedown (+ LMB click) the user can scroll through the images. I am trying to use Ajax to load the new image when the user mousesup. RIght now nothing happens on mouseup. Can someone tell me what I am doing wrong please? thank you. FYI: no errors on Firebug, hence I am posting here. Code: $("#filmviewer").mouseup(function(){
alert("t");
});
html Code: <div id="filmviewer" style="width:400px;"> <img src="pic_1.jpg" /> </div> The problem is when I click and mouseup over the image the alert("t") does not fire. what am I doing wrong? function sendValues() { var str = $("#myForm").serialize(); $.ajax({ type: 'POST', url: "/trying.php?avoidcache=' + myTimestamp();", data: str, cache: false, return:false }); } $(":checkbox[name='brand[]']").click(function() { $("#myForm").submit(); }); ..Upon reload, the values are serialized.. But when the page is done loading..the chosen values (checkbox) is not checked, I need it stay checked so I can add other values via checkbox to the url. here is a live demo.. http://vbizmarketing.com/trying.php Please help. Hey guys I should preface this by saying that this is not for my own site, or my own code; a friend has gone on holiday and needed this project fixing while he was away. Unfortunately my experience with jQuery is almost nil and everything was coded by someone else, so I'm really tearing my hair out. This is a Wordpress installation running Thematic with two child themes, one of which uses Ajax calls to grab page content. The issue is that the Ajaxified calls stop the swfObject content from being loaded. Compa http://dev.segolondon.com/wp292/media/ <- Flash content loads versus: http://dev.segolondon.com/wp292/#wp292/media/ If you take a look at the code of the two pages, you'll see there are no swfobject.embedSWF() calls on the Ajaxified page. It seems as though the jQuery calls are pre-empting the JS/Flash detection, so the swfObject code is never even written to the page. The actual custom, handwritten code (i.e. not from a library or a plugin) on this site is minimal, so I'm grasping at straws to fix this. I read somewhere about using a script block like this: Code: <script>
$(document).ready(
function() {
// Make the swfObject call
}
);
</script>
But I'm not really sure where to put it since there are so many plugins used, all with slightly different embed methods. Any help would be very gratefully received! All, I currently have this code to make a post to my database: Code: var $dataString = 'name='+ $name + '&black_white=' + $black_white + '&color=' + $color + '&color=' + $other + '&other_text=' + $text;
$.post("save_edits.php", {image_save_string: $dataString}, function(result) {
$("#multiple_images").hide();
$("#result_success").html("<font color='red'>We've successfully saved your photo edits!</font><br><br>");
$("#image_divs").html(result);
});
Within the result I'm actually recreating the form for them to use if they want. I have a decent amount of jQuery that got initialized when the original page was loaded. Once I get my new form it doesn't work because it wasn't originally included in the page initialization. Is there a way just to call the document.ready function again to have it reinitialize my form elements again? Thanks in advance. I'm make a ajax call to a processing PHP file that echos either "success" or an "error message". When the success is returning, i want Jquery to recognize this and then redirect the browsers instead of displaying the success message. Here are some snippets. I can only seem to parse to a blank or null. Jquery code: Code: $.ajax({
type: "POST",
url: "process.php",
data: wfLoginPost(),
success: function(msg){
alert(msg);
// both below are either null or blank
//var res = $(msg).find("span.response").text();
//var res = $(msg).find("span.response").html();
if(res == 'Success'){
window.location = 'http://www.google.com';
}
}
});
process.php PHP Code: if($qry[0]['pwd'] == $password){ echo "<span class='response'>Success</span>"; }else{ echo "<span class='response'>Username or password did not match</span>"; } Here is the contents of the msg response from the ajax post: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/960grid.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/statusmessageQ.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.statusmessageQ-0.5.js"></script>
</head>
<span class='response'>Success</span>
I have a problem where the page doesn't expand when more results get loaded via jquery on a facebook style wall. Once more results get loaded the footer stays static instead of moving down. What's the best way to do this? I have Code: var myresult;
var myresult2;
var vresult;
function validateusername(username) {
var validusername = true;
// alert(mobilenumber);
http.abort();
http.open("GET", "checkusername.asp?username=" + username, true);
//alert("here");
http.onreadystatechange = function() {
if (http.readyState == 4) {
myresult = http.responseText;
// alert(myresult);
if (myresult == "True") {
validusername = true;
}
else {
alert("username exists ");
validusername = false;
}
}
}
http.send(null);
return validusername;
}
function validatemessage(message) {
var validmessage = true;
http.abort();
http.open("GET", "checktext.asp?message=" + message, true);
http.onreadystatechange = function() {
if (http.readyState == 4) {
myresult2 = http.responseText;
// alert(myresult);
if (myresult2 == "True") {
validmessage = true;
// alert("valid message is true")
}
else {
alert("You cannot put emails or telephone numbers in any of the details fields");
validmessage = false;
}
}
}
http.send(null);
alert(validmessage);
return validmessage;
}
and then within my validation if (!validateusername(document.getElementById("x_Username").value)) { return false; } and if (!validatemessage(document.getElementById("x_On_Self").value)) { return false; } Now if I just validate one (like just the uername or must the message field then it works but if I leave the validation to both then if one returns false - it causes both to - what am I doing wrong? What would be the best way to get data for a mobile site. I've tried using Jquery $.ajax to bring in the data from a php file. It seems to work however it takes some time to load without a way to really give a progress meter. I was wondering what the fastest way to do this would be. For instance it loads and loads then after a long while the alert(); pops up and the data loads into the page. Ultimately i was thinking i could use the ajax request to read in the data from the mysql database server, then transfer it to localstorage, im using HTML5 primarily for the development also just for reference. Somewhat new to mobile development i was just wondering if anyone had a starting point for me to look at and go from there. Code: $(document).ready(function($){
var dataret = 0;
$.ajax({
type: 'POST',
url: 'mobile.php',
beforeSend: function(){
$('#status').show();
},
success: function(data){
//initialize localstorage here
alert('success');
// if it takes as long as it does, a few minutes, at least show a loading bar...
$('#progress').progressbar({
});
},
dataType: 'json'
});
});
Thanks in advance! So, I know there are lots of threads out there about the jQuery validation plugin and people having issues with IE7, but most of them come down to syntax issues with a closing comma or what not. With that said, I have milled over this code of least a full day now and still have no idea why it fails in IE (all versions) http://jsfiddle.net/rM3ej/4/ Can anyone give me some ideas or insight why this would completely fail? Thanks in advanced. Validation is here - http://jquery.bassistance.de/validate/demo/ - JGrowl is here - http://stanlemon.net/projects/jgrowl.html - How can I get those 2 to work so that a Jgrowl window is activated when a validation from a form is called? I have 2 bucks to give for an answer in my Paypal account - I'm a newb, bare with me Thanks, Jon It does not work in ie7! Here is my code and my link... I have been trying to fix for 2 hours now! Please help. I tried using jquery 1.6.1, 1.5.2, min.validation, regular validation, i changed the buttons to input type="submit" and did everything else I could find but nothing works. When you click submit, it does not validate. It goes straight to my thank you page and I get a blank form in return. I do not know much jquery, just enough to know what I copy and paste and make some minimal changes. Thanks! http://www.denver-website-designer.com/quote.html <script type="text/javascript"> $().ready(function() { var erroralert = $("#quoteForm").bind("invalid-form.validate", function() { $("#erroralert"); }); }); $.metadata.setType("attr", "validate"); $.validator.addMethod("ninja", function(value) { return value == "ninja"; }, 'Can a robot spell "ninja"'); $().ready(function() { $("#quoteForm").validate({ errorContainer: $("#erroralert"), rules: { fullname: { required:true, minlength:2, }, email: { required:true, email:true, }, phone: { required:true, minlength:10, maxlength:15, }, pages: { required:true, minlength:1, maxlength:10, number:true }, whyrate: { required:true, minlength:10, }, ninja: "ninja", }, messages: { email: "Please enter a valid email address", pages: "Numeric values only", } }); }); </script> |
|||||||