I want a simple button that when I click, it shows the content from a file file.php ( this file when triggered it shows a random number) and if it's clicked several times refreshes the content from file.php.
You can try something like this:
PHP File: file.php
<?php
//your php code for random number...
?>
HTML File:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="button" id="clkMe" value="Load File" />
<div id="response"></div>
<script>
$(document).ready(function(){
$("#clkMe").click(function(){
var dataString={};
$.ajax({
url:"file.php",
type: 'POST',
cache:false,
data: dataString,
beforeSend: function() {},
timeout:10000,
error: function() { },
success: function(response) {
$("#response").html(response);
alert(response);
}
});
});
});
</script>
</body>
</html>
I hope this is what you are asking.
Happy Coding!!!
Related
is there any way to call a controller function when someone click on a check box. Like There are 4 check box with each has a category so when a user click on particular category then it will hit an API that process the filter request from the backend. I searched on Google but there is option to change it to
But that I don't want. Do I have to use jquery or else?
As in the comment section you can achive this via JQuery/Javascript. I have added a simple example with JQuery for your reference. What I achive here is first catch all check un check events and then via Ajax I send a request to the server. So that controller function will get called. You can test this via network tab when you check or uncheck a checkbox.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Check the Status of Checkboxes</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
//Add CSRF token to headers
$.ajaxSetup({
headers:
{ 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});
$('input[type="checkbox"]').click(function(){
const val = $(this).val()
if($(this).prop("checked") == true){
alert(val+' Checked and sending data to server')
$.ajax({
type: "POST",
url: "file", // Route
data: { checkbox_val:val }
})
.done(function( msg ) {
alert( "Data: " + msg );
});
}else{
alert($(this).val()+' unchecked');
$.ajax({
type: "POST",
url: "file",
data: { checkbox_val:val }
})
.done(function( msg ) {
alert( 'Record removed' );
});
}
});
});
</script>
</head>
<body>
<input value="A" type="checkbox"> A
<input value="B" type="checkbox"> B
<input value="C" type="checkbox"> C
</body>
</html>
When I try the ajax in same page to html it works. Like this;
<html>
<head>
...
</head>
<body>
....
<script>
$.ajax({
url: /test/,
method: 'POST',
headers: {'X-CSRFToken': '{{ csrf_token }}'},
data: { name: a, surname: b},
dataType: 'json',
success: function (data) {
getList(data);
}
});
</script>
</body>
</html>
When I try the call same javascript as external. It doesn't work. Why?
<html>
<head>
...
</head>
<body>
....
<script src="{% static 'js/test.js' %}"></script>
</body>
</html>
Define the {{ csrf_token }} as a global variable in your HTML page in script tag as a global variable as such:-
var generated_csrf_token = "{{ csrf_token }}";
And then in your .js file call it,
headers: {'X-CSRFToken': generated_csrf_token},
But make sure you put AJAX call within the document ready func in $(document).ready(function () {***here***}
This way you can access it with name generated_csrf_token in any js file.
Hope this helps :-)
Here is my json file(list.js)
{
"loginid":"Wafiqa",
"password":"123"
}
Here is my html file(ajaxTest.html)
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<body>
<p>Username:</p>
<div id="uname"></div>
<p>Password:</p>
<div id="pword"></div>
<script>
$.ajax({
type:"GET",
datatype:"json",
async:false,
url:'ref/list.js',
success:function(data){
alert(data.loginid);
},
error:function(jqXHR,textStatus){
errorHandling(textStatus);
}
});
</script>
</body>
</html>
What I want to do is. I want to display the user id and password from the json file in div id="uname" and div id="pword". How can I do that?
success:function(data){
var jsonObj = JSON.parse(data);
$('div#uname').text(jsonObj.loginid);
$('div#pword').text(jsonObj.password);
},
For all beginners, here are the answer for your reference
Username:
Password:
<script>
$.ajax({
type:"GET",
datatype:"json",
async:false,
url:'ref/list.json',
success:function(data){
alert("Welcome "+data.password+data.loginid);
console.log(data.password);
$('#uname').html(data.loginid);
$('#pword').html(data.password);
}
});
</script>
</body>
</html>
I have problem about autocomplete with ajax.
I take datas from my java class to ajax jsp file.
But i cant append it to my listing area.
index.jsp
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#keyWord2").keyup(function(){
if($(this).val().length>4){
fill_data($(this).val());
}//endif
if($(this).val().length<4){
$("#show").html("");
$("#show").css("display","none");
}//endif
});//end keyup function
});//end document ready function
function fill_data(aranan){
$.ajax({
type: "POST",
url: "ajaxSearch.jsp",
data:"name="+encodeURIComponent(aranan),
dataType: "json",
success: function(){
alert("success");
$("#show").css("display","block");
$("#show").html("");
$.each(data, function(i, item) {
$("#show").append("<div >"+item.clientNumber+"</div>");
});//end each function
}//end success function
});//end ajax
}//end fill_data
</script>
</head>
<body>
<div>
<input type="text" id="keyWord2" autocomplete="off" maxlength="50"/>
<div style=" display: none; " id="show"></div>
</div>
</body>
i call my datas from ajaxSearch.jsp and it returns me the list.But function doesnt come to success it doesnt show my element whose id is "show" and doesnt alert success.
Dynamic data is not appearing in the list. Data is fetched dynamically in jsonp format. When checked in Chrome developer tools i am able to see the response. Please find the code below. Can someone help me here ?
<!DOCTYPE html>
<html>
<head>
<title>Pull to refresh</title>
<script src="../../lib/jquery.min.js"></script>
<script src="../../lib/kendo.mobile.min.js"></script>
<link href="../../lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="../../lib/styles/kendo.common.min.css" rel="stylesheet" />
<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul id="pull-to-refresh-listview"></ul>
</div>
<script id="pull-to-refresh-template" type="text/x-kendo-template">
#= Title #
</script>
<script>
function mobileListViewPullToRefresh() {
var dataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 1,
transport: {
read: {
url: "http://localhost/MvcMovieApp/Mobile/RestResponse", // the remove service url
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
alert(kendo.stringify(options));
return {
q: "javascript",
page: options.page,
rpp: options.pageSize
since_id: options.since_id //additional parameters sent to the remote service
};
}
},
schema: {
data: "movies" // the data which the data source will be bound to is in the "results" field
}
});
alert("Before kendoMobileListView");
$("#pull-to-refresh-listview").kendoMobileListView({
dataSource: dataSource ,
pullToRefresh: function(){ alert("dataSource"); return true },
appendOnRefresh: true,
template: $("#pull-to-refresh-template").text(),
endlessScroll: true,
pullParameters: function(item) {
return {
since_id: item.id_str,
page: 1
};
}
});
}
</script>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
JSONP which i am receiving is :
({"movies":[{"ID":1,"Title":"Movie 1","ReleaseDate":"/Date(1355250600000)/","Genre":"Comedy","Price":10},{"ID":2,"Title":"Movie 2","ReleaseDate":"/Date(1355250600000)/","Genre":"Thriller","Price":10}]})
There must be a call back function name in the returned JSONP. The output I see here doesn't have any function name. You need to make changes to your server side code.