jQuery Ajax File fetching issue - javascript

I am trying to fetch the files contents using ajax but it is not working ? I dont know why, even though I have written the same code written on w3schools.com examples.
$().ready(function(){
$("button").click(function(){
$.ajax({url:"Sample.txt",
success:function(result)
{
alert(result);
//$("#changedText").text(result);
}
});
});
});

You replace your code with this code....
$(function(){
$("#btn_id").click(function(){
$.ajax({
url:"your_url.php",
type: "GET",
success: function(rt) {
alert(rt);
}
});
});
});

Related

How to change page in blade for JavaScript (Laravel)

This api is api.php.
My web and api are in the one project.
I want to change page in jquery request success result.
But I don't know what to do.
Could you do me a really big favour?
Code in the here :
<pre>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".btn-primary").click(function(e){
e.preventDefault();
var account = $("input[name=account]").val();
var password = $("input[name=password]").val();
$.ajax({
type:'POST',
headers:{
Key: "xxx",
Version:"1.0.0",
},
url:'http://127.0.0.1:8000/api/Login',
data:{account:account, password:password},
success:function(data){
//I want to change page.
}
});
});
</script>
<code>
you can try to do like this
success:function(data){
$("html").html(data);
}
or
success:function(data){
$("body").html(data);
}
but i'm sure that javascript from those pages will not work so you will fetch only html
edit: also this will actually not change your page it will fetch html from ajax request and replace your current content with it
to make actual rederict you should use window.location.replace("https://faksesite.com/xxx.blade.php");

Set interval to ajax form

So I'm trying to send the form info to php with ajax form every second, but for some reason it doesn't want to.
Here is my latest attempt, I tried every other similar combination(like put everything in the function or just put everything into the setInterval).
$(document).ready(function() {
var ajaxCall=function() {
$("#myForm").ajaxForm(function(e) {
$.ajax({
type:'post',
url:'php1.php',
data:$("#myForm").serialize(),
success:function(data) {
document.getElementById("result").innerHTML=data;
}
});
});
}
setInterval(ajaxCall,1000);
});
EDIT
Solved with M.M answer, thank you for the help!
Simply change ajaxForm to ajaxSubmit
See this (question) and this (documentation) for more information on AjaxForm vs AjaxSubmit
Essentially AjaxForm submits when the user clicks the button and AjaxSubmit does it immediately so your code should be:
$(document).ready(function()
{
var ajaxCall=function()
{
$("#myForm").ajaxSubmit(function(e)
{
$.ajax(
{
type:'post',
url:'php1.php',
data:$("#myForm").serialize(),
success:function(data)
{
document.getElementById("result").innerHTML=data;
}
});
});
}
setInterval(ajaxCall,1000);
});
Update after comment explanation
$(document).ready(function(){
//live feed
var ajaxCall=function(){
$("#myForm").ajaxSubmit(function(e){
ajax_submit();
});
}
setInterval(ajaxCall,1000);
//real submit
$("#myForm").ajaxForm(function(e){
ajax_submit();
});
function ajax_submit(){//ajax_code
$.ajax({
type:'post',
url:'php1.php',
data:$("#myForm").serialize(),
success:function(data) {
document.getElementById("result").innerHTML=data;
}
});
}
});
If you wish to differentiate the feed from the submit you can pass a parameter to the ajax_submit function
Getting rid of the ajaxForm() call seems to accomplish what you are trying to do:
$(document).ready(function() {
var ajaxCall = function() {
$.ajax({
type: 'post',
url: 'php1.php',
data: $("#myForm").serialize(),
success: function(data) {
document.getElementById("result").innerHTML = data;
}
});
}
setInterval(ajaxCall, 1000);
});

Get done a php file with a simple click with jquery

I am Totally Newbie, i just want a very very simple example for my question.
Think i have this piece of PHP code :
<?php
echo "Test";
?>
And a piece of jquery like this :
$(document).ready(function() {
$('.div').click(function(){
$('.loading').show();
// DO PHP NOW
$('.loading').hide();
});
});
And HTML :
<div class="div">Click here</div>
I want a simple code , to connect Jquery to PHP file.
When the .div clicked, then php code get happen with No refreshing the page. Just this.
How should i do this ?
(i need a simple way to ajaxify a PHP !)
+ If i want to do Ajax, i have to write code for every every PHP code i write or one piece of Ajax code for ALL PHP codes ?
thanks
If you want to display some value from php in your div use $(".div").load("/url/to/your/php");
Or use
$.post("url/to/php",{val:val,val:val},function(callback){
alert("callback");
$(".div").html(callback);
}
Or AJAX
$.ajax({
url: "/php/code/sd.php",
type: "POST",
date: {
username: "asdasd",
password: "asdasd"
},
success: function(callback){
$(".div").html(callback);
}
});
$(function() {
$('.div').click(function(){
var $this = $(this);
$('.loading').fadeIn(200);
$.ajax({
url: 'url_to_your_file.php',
type: 'GET',
data: {},
success: function(data) {
//do smthing OR
$(data).insertAfter($this);
},
error: function(e) {
//do smthing when error
alert('Error happen!');
console.log(e);
},
complete: function(data) {
$('.loading').fadeOut(200);
}
});
});
});

getjson query is not working

Json page is : http://freegeoip.net/json/59.92.78.49
and my code is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("http://localhost/02/t.php",function(result){
alert(result.ip);
});
});
});
</script>
this simple code is not working :(
Seem like freegeoip.net support jsonp,you can do:
$('button').click(function () {
$.ajax({
url: "http://freegeoip.net/json/59.92.78.49",
dataType: "jsonp",
success: function (result) {
alert(result.ip); // server response
}
});
});
Fiddle Demo

Refresh a table

I have read posts about this but I can't get the right answer.
I have tried Hide and Show to refresh a table:
$("#cmdUnreadID").click(function(){
$.ajax({
type: "GET",
url:"orderBy.php",
data: "unreadCtrl=1",
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").show();
});
}
});
});
this does not work for me. I tried other animations as well but nothing works. I think im missing something or I'm using the wrong way.
Any Suggestion how to Refresh the table only?
Where are you loading the result data to the UI. Probably you need to set the result to any of the element. use the html method to do that
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").html(result).show();
});
}
I think you want to change/update the content of the #tableInbox and to do that you can try this:
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").html(result).show();
});
}
Populate the table with the AJAX content
$("#cmdUnreadID").click(function(){
$.ajax({
type: "GET",
url:"orderBy.php",
data: "unreadCtrl=1",
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").html(result).show(); // <-- Notice html() call here, to populate the table
});
}
});
});
$("#cmdUnreadID").live('click', function () {
$("#tableInbox").hide(500);
$.ajax({
type: "GET",
url: "orderBy.php",
data: "unreadCtrl=1",
success: function (result) {
$("#tableInbox").html(result).show();
//Or
// $("#tableInbox").replaceWith(result).show();
}
});
});
i cant see on your code something that really changes the table,
you gota change the tables .htm() and feed the result like
$("#tableInbox").html(result)
note: you can also set dataType: to "html" or "xml" in your request, because if you receiving XML the result wont be suitable for direct feed to the table .html. jquery will do an inteligent guess from the datatype in servers response, but still it can be XML

Categories