Develop Reference

Jquery ajax issue in php and ajax code

Here in the following code in jquery i get the alert test1 but when i try to get alert test2 i dint got that... there is some issue in code please help me to resolve.
$(document).ready(function() {
$(".delete-item-details").click(function() {
alert('test1');
var id = $(this).attr('ids');
alert('test2');
var order_id = $("#order_id").val();
goto_url = "/order/DeleteOrderDetailItems/" + id;
dataString = 'id=' + id + '&order_id=' + order_id;
$.ajax({
type: "POST",
url: goto_url,
data: dataString,
cache: false,
success: function(html) {
$("#row-id-" + id).fadeOut();
$("#total_span").html(html);
}
});
});
});

Please change this three lines in code and you will definitely get alert !!
alert('test1');
var id=$(this).attr('id'); // here you have written ids
alert('test2');
The default attribute is 'id' not 'ids'
If still now clear let me know i will help you out.

TRY
var id = $(this).prop('ids');

Check the value of a text input field with ajax

I have a website where the log ins are screen names. On the create user form I want to be able to have ajax check if a screen name exists already as it is typed into the form.
This is the HTML form input field
<label for="screenName">Screen Name:
<input type="text" class="form-control" name="screenName" id="screenName" size="28" required>
<div class="screenNameError"></div>
A message should be displayed in the <div class="screenNameError"></div>line if the username matches the database.
This is my Jquery code for this.
$(document).ready(function(){
if ($('#screenName').length > 0){
var screenName = $("input").keyup(function(){
var value = $(this).val();
return value;
})
$.ajax({
type: 'post',
url: 'screenNameCheck.php',
data: 'Screen_Name=' + screenName,
success: function (r) {
$('.screenNameError').html(r);
}
})
}
});
This is the PHP file that gets called to make the DB query
$screenName = $_POST['Screen_Name'];
$screenNameSQL = "SELECT Screen_Name FROM Users WHERE Screen_Name = '$screenName'";
$result = $my_dbhandle->query($screenNameSQL); //Query database
$numResults = $result->num_rows; //Count number of results
$resultCount = intval($numResults);
if($resultCount > 0){
echo "The username entered already exists. Please a different user name.";
}
For some reason my Jquery is not firing when I type the username in the form :/
Thanks in advance

Try changing your jQuery to this -
$(document).ready(function() {
$('#screenName').keyup(function() {
var value = $(this).val();
$.ajax({
type: 'post',
url: 'screenNameCheck.php',
data: 'Screen_Name=' + value,
success: function(r) {
$('.screenNameError').html(r);
}
});
});
});
However you probably want to minimise the number of ajax requests being made so I would advise putting your ajax request into a setTimeout functon and clearing it with each subsequent keypress. -
$(document).ready(function() {
var ajaxRequest;
$('#screenName').keyup(function() {
var value = $(this).val();
clearTimeout(ajaxRequest);
ajaxRequest = setTimeout(function(sn) {
$.ajax({
type: 'post',
url: 'screenNameCheck.php',
data: 'Screen_Name=' + value,
success: function(r) {
$('.screenNameError').html(r);
}
});
}, 500, value);
});
});

if ($('#screenName').length > 0){
You should change it with
if ($('#screenName').val().length > 0){
OR
var name = $('#screenName').val();
if(name.length >0) {...
not sure about the syntax...

Add an event on keyup like this :
Edit
$("#screenName").on("keyup",function(){
var screenName=$(this).val();
if(screenName!='')
{
$.ajax({
type: 'post',
url: 'screenNameCheck.php',
data: 'Screen_Name=' + screenName,
success: function (r) {
$('.screenNameError').html(r);
}
})
}
});
JsFiddle

Your ajax call should be inside the keyup handler.

jQuery AJAX URL change Phonegap

How do I change the URL in Ajax and reload page with new content?
I make a service in WP: www.test.com/page/?u=test
$_GET['u'];
and while(..... new information) works good.
But I have a problem with this..
$('#test').click(function(){
uel = "http://......com/servisi302/?u=zanimljivosti";
$('#page-content').hide(1000);
$('#page-content').show(1000);
alert(uel);
return false;
});
jQuery.ajax({
url : '' +uel,
type : "POST",
dataType : "json",
data : "param=no",
success : function(html){
var QUERY = jQuery(".query");
console.log(html);
jQuery.each(html, function(key, value){
console.log(value);
QUERY.append("<div class='media well'><a href='#' class='pull-left'><img width='64' height='64' src='" + value.slika + "'class='media-object' alt='' /></a><div class='media-body'><h4 class='media-heading'><p>" + value.naslov + "</p></h4></div></div>");
});
}, error : function(e){
alert(e);
}
});
});
How do I change the URL or variable and subsequently reload with the new content?

JS/AJAX Auto submit form: Disabling enter key to prevent page refresh

I am using a function that will submit with ajax and without the help of a button click. But I am currently undergoing two issues which with trial and error haven't found plausible solutions:
First is there any way I can disable the enter button click(this causes the whole page to refresh)?
JSFIDDLE basic example in how the JS function works
Second, It feels like I am going the roundabout way to display what has been posted. How can I change this part of the function $('#special').html('<p>' + $('#resultval', result).html() + '</p>'); to have it POST just inside a div called #special without the need of span or <p> #resultval?
Everytime i echo through php I have to do set it like this to display a result: <div id="special"><span id="resultval">This is the result.</span></div>
<script>
$(document).ready(function() {
var timer = null;
var dataString;
function submitForm(){
$.ajax({ type: "POST",
url: "posting.php",
data: dataString,
success: function(result){
$('#special').html('<p>' + $('#resultval', result).html() + '</p>');
}
});
return false;
}
$('#ytinput').on('keyup', function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 050);
var name = $("#ytinput").val();
dataString = 'name='+ name;
});
});
</script>

$(document).ready(function() {
var timer = null;
var dataString;
function submitForm(event){// the function call on click or on submit onclick=submitForm(event);
event.preventDefault(); //to prevent enter key
$.ajax({ type: "POST",
url: "posting.php",
data: dataString,
success: function(result){
$('#special').text(result); //you can use text() or html() only
}
});
return false;
}
$('#ytinput').on('keyup', function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 050);
var name = $("#ytinput").val();
dataString = 'name='+ name;
});
});

pass values from textbox to url in javascript

How can i pass values from textbox to a url on click of a button using javascript? I have a login page. when i input a username and password in a textbox, the url should take the values and give the response. How can i do it?
http://url.php?id=login&email=<email>&password=<password>
This url gives response as {"status":0,"msg":"Email is Wrong!"} and when i put my id and pwd in url
http://url.php?id=login&email=abc#gmail.com&password=abc
url give response as
{"status":1,"msg":"Session is active","session_id":"p246igeaadcdui7hb0o2677c53","user_id":"13"}
Thanks in advance..
function A() {
$.getJSON('http:url.php?id=login&email=&password=', function (data) {
alert(data.status);
alert(data.msg);
});
}
function B() {
$.getJSON('url.php?id=login&email=&password=', function (data) {
alert(data.user_id);
document.getElementById("login").innerHTML;
});
}
Username :
Password :
This is what i am working on

Plain javascript:
var email = document.getElementById("email").value;
var password = document.getElementById("password ").value;
var url = "http://url.php?id=login&email="+encodeURIComponent(email)+"&password="+encodeURIComponent(password);
window.location.href = url;
jQuery:
var email = $("#email").val();
var password = $("#password").val();
var url = "http://url.php?id=login&email="+encodeURIComponent(email)+"&password="+encodeURIComponent(password);
window.location.href = url;
Note that for my example to work, the email and the password input fields must have the id set to email and password respectively.

ajax version:
//same as satoshi version
var myUrl = "http://url.php?id=login&email="+encodeURIComponent(email)+"& password="+encodeURIComponent(password);
$.ajax({
url : myUrl,
dataType : 'json',
success : function(data){
alert( data.status ? ("logged in " + data.msg) : ("error: " + data.msg));
},
error : function(jqXHR, textStatus, errorThrown){
alert('error ' + errorThrown);
}
});