iam trying to show wait message while data is being fetched from database. iam using ajax to fetch the data. the message is already showing but it will disappear quickly. how can i increase the time gap for wait message ,that is the user can view the messge for atleast 4 seconds. Please helps...
<input onchange="mail()" class="span6 m-wrap" type="text" value="" name="mail_id" type="text" id="mail_id" placeholder="Type your mail" />
<div id="loader" style="display:none;">please wait</div>
function mail()
{
var Email=$('#mail_id').val();
$.ajax({
url: "<?echo base_url()?>mailsetr/mail_fetch",
dataType: "json",
type: "POST",
data: {Email:Email},
success: function (res) {
var status = res.user_status;
var name = res.user_name;
var id = res.user_id;
if(status == 1)
{
document.getElementById("name").value =name ;
document.getElementById("id").value =id ;
}
else
{
document.getElementById("name").value ='';
document.getElementById("id").value ='';
}
$('#loader').hide();
},
beforeSend: function ()
{
$('#loader').show();
}
});
}
In Success function use this
$("#loader").fadeOut("3000");
}, 3000);
remove this
beforeSend: function ()
{
$('#loader').show();
}
and paste $('#loader').show(); after $.ajax({
Related
I am using jQuery & ajax to save a entire form in session which is being generated.
when I press the search button the
onclick="updateContentdata();
is called. which is doing following.
function updateContentdata() {
var updateSearchContent = $('#savelistdata').html();
var rowNumb = rowCount;
var inFileds = JSON.stringify(field_options);
// var inputValue = $('inptval_' + rowCount).val();
$.ajax({
type: "POST",
url: "<?= $HOMEPAGE_ROOT; ?>/ajax_listuser.php",
data: {
rowNum: rowNumb,
field_options: inFileds,
html: updateSearchContent
},
success: function (data) {
$('#searchusers').submit();
},
error: function (req, status, error) {
console.log(error)
}
});
}
ajax_listuser.php
<?php
session_start();
if(isset($_POST['html']) && isset($_POST['rowNum'])){
$_SESSION['searchContent'] = $_POST['html'] ;
$_SESSION['rowNumber'] = $_POST['rowNum'] ;
$_SESSION['field_options'] = $_POST['field_options'];
}
?>
Form is being saved in the session but I want to keep form values in the session. but it only keeping the form.
So basically I need
<input class="form-control" type="text" id="inptval_2" name="search_input_value[]" value="71347">
instead of
<input class="form-control" type="text" id="inptval_2" name="search_input_value[]">
Create this function first:-
function getHtml(div){
div.find("input, select, textarea").each(function () {
var $this = $(this);
if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) {
if ($this.prop("checked")) {
$this.attr("checked", "checked");
}
} else {
if ($this.is("select")) {
$this.find(":selected").attr("selected", "selected");
} else {
$this.attr("value", $this.val());
}
}
});
return div.html();
}
and then modify your funciton:-
function updateContentdata() {
var updateSearchContent = getHtml($('#savelistdata'));
var rowNumb = rowCount;
var inFileds = JSON.stringify(field_options);
// var inputValue = $('inptval_' + rowCount).val();
$.ajax({
type: "POST",
url: "<?= $HOMEPAGE_ROOT; ?>/ajax_listuser.php",
data: {
rowNum: rowNumb,
field_options: inFileds,
html: updateSearchContent
},
success: function (data) {
$('#searchusers').submit();
},
error: function (req, status, error) {
console.log(error)
}
});
}
You will probably have to put those values back in the form, since the value="123" is not part of the html when someone fills the form. Iterate over the values you have and find the corresponding form-element, and set its value
What I'm trying to do is to edit mysql records using php. I've used Ajax/Json to edit a single record, but the problem is my codes isn't working. I tried to alert the value of input element after I clicked the save button and the alert output is verified. And also I don't get any message in console.
Here's what I got right now. Any help will appreciate.
Index.php
<div class="entry-form1">
<form action="" method="post">
<input type="text" name="id_edit" id="id_edit" class="inputs_edit">
<input type="text" name="approved_edit" id="approved_edit" class="inputs_edit">
<input type="submit" name="save_edit" id="save_edit" value="Save"/>
</form>
</div>
Search.php
$query1 = $mysqli->query(""); // not to include
while($r = $query1->fetch_assoc()){
<td><a href='#' name='".$r['id']."' id='".$r['pr_id']."' class='edits'>Edit</a></td>
}
<script>
$(document).ready(function(){
$(".edits").click(function(){
$(".entry-form1").fadeIn("fast");
//not to include some parts of codes
$.ajax({
type: "POST",
url: "auto-complete.php",
data :edit_post_value,
dataType:'json',
success:function(data){
var requested=data.requested;
var id=data.id;
//send to element ID
$('#id_edit').val(id);
$('#requested_edit').val(requested);
}
});
$("#save_edit").click(function () {
var two = $('#id_edit').val();
var five = $('#requested_edit').val();
alert(five);
$.ajax({
type: "POST",
url: "item_edit.php",
data: "id_edit="+two+"&requested_edit="+five,
dataType:'json',
success: function(data){
console.log(JSON.stringify(data))
if(data.success == "1"){
$(".entry-form1").fadeOut("fast");
//setTimeout(function(){ window.location.reload(); }, 1000);
}
}
});
});
});
</script>
Item_edit.php
<?php
$mysqli = new mysqli("localhost", "root", "", "app");
if(isset($_POST['id_edit'])) {
$id_edit= $_POST['id_edit'];
$requested_edit= $_POST['requested_edit'];
$sql = $mysqli->query("UPDATE pr_list SET requested='$requested_edit' WHERE id='$id_edit'");
if($sql){
echo json_encode(array( "success" => "1"));
}else{
echo json_encode(array("success" => "0"));
}
}
?>
1) First, you're not capturing the click event, because $("# save_edit") is within a function that is not being called. So, you're not even sending the form to the server.
2) Second, the way a form works by default send the data and then reload the page, you must call the preventDefault() function from the event object captured to prevent it, before making the ajax call.
try this:
$(document).ready(function(){
$("#save_edit").click(function (e) {
e.preventDefault(); //prevent a page reload
var two = $('#id_edit').val();
var five = $('#requested_edit').val();
alert(five);
$.ajax({
type: "POST",
url: "/item_edit.php",
data: "id_edit="+two+"&requested_edit="+five,
dataType:'json',
success: function(data){
console.log(JSON.stringify(data));
if(data.success == "1"){
$(".entry-form1").fadeOut("fast");
//setTimeout(function(){ window.location.reload(); }, 1000);
}
}
});
});
});
I am developing a small applicatopn using php with ajax to get place when user enter a pincode. Now I'm shore to my aim, but now I am getting some unwanted results but incluing the actual result.
This is my code...my html code is given below
<label for="pincode">Pin-Code:</label>
<input name="pincode" type="text" class="text" id="pincode" /><div id="section1"></div>
and my javascript code is
<script>
$(document).ready(function() {
$('#pincode').keyup(function() {
//ajax request
$.ajax({
url: "pincode_check.php",
data: {
'pincode' : $('#pincode').val()
},
dataType: 'json',
success: function(data) { <!--console.log(data.success);-->
if(data.success){
$.each(data.results[0].address_components, function(index, val){
console.log(index+"::"+val.long_name);
/*alert(index+"::"+val.long_name); */
$('#section1').append( val.long_name);
});
}
},
});
});
});
</script>
in pincode_check.php
<?php
$pincode=$_REQUEST['pincode'];
$geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$pincode.'&sensor=false');
$response= json_decode($geocode); //Store values in variable
$lat = $response->results[0]->geometry->location->lat; //Returns Latitude
$long = $response->results[0]->geometry->location->lng; // Returns Longitude
$geocode=file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?latlng='.$lat.','.$long.'&sensor=false');
$data= json_decode($geocode);
if($data==true)
{ // Check if address is available or not
$data->results[0]->formatted_address ;
$data->success=true;
echo json_encode($data);
}
else {
$data->success= false;
echo json_encode($data);
}
?>
When i enter a pincode , for eg: 690561
The output is
Les JumeauxCourzieuRhôneRhone-AlpesFrance6967015Heilige HuisjesZevenaarZevenaarGelderlandThe Netherlands6905 AAAnayadi Edakkad RdThottuvaPallickalKollamKeralaIndia690561Yitzhak Rabin HighwayIsraelYitzhak Rabin HighwayIsrael328BoulevardAndersonAnderson CountySouth CarolinaUnited States29621164Lenina avenueOrdzhonikidzevs'kyi districtZaporizhiaZaporiz'ka city councilZaporiz'ka oblastUkraine
But I need only AAAnayadi Edakkad . Please help me to filter out this output.
Kindly check this your pin code and press enter key
<script>
$(document).ready(function() {
$('#pincode').keyup(function (e) {
if (e.keyCode == 13) {
//ajax request
$.ajax({
url: "pin_request.php",
data: {
'pincode' : $('#pincode').val()
},
dataType: 'json',
success: function(data) { <!--console.log(data.success);-->
if(data.success){
//console.log(data.results[0].formatted_address.split(','))
var long_address=data.results[0].formatted_address.split(',');
console.log(long_address[0]);
$('#section1').append(long_address[0]);
}
}
});
}
});
});
</script>
I'm having a problem when I click my generate cards button multiple times(it generates a new set of cards randomly on every click) and then I click on any of my buttons that sort it will run multiple ajax calls instead of just the latest generated array. It will pass in every array of cards that has been generated not just the most recent one, sort of like it's keeping a queue.
console log will output, "sending color sort", "sending color sort", "sending color sort", etc. *For as many times as i've clicked my generate_cards* button
How can I have it so the sort function only runs once.
<input type="button" value="Generate Cards" id="generate_cards"> </input>
<input type="button" class="sorter" value="Color Sort" id="color_sort"> </input>
<input type="button" class="sorter" value="Shape Sort" id="shape_sort"> </input>
Generate Cards:
$('#generate_cards').click(function() {
$.ajax({
url: ''+set,
async: false,
type: 'POST',
dataType: 'html',
success: function(data) {
var obj = JSON.parse(data);
//sent array to sorting function :
sorting(obj);
var tmpl = $("#formInfo_tmpl").html();
var html = Mustache.to_html(tmpl, obj);
pool_window.html(html);
initilizejs();
},
error:function(jqXHR, textStatus, errorThrown){
alert("Error type" + textStatus + "occured, with value " + errorThrown);
}
});
card sort function
function sorting(cards) {
$('.sorter').on("click", function() {
var cards_window = $("#sealed_pool");
var sort_type = $(this).attr('id');
//just give me the first word:
sort_type = sort_type.replace(/(\w+).*/,"$1");
console.log('sending'+sort_type);
$.ajax({
url: '',
async: false,
type: 'POST',
data: ({'cards':cards, 'sort_type':sort_type}),
dataType: 'html',
success: function(data) {
var obj = JSON.parse(data);
if(sort_type =='color_sort')
{
var tmpl = $("#color_sort_tmpl").html();
}
if(sort_type =='shape_sort')
{
var tmpl = $("#formInfo_tmpl").html();
}
var html = Mustache.to_html(tmpl, obj);
cards_window.html(html);
initilizejs();
},
error:function(jqXHR, textStatus, errorThrown){
alert("Error type" + textStatus + "occured, with value " + errorThrown);
}
});
});
}
remove the previous click-listener before you add a new:
$('.sorter')
.off("click")
.on("click", function() {
//code
});
You need to use setInterval within the document ready function, like this:
$(document).ready(function() {setInterval(doAjax, 5000);});
I am trying to send text value using ckeditor. But i don't get any value from ckeditor. If i use HTML then i get the value. I don't know what i am doing wrong. Please can some one help me.
Here is my code :
<textarea class="ckeditor" id="text" name="text"><?php echo $article['text'];?></textarea>
<input id="articleSUBMIT" type="submit" value="submit" onClick="return articlePOST();"/>
Here is my ajax code:
function articlePOST(){
//Is the form valid?
if($("#article").valid()) {
var srt = $("#article").serialize();
$.ajax({
type: "POST", url: "ajax/article.php", data: srt,
beforeSend: function(){$("#loading").show("fast");},
complete: function(){$("#loading").hide("fast");},
success: function(html){$("#article").html(html);$('#uploader-container').html('');}
});
}
return false;
};
Use this to save the trigger for all of the editor instances in page:
function saveEditorTrigger()
{
for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();
}
Call this function before you submit. Like this:
function articlePOST(){
// Update editor
saveEditorTrigger();
//Is the form valid?
if($("#article").valid()) {
var srt = $("#article").serialize();
$.ajax({
type: "POST", url: "ajax/article.php", data: srt,
beforeSend: function(){$("#loading").show("fast");},
complete: function(){$("#loading").hide("fast");},
success: function(html){$("#article").html(html);$('#uploader-container').html('');}
});
}
return false;
};