AJAX call to run PHP script within JavaScript - javascript

I am trying to run a PHP script as soon as Submit button is clicked. I wanted to do an AJAX call as i dint want to refresh the page after the button is clicked. But the below code is not responding upon click.
I have saved the login.php in the same location as my project. Any help or input is appreciated!
<input type="button" class="button" value="submit" />
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({
type: "GET",
url: "C:\wamp\www\ElitePass\login.php"
})
alert("done successully")
});
});
</script>

The issue is that you are not targeting your button correctly.
$("button") this selector is looking for an element of type "button". Naturally there is none. To target elements by their class names, append dot to selector:
$(".button").click(....)
Having said that, your code will still not work as you expect it to. Browser security restrictions will prevent loading of files directly from your file system. You need to load stuff via web server. Especially PHP files.

You can call success like :
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({
type: "GET",
url: "C:\wamp\www\ElitePass\login.php",
success: function() {
alert("done successully");
}
})
});
});
</script>

Related

Pass data from one page to another using Javascript works but page doesn't load

I have a page where there's a table with a button and when I click the button I store the value in a JS variable in order to send it to another page using post.
I get the values on the other page but after that the page does not load.
this is the button code to send the variable:
<script>
function ObtenerDatosFila(oButton)
{
var dgvVerGrupos = document.getElementById('dtBasicExample');
$.ajax({
url: 'FormularioAMGrupo.php',
type: 'post',
data:
{
Modificar:'Modificar',
IDGrupo:dgvVerGrupos.rows[oButton.parentNode.parentNode.rowIndex].cells[0].innerHTML,
},
dataType: 'json',
success:function(){}
});
return false;
}
</script>
</script>
Is there another easier a way to do this other than using post method?
You could make a one page site, no need to send the data around.
You'll have to change your structure a bit and change your ajax functions to a generic 'ShowPage(id)' function to achieve this.
If you are interested and need any help just say so.
button's page:
<script>
function ObtenerDatosFila(oButton)
{
var dgvVerGrupos = document.getElementById('dtBasicExample');
localStorage.setItem("CodigoGrupo",dgvVerGrupos.rows[oButton.parentNode.parentNode.rowIndex].cells[0].innerHTML);
localStorage.setItem("Modificar",'Modificar');
location.href ="FormularioAMGrupo.php";
}
</script>
2nd page:
<script type="text/javascript">
window.onload = alert(localStorage.getItem("CodigoGrupo"));
</script>

jQuery sent URL request

In my page i want to send a jQuery request to another PHP script, without reloading the whole page.
When clicking a button, the request needs to be sent to another PHP script, through POST.
I just can't get it to work. My code so far:
Javascript:
<script>
$(function(){
$('#pause').on('click', function(e){
e.preventDefault(); // preventing default click action
$.ajax({
url: '/cura/includes/pause_agent.inc.php',
type: 'post',
data: $pausedata,
success: function(){
// ajax callback
}, error: function(){
alert('ajax failed');
},
})
})
})
</script>
PHP code of button & URL to be sent:
if($member['Paused']==0){
$pausedata = '?action=agentpause&agent='.$member['Location'].'&paused=true';
echo('<td><button id="pause" class="btn btn-warning btn-sm">Pause&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</button></td>');
}
else{
$pausedata = '?action=agentpause&agent='.$member['Location'].'&paused=false';
echo('<td><button id="pause" class="btn btn-success btn-sm">Unpause</button></td>');
}
Any suggestions/ideas?
There are a couple of things to note here, first of all you need to make sure your document is ready before doing your jQuery, to do this you can either put your script at the bottom of the page or put all of your script inside a
$(document).ready(function(e) {}
event.
To post data there is a shortcut which is
$.post("path/to/php/script.php",
{postVariableOne:valueOne, postVariableTwo:valueTwo,...},
function(data){
//callback function
});
Note valueOne and valueTwo are javascript variables
Then, in the PHP script, you would access the sent data like this
$_POST['postVariableOne'];//this equals valueOne

A javascript/jquery function to delete itself after execution

I am sending an ajax request to one of my controller to update the user interaction (which page he visits/likes) for an very insight analytics. I am storing these information in my mongo db.
All I want is, on success of this request, delete this script. But all the alert works, but the script never deletes. The following is my code
<div id="delete_this">
<script>
$(document).ready(function() {
$.ajax({
url: weblink+'user-interactions',
type: 'POST',
dataType: 'html',
data: {
//some post data
},
})
.done(function(html) {
alert("works");
var status = "executed";
alert("works here");
$("#delete_this").remove();
})
.fail(function(html) {
console.log("error");
});
});
</script>
</div>
WHAT I HAVE DONE TILL NOW:
1) tried with adding a div as the parent and pointing to delete that div as shown in script.
2) separated out the .remove() from the script into a new script tag and used something like this.
<script>
$(document).ready(function() {
$("#delete_this").remove();
});
</script>
tried to specify the parentnode and delete the child.
I failed in all three attempts. I am really stuck out here.
Any reasons why it is not working?
I also have another question relating to this.
This link says that the javascript stays in the session till the page is refreshed. So why are'nt we following a standard where we can execute the scripts and delete them
By doing so, we will be able to achieve building a bit more secured webpages. Is'nt it?
You could use plain Javascript to do this (not tested this)
var domNode = document.getElementById('delete_this');
var nodeParent = domNode.parentNode;
nodeParent.removeChild(domNode);
Not sure this is ideal but it should remove it completely from the DOM.
This works :
<button>remove</button>
<script id="test">
$( "button" ).click(function() {
$( "#test" ).remove();
alert("removed " + ($( "#test" ).length == 0));
});
</script>
try it here: http://jsfiddle.net/4ungb/
So either you have a) other errors that prevent that script to complete or b)
your criteria for testing deletion is not correct.

One code to turn all forms into AJAX forms?

So I use the following code to manipulate my 'login' form so that it submits it, to the url of action="" and the data responded goes into id specified by target="". The submit method is specified by method=""
I like this. It's neat. But I was wondering if there was a way of having a script that meant that all forms were submitted through Jquery, without having to re-write this code for every form every time. That's just messy.
Much appreciated!
<script type="text/javascript">
$(document).ready(function(){
$("#login").submit(function(){
var thistarget = this.target;
$(thistarget).html('Submitting...');
jQuery.ajax({
data: $(this).serialize(),
url: this.action,
type: this.method,
error: function() {
$(thistarget).html("Form failed to submit");
},
success: function(results) {
$(thistarget).html(results);
}
})
return false;
}
);
});
</script>
Sure, just replace "#login" with "form". It will then affect all forms that currently exist on the page (but not future forms).
$("#login").submit(function(){...
For future forms AND current forms, you would need event delegation.
$(document).on("submit","form",function(){...
If I were you I'd use the $.post method of Jquery. http://api.jquery.com/jQuery.post/
But answering your question and as Kevin B said: change #login by form

Display image while running POST

I have this code that I use to POST without reloading the page, but I wonder how I can add that in the script being executed display an image. example loader.gif
Thanks for your help.
<script language="javascript" src="jquery-1.6.4.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form, #fat, #form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
Not sure if I understand, but it seems you're quite near to it
// #loading could be an img tag pointing to loader.gif or a div containing the img
$('#loading').ajaxStart(function() {
$(this).show();
$('#result').hide();
}).ajaxStop(function() {
$(this).hide();
$('#result').fadeIn('slow');
});
Use JQuery to add the image to the page. Generally this is added close by the button the user clicks to start the AJAX request. This allows the user to see that something is happening in the background while your scripts run.
Alternatively, since your script is being run on document.ready, you could have the image from the get-go and then remove it once the ajax call completes.
put the loader in a hidden div (display:none) you can then use
$('#div').show();
before the ajax request and then hide it again in the success callback:
$('#div').hide();
at the first line of submit function:
$('#loadingImg').show();
and at the first line of callback success function:
$('#loadingImg').hide();

Categories

Resources