We Keep Coding

JQuery / AJAX: On Input Field change, create php session, and refresh current page

I have two input fields. One is for show called business and the other is hidden called auto_search_id and goes to server. I have already created an autocomplete functionality. What I want to do is if the user starts typing and decides to click on an autocomplete list item which has already stored businesses, the page takes the id, sends it to update.php page to update the PHP Session id, and then refreshes the page with the current Session id.
Having problems figuring out the correct AJAX coding. My change function for the input field is not working. It pulls up the autocomplete, but when an auto complete list item is clicked, it doesn't send the id and refresh a page. I still new to JQuery/AJAX, but think I am missing something in the on #auto_search_id change function but not knowing what. Please Help...
Javascript / JQuery / Ajax
<script>
$(document).ready(function(){
$("#business").autocomplete({
minLength: 2,
source: function(request, response){
$.ajax({
type: "POST",
url: "/autocomplete-pq.php",
dataType: "json",
data:'keyword=' + request.term,
success: function(data){
response(data);
}
});
},
select: function(event, ui){
$("#business").val(ui.item.label);
$("#auto_search_id").val(ui.item.value);
return false;
}
});
$("#auto_search_id").change(function(){
$.ajax({
type:'POST',
url:"/update.php",
data: { varname: reponse},
success:function(response){
location.reload()
}
});
});
});
</script>
PHP
<?php
session_start();
$_SESSION["id"] = $_POST["varname"];
echo $_SESSION["id"];
?>
HTML
<input type="text" id="business" name="jurisdiction" value="<?php echo $juristiction ?>" required>
<input type="hidden" name="search" id="auto_search_id" />

I cannot reproduce the code but i see 2 things being wrong:
1 Calling $("#auto_search_id").val(ui.item.value); actually sets a new value of an input, however it does not trigger it's change event. You should trigger it like so:
$("#auto_search_id").val(ui.item.value).trigger("change");
2 You are trying to send a response (which is not available yet) to the server. A assume you want to send the hidden field value to the server.
$("#auto_search_id").change(function(){
var newID = $(this).val();
$.ajax({
type:'POST',
url:"/update.php",
data: {varname: newID},
success:function(response){
location.reload()
}
});
});

First you need the check if the change event is been called. Put an alert inside it. To maintain session, you need to pass it's id calling the parameter PHPSESSID, but it has some security implications, please read: http://php.net/manual/pt_BR/function.session-id.php

submitting form then showing loading image by javascript

I am submitting a form and loading loading gif in the same div by replacing html of form by html of loading image.
I am first submitting the form then loading gif, because I have to replace the content of div(in which form exist) with loading image.
Logs 1,2,3 are printing, loading image is showing but form is not submitting
Please help.
<script>
/* javascriptfunction */
Submit_and_loadimage() {
console.log("1");
document.getElementById("form_in_div").submit();
or
document.forms['form_name'].submit();
console.log("2");
document.getElementById("form_in_div").innerHTML ='LOADING_IMAGE-DIV';
console.log("3");
}

You won't be able to do this easily with plain javascript. When you post a form, the form inputs are sent to the server and your page is refreshed - the data is handled on the server side. That is, the submit() function doesn't actually return anything, it just sends the form data to the server.
If you really wanted to show this kind of working image Javascript (without the page refreshing), then you'll need to use AJAX, and when you start talking about using AJAX, you'll need to use a library. jQuery is by far the most popular, and my personal favourite. There's a great plugin for jQuery called Form which will do exactly what it sounds like you want.
Here's how you'd use jQuery and that plugin:
Show your image on form submit
$('#myForm')
.ajaxForm({
url : 'myscript.php', // or whatever
dataType : 'json',
success : function (response) {
// hide your image
}
})
;

Let suppose on button click you are calling ajax method
<button onclick="LoadData();"/>
before ajax call show image and onComplete ajax method hide
this image
function LoadData(){
$("#loading-image").show();
$.ajax({
url: yourURL,
cache: false,
success: function(html){
$("Your div id").append(html);
},
complete: function(){
$("#loading-image").hide();
}
});
}

you can submit your form using ajax so that page won't redirect.
put your loading '.gif' image somewhere in a hidden block
<div style="display:none" class="loading">
<img src="path/to/loading.gif" />
</div>
set the display of this div to inline-block when you click the submit button. Then make an ajax call. and hide this div again when yo get response from the server.
with jquery you can do it like
jQuery('#submitbtn').click(function(){
jQuery('.loading').show();
jQuery.post( "test.php", { name: "John", time: "2pm" })
.done(function( data ) {
alert( "Data Loaded: " + data );
jQuery('.loading').hide();
});
});

then try this Add div and make it hide by Default.
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> </div>
And in java script on page load show that div containg loading image
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>~

How to show a jquery dialogue box as alert on clicking a link from menu bar.

I have a menu bar which contains links for web pages. Now I want to add a login form with username and password with submit button in dilaogue box with locked screen on clicking of particular web pages. Its a kind of double login authentication.. As soon as log in submit button is clicked it should go to database to check the entered credentials and if it is correct will lead or show the clicked link..
To check the credentials I have made ajax call to server side code.. but I dont know how to add dialogue box and after success lead to required clicked page...
Here is my ajax call code..
$.ajax({
type: 'GET',
url: 'logincredit',
async:false,
dataType: "text",
success: function(data) {
}
});
Please guys help me ..
Thanks in advance..

You can add dialog script inside the success function.
like this
success: function(data){
if(data.d==true)
//show dialog code
else
//show something else
}

any way to stay in the same location when refreshed

i am working on jquery and javascript. and is there any way to make the page refresh and to restore the same link which is clicked. for example. in gmail.com when we open sent items which is in the lefthand side of the window and refresh the page. it get reloaded with the same sent items tab's contents, same things work for inbox and drafts when refreshed. is there anyother method or example to acheive this. if yes. please help. it would be appreciated.
here is my code to make the page refresh on refresh:
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>

Here is a sample ajax form submit script.
// this is the id of the submit button
$("#submit").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});

Presuming that you're using Ajax to change your page states, why not look at something like History.js?

Continue running script once jquery ajax call is successful

I have a click function that has a popup window that I need to open once the ajax call is successful. I have tried setting async: false. I tried putting the popup in the ajax call but that makes the popup blocked by the browser. And my last attempt was to set a timeout until the ajax call completes and each with no luck. Any suggestions???
var currentStatus = "false";
var success = "false";
function waitForSuccess(){
if (success == "false"){
var t = setTimeout("waitForSuccess()", 300);
}
else{
stopTimer(t);
return "true";
}
}
function stopTimer(t){
clearTimeout(t);
}
function checkReps(clicked){
$.ajax({
cache: false,
url: "chat_new_files/chat_new.php",
success: function(data){
success = "true";
}
});
$('#chatT').live('click', function (event) {
success = "false";
checkReps("true");
var changed = waitForSuccess();
if(changed == "true"){
BG.startChatWithIssueId('0', true); //THIS IS THE POPUP
}
});
I am thinking that my logic for this last attempt with the setTimeout is messed up. So any ideas on how to fix this or a brand new idea? Thanks!

Open the popup in the success: function for the ajax call. That is the only place that you both know that the ajax call has completely successfully and that you have access to the data that is returned from the ajax call.
Do not use timers to try to guess when the ajax function is done.

You are over-complicating things:
$('#chatT').live('click',function(){
$.ajax({
cache: false,
url: "chat_new_files/chat_new.php",
success: function(data){
BG.startChatWithIssueId('0', true);
}
});
});
As far as the browser popup blocker issue, a simple work-around is to create a div which acts as a popup container, like <div id="popup"></div>. Inside that div you can add an iframe with the url being the same of what your oldskool popup was. Initially, give that div the CSS #popup { display:none; position:relative; z-index:99999; /* etc...*/ } Then in your click event, you simply show() or fadeIn() that div.
Example, check out Colorbox - on the demo page, click the link that reads "Outside Webpage (Iframe)"

Use a callback that you can call in success of $.ajax(). Then open you popup window in the callback.
function checkReps(clicked){
$.ajax({
cache: false,
url: "chat_new_files/chat_new.php",
success: function(data){
success = "true";
openPopup();
}
});

Browsers tend to block popups that aren't originated from an event handler because those popups tend not to be user-initiated (duh). To get around this, you have 2 choices:
launch the popup immedately and have its content be filler, probably
including some sort of http://ajaxload.info spinner gif
avoid opening a new window, and instead put your content in a 'modal' div that you
show and hide as required.