Written by 
Sandy asks…
Help with jQuery/Ajax form validation?
I have a code that submits my form via AJax without having to refresh the page. The problem is that I need to validate the fields first before submitting the form. So I found a jQuery form validation plugin. Each of these 2 scripts work perfectly well on their own but when I try to use them both together, it just fails. Can someone please help me figure out what I’m doing wrong? here’s a link to the form:
http://e-matter.com/promo/WSOgraphics/chart/
If you click the button the form just validates without even checking the fields.
Here’s a link to the validation script I’m TRYING to use:
http://e-matter.com/promo/WSOgraphics/chart/valid.html
Administrator answers:
The “form” image is useless: we need to see the code!
My guess is that the validation script you have is “confused”, because you have TWO forms with the SAME NAME (or id)
The validation script must receive the form id, like:
function validate(theForm) { }
and the call to the function should be:
… Onclick = “validate(document.forms['formname']);”
If your two forms have the same name, you have a problem!
Daniel asks…
Why IE doesn’t really support jquery ajax?
Now i have the following script as base.js
function ExtConn()
{
this.getHTML = function(_url, querystring){
bodyContent = $.ajax({
url: _url,
type: ‘POST’,
data: querystring,
async:false
});
//alert(bodyContent);
return bodyContent.responseText;
};
this.sendForm = function(Form){
var dataString = ”;
for(i=0; i<Form.length; i++){
var obj = Form[i];
if(!obj.disabled){
if(obj.getAttribute(‘type’) == “radio” || obj.getAttribute(‘type’) == “checkbox”){
if(obj.checked){
dataString += obj.name + “=” + obj.value + “&”;
}
}else{
dataString += obj.name + “=” + obj.value + “&”;
}
}
}
dataString = dataString.substring(0, dataString.length -1);
if($(Form).valid()){
$.ajax({
url: $(Form).getAttribute(‘action’),
type: ‘POST’,
data: dataString + “&do=”+$(Form).getAttribute(‘do’),
beforeSend:function(xhr){
showLoading();
},
success: function(data) {
hideLoading();
data = $.trim(data);
if(data.indexOf(“1″)==0){
showDialog(“”, “Proses berjaya
Tetingkap akan tertutup sendiri. Sila tunggu.“);
setTimeout(“$(‘#messagebox’).dialog(‘close’); updateAreas();”, 2000);
}else{
showDialog(“”, “Proses gagal
“+data);
}
}
});
}
return false;
};
}
and the following html as the test.html
<script type=”text/javascript” src=”a/valid/path/to/jquery.min.js”>
var page = new ExtConn();
and here is the res.php
My Question is – the above scripts run perfectly (i mean, form will not cause the page to navigate to the res.php page) in Mozilla and Google Chrome. But why it doesn’t work with ie? why it did navigates to the res.php page?
Any help would be appreciated.
Administrator answers:
If you’re looking for help with your code, the MSDN Internet Explorer Web Dev. Forum is a great resource. The community there can help you with HTML, CSS and Script specific to Internet Explorer, and I’m sure they would be happy to take a look at your site.
Http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads?ocid=ie8_sm_a
Best,
Bryn
IE Outreach Team
Lizzie asks…
jQuery cannot access div by their id and class names when the data inside a div is reloaded via jQuery $.ajax?
I have a div that when I search for something it reloads the data inside of it instantly while typing in you query. That works though but I have a feature that when you click on a row of data from the refreshed data the row changes to editable but after the data is reloaded using the ajax method in jQuery the row won’t respond to the $.click function. Note that it works before refreshing the data.
Thank you LucMartin, Your answer solved my problem!
Administrator answers:
That’s normal: when you set the innerHTML property of a DIV (or any other element), all child elements are destroyed and then their event handlers are not re-attached to the new child elements.
To solve this you should use the $.delegate(selector, eventType, eventHandler) function to register your events on the row, see link below
Nancy asks…
How to use Jquery and Ajax to take a form value, submit it to an external page, then receive the return data?
using GET
external page uses php
returned data will be entered into a div
thank you
Administrator answers:
One way to do is using jquery ajax call.
Something like
$.ajax(
{
type: “GET”,
url: “externalPage.php/methodName”,
dataType: “json”,
data: ‘{“methodParameter1″:”‘ + value1 + ‘”,”methodParameter2″:”‘ + value2 + ‘”}’, // you can send as many parameters as you want like this
contentType: “application/json; charset=utf-8″,
success: function (jsonResponse) {
$(“#your_DIV_Id”).append(jsonResponse.d.toString());
}
});
for more info please refer the following link
http://api.jquery.com/jQuery.get/
Lisa asks…
Help with using AJAX via JQuery?
I am making a website for my coursework and I am combining the use of PHP, MySQL and AJAX via JQuery to complete the C/W. My question is, how can I display the contents from the MySQL database onto my webpage dymacilly without the page refresh when I click the search button. I also want it to display “no results found” if that was the case.
Please help me out with where to start with this,
Thank you, much appreciated!
No harm in trying!
Administrator answers:
Yeah, that is possible. You need to use a $.post, $.get, $.ajax to call a file that you can grab information from and return the data into a
Click Button -> fires jquery -> run ajax (call file.php) -> return data -> put data into html DOM by $(“selector”).html();
Every time you search / click the button you page will reload without refreshing.
Check out tutorials from jQuery or just search some tutorials. Tons of material out there. If not, you can email once this question is closed.
Powered by Yahoo! Answers
