hello I have the following code that tries to show the field "name" in the div "target2", but for this I use a form within another form I think is the problem. But I don't see a way to fix it.
index.php
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<form method="post" id="fuera">
<div id="target1">
</div>
<button type='button' id="botonFuera">EnviarElDeFuera</button>
</form>
<div id="target2">
</div>
</body>
</html>
otro.php
<form method="post" id="dentro">
<input type='hidden' id='nombre' name='nombre' value='hola'>
<button type='button' id="botonDentro">EnviarElDeDentro</button>
</form>
otroMas.php
<?php
echo($_POST["nombre"]);
?>
ajax.js
(document).on('ready',function(){
$('#botonFuera').click(function(){
var url = "otro.php";
$.ajax({
type: "POST",
url: url,
data: $('#fuera').serialize(),
success: function(data)
{
$('#target1').html(data);
}
});
});
$(document).on('click',':button', function (evt) {
if(this.id=='botonDentro')
{
var url = "otroMas.php";
$.ajax({
type: "POST",
url: url,
data: $('#dentro').serialize(),
success: function(data)
{
$('#target2').html(data);
}
});
}
});
});
Related
I am trying to understand how to use JQuery File Upload by blueimp. This is my test view with an Input from type file, a progress bar and a submit button. If I am selecting an Image in the Input, the value changes to undefined. What have I to do Upload this Image (and show the progression of the upload)?
HTML with JQuery:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div>
<input type="file" accept="image/png, image/jpeg">
</div>
<div>
<progress id="progress" value="0" max="100"></progress>
</div>
<div>
<input type="submit">
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="{% static 'blueimp/vendor/jquery.ui.widget.js' %}"></script>
<script src="{% static 'blueimp/jquery.fileupload.js' %}"></script>
<script src="{% static 'blueimp/jquery.iframe-transport.js' %}"></script>
<script type="text/javascript">
$('#form').fileupload({
url: '{% url 'upload' %}',
sequentialUploads: true,
dataType: 'json',
type: 'POST',
add: function (data) {
console.log(data, data.result);
},
progress: function (data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress').val(progress);
if (progress === 50) {
console.log('We made it half way...');
} else if (progress === 100) {
console.log('We made it...');
} else {
console.log(progress + '%');
}
},
done: function(data) {
console.log(data.result.name);
},
fail: function () {
console.log('Failed')
}
});
</script>
</body>
</html>
My Views:
def image_upload(request):
return render(request, 'test/image_upload.html')
def upload(request):
print('Files:', request.FILES)
return HttpResponse(request.FILES)
I am getting an error that shows my function "loaddata" is not defined. However, I have placed the script at the top of the page with no success. Any ideas why this is happening?
Thank you!
<script type="text/javascript">
function loaddata(){
var sid = document.getElementById("student_id");
if(sid) {
$.ajax({
type: 'post',
url: 'search.php',
data: {
student_id:sid,
},
success: function (response) {
// We get the element having id of display_info and put the response inside it
$( '#display_info' ).html(response);
}
});
}
else
{
$( '#display_info' ).html("Please Enter Some Words");
}
}
</script>
</head>
<body>
<div class="content">
<H2>Lookup Member</H2>
<input type="text" name="student_id" id="student_id" onkeyup="loaddata();">
</div>
</body>
Work for me in a single html file.
I comment your jquery code just for test.
<head>
<script type="text/javascript">
function loaddata() {
var sid = document.getElementById("student_id");
if (sid) {
// $.ajax({
// type: 'post',
// url: 'search.php',
// data: {
// student_id: sid,
// },
// success: function(response) {
// // We get the element having id of display_info and put the response inside it
// $('#display_info').html(response);
// }
// });
} else {
$('#display_info').html("Please Enter Some Words");
}
}
</script>
</head>
<body>
<div class="content">
<H2>Lookup Member</H2>
<input type="text" name="student_id" id="student_id" onkeyup="loaddata();">
</div>
</body>
I have an html page where I am trying to link an input box to an ajax autocomplete function. The problem is the function is not being called, for either success or failure.
If I change 'autocomplete' to 'keypress' it gets called, but it's not what I'm looking for.
Here is the page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="~/Scripts/jquery-ui.css">
<script>
$(document).ready(function () {
$("#search-box").autocomplete(function () {
$.ajax({
type: "POST",
url: "http://localhost:52139/odata/WEB_V_CIVIC_ADDRESS?",
data: { enteredText: +$(this).val() },
dataType: 'json',
ContentType: "application/json, charset=UTF-8",
success: function (data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background", "#FFF");
},
error: function (data, xml, errorThrown)
{
alert("here: " + errorThrown);
}
});
});
});
//To select country name
function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
</head>
<body>
<div class="frmSearch">
<input type="text" id="search-box" placeholder="Country Name"
autocomplete="on"/>
<div id="suggesstion-box"></div>
</div>
</body>
</html>
So like I said, the ajax function never fires. If I use 'keypress' it does, but I need it to fire for autocomplete.
Any ideas?
Thanks.
Looks like jquery-ui wasn't being loaded properly. Thanks j08691 for the tip.
lam trying to save replycomments to the database
here is my html form,
<div id="replyform" class="card my-4 d-none">
<h5 class="card-header">Cevap Yaz:</h5>
<div class="card-body">
<form>
<div class="form-group">
<textarea id="replytext" name="replytext" typeof="text" class="form-control" rows="3"></textarea>
</div>
<button type="submit" id="sendreply" name="sendreply" class="btn btn-primary">Cevap Yaz</button>
</form>
</div>
</div>
and here is my homecontroller action code
public JsonResult ReplyComment(string replycomment, int articleid,int commentid)
{
var UserId = Session["UserId"];
if (replycomment == null)
{
return Json(true, JsonRequestBehavior.AllowGet);
}
db.ReplyComments.Add(new ReplyComment
{ UserId = Convert.ToInt32(UserId), ArticleId = articleid, CommentId=commentid, Paragraph = replycomment, Date = DateTime.Now });
db.SaveChanges();
return Json(false, JsonRequestBehavior.AllowGet);
}
and my ajax code is here
<script type="text/javascript">
$(document).ready(function () {
$("#sendreply").click(function () {
var r_comment = $("#replytext").val();
var r_commentid = $(".astar").val();
$.ajax({
cache: false,
url: '#Url.Action("ReplyComment","Home")',
contentType: "application/json; charset=utf-8",
data: { replycomment: r_comment, articleid:#Model.ArticleId, commentid: r_commentid },
type: 'POST',
dataType: 'json',
success: function (data) {
alert("İşlemOkey");
}
});
});
})
l cant call the Replycomment action with this code
I have tested this code and it will work for you. since am posting via ajax, i have removed the form tags from the body of the html.
For backend(php), I just test it by sending variables r_comment and r_commentid and it works fine. it should work with your backend code now. Give me a shout if it works for you...........
<html>
<head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sendreply").click(function () {
var r_comment = $("#replytext").val();
var r_commentid = $(".astar").val();
var articleid = '20';
/* lets test with data
var r_comment ='my comment';
var r_commentid = '20';
*/
$('#loader').fadeIn(400).html('Data is being processed');
// assuming that you want query result by posting a variable
var datasend = "r_comment="+ r_comment + "&r_commentid=" + r_commentid + "&articleid=" + articleid;
$.ajax({
type:'POST',
url:'smoke1.php',
data:datasend,
crossDomain: true,
cache:false,
success:function(msg){
//display image loader or text to alert the use that content is being processed
$('#loader').hide();
// and display result
alert("İşlemOkey");
$('#result').fadeIn('slow').prepend(msg);
}
});
})
});
</script>
<div id="replyform" class="card my-4 d-none">
<h5 class="card-header">Cevap Yaz:</h5>
<div class="card-body">
<div class="form-group">
replytext: <textarea id="replytext" name="replytext" class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
astar: <input type="text" class="astar">
</div>
<div id="loader"></div>
<div id="result"></div>
<br>
<button type="submit" id="sendreply" name="sendreply" class="btn btn-primary">Cevap Yaz</button>
</div>
</div>
</body></html>
my testing backend in php(Try it with yoour backend code)
smoke1.php
<?php
echo "ok";
echo $_POST['r_comment'];
echo $_POST['r_commentid'];
echo $_POST['articleid'];
?>
I'm doing assignment, and essentially what I would like to do it have an autocomplete on the input box so the user can select a 'Starter' and 'Main' from a JSON file. When inputting characters, a dropdown list is displayed, but it is not populated with values.
The JSON file (spanish.php) is:
([{"course":"starter","name":"Chorizo Sausage Rolls","price":"5.99"},{"course":"starter","name":"Sardines in Lemon Sauce","price":"6.99"},{"course":"starter","name":"Spanish Tortilla","price":"5.99"},{"course":"starter","name":"Escabeche","price":"4.99"},{"course":"main","name":"Seafood Paella","price":"13.99"},{"course":"main","name":"Albondigas Soup","price":"9.99"},{"course":"main","name":"Linguine with Mussels","price":"13.99"},{"course":"main","name":"Spanish Rice with Shrimp","price":"11.99"},{"course":"main","name":"Roasted Red Pepper Salad","price":"8.99"},{"course":"main","name":"Chorizo Fritatta","price":"10.99"},{"course":"main","name":"Lamb Meatballs","price":"12.99"}]);
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
$( "#starter" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
dataType: "jsonp",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 2,
} );
} );
</script>
And the HTML:
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter"><br>
<label for="main">Choose main</label>
<input type="text" name="main" id="main"><br>
As I said, the list is returning nothing when 2+ digits are entered. Do I need to ask for it just starters? Am I goin about this correctly? I will be asking the user to choose a starter and main, then submitting the form.
Thanks.
I'm giving here a solution for auto-completing the starter menu. Hope that you can do the same for main menu searching. Or comment in this answer, if you're facing any problem implementing this.
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var starterSearchData;
$(function() {
$.ajax({
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
dataType: "jsonp",
async: false,
success: function(data) {
starterSearchData = $.map(data, function(item) {
if (item.course == "starter")
return item.name;
});
EnableAutoComplete();
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
function EnableAutoComplete() {
$("#starter").autocomplete({
source: starterSearchData,
minLength: 2,
delay: 100
});
}
});
</script>
</head>
<body>
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter">
</body>
</html>