I want simply to send an element via a event so that to catch it as a parameter in a servlet, but NOT from the regular Form's button.
I would appreciate a suggestion.
<script>
$(document).ready(function () {
$('#idSelect').change(function () {
$.post("SelectChange",$('#idSelect'), function () {
});
});
});
</script>
Like so, capture the value on change, then send it to the php file.
Access in the PHP with $_POST['select_data'];
$(document).ready(function () {
$('#idSelect').change(function () {
var select_value = $("#idSelect").val();
$.ajax({
type: "POST",
url: '/var/www/file-receiving-data.php',
data: ({ select_data: select_value}),
success: function(data) {
console.log("successfully sent to php file");
}
});
});
});
So, with the 1st answer (without which no chance to get it), til fix the other simpler permanently, the working solution is:
In servlet:
String val = request.getParameter("val");
In jsp, append the value to the url, as follows:
<script>
$(document).ready(function () {
$('#idSelect').change(function () {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "SelectChange?val="+$('#idSelect').val(), true);
xhttp.setRequestHeader("String", "application/x-www-form-urlencoded");
alert("send de POST: "+$('#idSelect').val());
xhttp.send();
});
});
</script>
Related
in my index page i sent a request ajax and response is a number.and i set the response to the value of input with hidden type
<input type="hidden" id="Status">
<script src="js/indexPhone.js"></script>
<script>
$(document).ready(function() {
$("#SendPhone").click(function(e) {
var phoneField = $("#PhoneField").val();
var phoneFieldString = "989" + phoneField.substring(0);
$.ajax({
type:'post',
url:'getSMS.php',
data:{'phoneFieldString':phoneFieldString},
success:(function (response) {
$("#Status").val(response);
})
})
});
});
</script>
and my problem is i want to get this value in another javascript page that i included in my index but it alerts empty. this my indexPhone.js:
$("#SendPhone").click(function() {
alert($("#Status").val());
});
Ajax request is asynchronous, so the second click runs before value is set.
Use events:
// index.html
$("#SendPhone").click(function (e) {
// ...
$.ajax({
// ...
success: (function (response) {
$("#Status").val(response);
$("#Status").trigger("gotSMS");
})
});
});
// indexPhone.js
$("#Status").on("gotSMS", function () {
alert($(this).val());
});
I want to increment count field in database when a link is clicked in php file.
So, I've added the following jquery part to my .php file. But still, it doesn't work. Please help!
<body>
click here
<script>
$(function ()
{
$('#click').click(function()
{
var request = $.ajax(
{
type: "POST",
url: "code.php"
});
});
}
</script>
</body>
code.php:
<?php
$conn=mysqli_connect("localhost","root","","sample");
mysqli_query($conn,"UPDATE e set count=(count+1) WHERE sid='1'");
mysqli_close($connection);
?>
You made a several mistakes in your code.
Update
You can send your SID input type text from ajax with data and you can get the value in your php file with the $sid = $_POST['sid'].
<body>
click here
<input type="text" value="" name="sid" id="sid">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(e){
$('#click').click(function(event)
{
var sidvalue = $("#sid").val(); /*from here you get value of your sid input box*/
event.preventDefault();
var request = $.ajax(
{
type: "POST",
url: "code.php",
data: 'sid='+sidvalue ,
success: function() {
window.location.href = 'https://www.google.com/';
}
});
});
});
</script>
After the ajax success response you can make redirect to your desire location.
Code.php
<?php
$conn=mysqli_connect("localhost","root","","sample");
$sid = $_POST['sid']; // use this variable at anywhere you want.
mysqli_query($conn,"UPDATE e set count=(count+1) WHERE sid='1'");
mysqli_close($conn);
?>
in code.php in mysqli_close you should use $conn not $connection.
Go with this code. It might help you. I have just tested all the things in localhost. This is working perfect.
use preventDefault() when click event is called.check jquery :
<body>
click here
<script>
$(function ()
{
$('#click').click(function(e)
{
e.preventDefault();
var request = $.ajax(
{
type: "POST",
url: "code.php"
});
});
}
</script>
</body>
Redirect your link on ajax success. Like this -
<body>
click here
<script>
$(function ()
{
$('#click').click(function()
{
var request = $.ajax(
{
type: "POST",
url: "code.php",
success: function(response){
window.location="http://www.google.com";
}
});
});
}
</script>
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);
});
I'm trying to POST a variable through a select box, which will submit the data through AJAX and then I need to be able to use that variable on the original page, which updates the SQL queries.
Here is the code I have got so far:
<script type="text/javascript">
function selectCategory() {
document.getElementById('categoryText').addEventListener("change", function() {
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","/category.php?category3="
+document.getElementById("categoryText").value, false);
xmlhttp.send(null);
});
}
</script>
and the AJAX (which I'm struggling with)
<?php
/*Retrieving the Value from the select box */
$categoryFilter = $_GET['category3'];
?>
When you say "select box" do you mean a select menu - ie: dropdown? If that is the case then generally you access the value of the selected element like this:-
var oSel=document.getElementById("categoryText");
var value=oSel.options[ oSel.options.selectedIndex ].value
<script type="text/javascript">
function selectCategory() {
var oSel=document.getElementById('categoryText')
oSel.addEventListener("change", function() {
var xmlhttp=new XMLHttpRequest();
xmlhttp.open( "GET", "/category.php?category3="+this.options[ this.options.selectedIndex ].value, false );
xmlhttp.send(null);
}.bind( oSel ) );
}
selectCategory.call( this );
</script>
Maybe:
data=[];
data.push({name: 'category3', value: checked/unchecked });
$('.submit').click(function() {
$.ajax({
type: 'POST',
url: 'your php page url',
data: formData,
success:function(data){
// successful request; do something with the data
alert(data);
},
error:function(){
// failed request; give feedback to user
alert("error");
}
});
});
and in PHP:
$categoryFilter = $POST['category3'];
Hi i am basically new to Ajax and having a tough time writing it..
I want to assign src value to Iframe which is fetched from the database
Table is HobbyMasters
HobbyName
HobbyUrl
I write a function and fetch the url from the table now when i click on Hobbyname which is displayed as link i want that url to be loaded inside the Iframe.
Initially i wrote a javascript:
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
$('iframe').attr('src', "Dancing");
});
}); </script>
But here the src is static and through javascript i am not able to assign fetched value from databse to src attribute
So thought of writing Ajax..
I have tried something but it is incomplete.Please Help me with this:
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
var filename = $(this).text();
var Hobbyurl = '#Url.Action("FetchUrlByHobbyName")';
$.ajax({
type: "POST",
url: Hobbyurl ,
data: { data: filename },
success: function (returndata) {
Here i want to assign the fetched src from function FetchUrlByHobbyName to Iframe src
$('iframe').attr('src', filename);
}
});
});
Function inside the Controller:
[HttpPost]
public ActionResult FetchUrlByHobbyName(string Hobbyurl)
{
HobbyMasters hobbymaster = new HobbyHomeService().FetchHobbyMasterByHobbyName(Hobbyurl);
string url=hobbymaster.InformationUrl;
if (HttpContext.Request.IsAjaxRequest())
return Json(new{src=url});
return View();
}
If #Url.Action("FetchUrlByHobbyName") returns the url of the hobby , you can do
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
var filename = $(this).text();
var Hobbyurl = '#Url.Action("FetchUrlByHobbyName")';
$.ajax({
type: "POST",
url: Hobbyurl ,
data: { data: filename },
success: function (returndata) {
Here i want to assign the fetched src from function FetchUrlByHobbyName to Iframe src
$('iframe').attr('src', returndata);
}
});
});
The best method would be to return the data associated with json and get the url from the json object
success: function (returndata) {
jsonObj = jQuery.parseJSON( returndata)
$('iframe').attr('src', jsonObj.url);
}