I am trying to search similar posts through Ajax while typing in input. And I want to get the blank div if there are no results.
Here is my Ajax code I have tried:
$('#title').on('keyup',function(){
$value=$(this).val();
$.ajax({
type : 'get',
url : '{{URL::to('similarpost')}}',
data:{'search':$value},
success:function(data){
if(data != null){
$('.mydiv').html(data);
}
else{
$('.mydiv').html(); //Here I want the div to be blank but it's not working
}
}
});
})
try like this, if you want the div to be blank, put like this $('.mydiv').html('');
$('#title').on('keyup',function(){
let $value = $(this).val();
$.ajax({
type : 'get',
url : '{{URL::to('similarpost')}}',
data:{'search':$value},
success:function(data){
if(data != null){
$('.mydiv').html(data);
}else{
$('.mydiv').html('');
}
}
});
})
Related
Please help me i need to reload page after successful member login.
This is my code but nothing changes (page doesn't reload).
Note: I am using Laravel 5.4
$.ajax({
url: 'json/login',
type: "POST",
data : {
'email' : $("#connection :input[name='email']").val(),
'pwd' : $("#connection :input[name='pwd']").val(),
'_token' : $('meta[name="_token"]').attr('content')
},
dataType : "json",
success: function(data,statusText,xhr){
if(data.success == 'ok'){
$(document).ajaxStop(function() { location.reload(true); });
}else{
$("#alert_danger").html(data.message);
$("#alert_danger").slideDown(100).delay(2000).slideUp(100);
$("#alert_success").slideUp(100);
}
}
});
return false;
});
I think you should just do this :-
if(data.success == 'ok'){
location.reload(true);
}
Using $(document).ajaxStop does not make sense since you are already in the success function.
try window.location.reload();
This might work
Hi I have my first AJAX JSON working and it returns C5:3; at the moment for development and displays this in a div, a img tag should be replaced from a off.png to a on.png but this isn't happening. Would appreciate if anyone could through some light on this?? here is my code
$("button.checkStatus").click(function(){
//This Ajax checks the current on/off status of the passed X10 code
$('img.checkStatus').each(function(i, obj) {
$x10Device = $(this).data("x10");
var postData = "url=http://local/tenHsServer/tenHsServer.aspx?t=ab&
f=DeviceStatus&d=" + $x10Device ;
$.ajax({
type: "POST",
dataType: "json",
data: postData,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/json;charset=UTF-8");
}
},
url: 'urlencodeJson.php',
success: function(data) {
// 'data' is a JSON object which we can access directly.
// Evaluate the data.success member and do something appropriate...
if (data.success == true){
$('#section1').html(data.message);
$("X10").data('src','lightbulbon.png');
}
else{
$('#section2').html(data.message);
$("X10").data('src','lightbulbon.png');
}
}
});
The HTML
<img src="lightbulboff.png" class="checkStatus" data-x10="C5">
<img src="lightbulboff.png" class="checkStatus" data-x10="C6">
<img src="lightbulboff.png" class="checkStatus" data-x10="C7">
<button class="checkStatus">Device Status Check</button>
<div id="section1"></div>
<div id="section2"></div>
This is driving me crazy!!! every way tried over the last 2 days hit a brick wall would be great if I could crack it!!!
Many thanks!!!
I think you could change a couple of things to make it works, first of all change the success part inside your ajax request:
$("X10").data('src','lightbulbon.png');
this wont lead you anywhere, since you're addressing nothing, insted save you current object in a variable and change it (or use the $(this) context where this is your current image object) :
$(this).attr('src','lightbulbon.png');
another little thing is how you set up the call, while it's not wrong, doing :
$x10Device = $(this).data("x10");
var postData = "url=http://local/tenHsServer/tenHsServer.aspx?t=ab&
f=DeviceStatus&d=" + $x10Device ;
could be a little redundant and can lead to easy error while you setup a post request, just rewrite it like an array :
data: {url : 'http://local/tenHsServer/tenHsServer.aspx?t=ab',
f : 'DeviceStatus',
d: $(this).data("x10") }
the whole function should be like :
$("button.checkStatus").click(function(){
$('img.checkStatus').each(function(i, obj) {
var element = $(this);
$.ajax({
type: "POST",
url: 'urlencodeJson.php',
dataType: "json",
data: { url : 'http://local/tenHsServer/tenHsServer.aspx?t=ab',
f : 'DeviceStatus',
d: $(this).data("x10") },
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/json;charset=UTF-8");
},
success: function(data) {
if (data.success == true){
$('#section1').html(data.message);
element.attr('src','lightbulbon.png');
}
else{
$('#section2').html(data.message);
element.attr('src','lightbulbon.png');
}
}
});
});
});
I use the code below to submit my form without reloading the page, but when data.a="a", or "b", etc. in the success part of AJAX, I still would like to submit the form as conventionally done by php without jQuery.
So in this case, the aim is to transmit the AJAX data ("data:myForm.serialize()+"&id_town="+id_town,") to the url specified in the "action" html attribute of the form.
Do you have any idea ?
Html code:
<form id="inscription_form_home" action="index.php?module=membres&action=inscription" method="post" >
...
</form>
jQuery code:
$("#inscription_form_home").submit(function() {
var myForm = $(this);
$.ajax({
dataType: 'json',
type: "POST",
url: "traitement_profil.php",
data:myForm.serialize()+"&id_town="+id_town,
success: function(data){
if (data.a == "a" || data.a == "b" ){
// Transmit the data part to the form url
}else{
alert("Inscription OK.");
}
}
});
return false;
});
As allready been said, you can do another ajax call inside the
Edition after comments, :
Try this...
<form id="inscription_form_home" action="index.php?module=membres&action=inscription"
method="post" >
...
<button id="mButton">Submot<button>
</form>
$(document).ready(function() {$("#mButton").bind('click', mysubmit($));});
function mysubmit()
{
$.ajax({
dataType: 'json',
type: "POST",
url: "traitement_profil.php",
data:myForm.serialize()+"&id_town="+id_town,
success: function(data){
if (data.a == "a" || data.a == "b" ){
//do your new call here, or you can also submit the form
}else{
alert("Inscription OK.");
}
}
});
return false;
}
You can make like this :
$(location).attr('href',YOUR URL);
EDIT
Ok, so I can login fine but when I enter false info I'm redirected to the login page, what I need is to stay on the same page and show the error message e.preventDefault(); doesn't seem to work.
$(function() {
$("#login-form").submit(function(e) {
$('.fail').hide();
$.ajax({
url:"/login",
type: "post",
data: $(this).serialize(),
error:function(){
$('.fail').show();
e.preventDefault();
},
success: function(){
document.location = '/';
}
});
return false;
});
});
Your not actually doing anything with the form, ill try commenting your code to talk you through whats happening.
I'm guessing your using PHP server side for this code.
In PHP you want to check the user credentials and then tell the browser. If the login was successful send back "y", and if it failed "n".
<script type="text/javascript">
$(function() {
$("#login-form").submit(function() {
$('.fail').hide();
$.ajax({
url:"/login",
type: "post",
data: $(this).serialize(),
error:function(){
$('.fail').show();
},
success: function(data) {
if (data == "y") {
//Login was successful. Redirect statement here?
} else {
//Failed login message here
}
}
});
return false;
});
});
</script>
Edit
Try adding this in your success function. Please let me know what you get for a successful login and a failed login.
success: function(data) {
console.log(data);
}
Edit 2
This is because your ajax call is successful, just that the login failed. This is why your success handler is called.
To sort this you'll need to see what is being returned from the server, is it nothing? In which case try:
success: function(data) {
if (data == "") {
e.preventDefault();
} else {
//Login successful, redirect user.
}
}
You should add:
success: function(data){
/* Validation data here, if authentication answer is correct */
if(data == 'ok')
document.location = '/';
else
/* show error here */
}
the success occur when URL is found and accessible.
and error occur when URL is not found.
if you want check the callback MSG you must print it in the URL page & check data in success.
like this:
<script type="text/javascript">
$(function() {
$("#login-form").submit(function() {
$('.fail').hide();
$.ajax({
url:"/login",
type: "post",
data: $(this).serialize(),
success:function(data){
if(data=="true"){
alert("success");
}else{
alert("faild")
}
}
});
return false;
});
});
</script>
in login.php
<?php
//check if for true...
echo "true";
//and if it is not true...
echo "false";
?>
the data parameter in success is a string which get back the html content of "/login"
I want to make an ajax request and it wont work. This is my code:
function loadSingleProductPaso1(div_loading,div_id,index, json,ajaxurl){
$.ajax({
type: "POST",
url: ajaxurl, //the url is http://www.mysite.com/controller/function
data: "ajax=true&precio="+JSON.parse(json[index]).miprecio,
success: function(msg){
...
}
}
});
}
The thing is, when I add a '?' to the data element (data: "?ajax=true&..."), it works, but sends a $_POST['?ajax'] variable.
I really don't understand what am I doing wrong.
you can use post function,
like this,
$.post(ajaxurl, {
name : "Test",
city : "Istanbul"
}, function(data){
if(data == 1){
alert("success!");
}
});
function ajax(){
if($this->input->post('name') == "Test"){
echo 1;
}
}