On my web page I have links for downloading mp3 files.
Upon user click, I make an ajax call and create an mp3 file on the server.
I return the path of the file to the script but now, how do I make it download the user system?
<SCRIPT TYPE="text/javascript">
function voice(id){
$.ajax({
url:'/download/',
type:"POST",
data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
success:function(return_data) {
alert(return_data['url']);
},
error: function(){
alert("Some Error");
}
});
}
</SCRIPT>
I get the url of the mp3 file in alert but how to download it ?
Thank you.
Create an anchortag in your HTML which is hidden using CSS
Hidden
And in your javascript
<SCRIPT TYPE="text/javascript">
function voice(id){
$.ajax({
url:'/download/',
type:"POST",
data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
success:function(return_data) {
var url= return_data['url'];
$('.hiddenUrl').attr('href',url) //adding value to the href attribute
$('.hiddenUrl').attr('download','any_filename.mp3');
$('.hiddenUrl')[0].click();
},
error: function(){
alert("Some Error");
}
});
}
</SCRIPT>
You can do window.location = return_data['url']; assuming that you have an url which starts with http... This approach is equivalent of the user clicking the link to the mp3. Another approach would be to create an iframe with src set to the newly created link. Using this method the user's browser will prompt to download the file without having to change the location (navigating away from the current page). I recommend the first approach.
This should work:
<SCRIPT TYPE="text/javascript">
function voice(id){
$.ajax({
url:'/download/',
type:"POST",
data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
success:function(return_data) {
window.location.href = return_data['url'];
},
error: function(){
alert("Some Error");
}
});
}
</SCRIPT>
I think this will work
<SCRIPT TYPE="text/javascript">
function voice(id){
$.ajax({
url:'/download/',
type:"POST",
data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
success:function(return_data) {
var url= return_data['url'];
window.location.assign(url);
},
error: function(){
alert("Some Error");
}
});
}
</SCRIPT>
Related
I want to use $.ajax to get any picture from a URL and show it on the page.
It should happen when button is clicked.
$(document).ready( function() {
$("button").click(function(){
$.ajax({url: "index.html", success: function(result){
$("#image").attr("src","test.png");
}});
});
});
HTML Code:
<button type = "button">Click Me</button>
<div>
<img id = "image" src = ""/>
</div>
Edit:
The errors is,
Use a server and serve your file over the http protocol
This works fine. But still I need to use a localserver to run this without the console error mentioned in edit.
$(document).ready( function() {
$("button").click(function(){
var url = 'test.png';
$.ajax({
url : url,
cache: true,
processData : false,
}).always(function(){
$("#image").attr("src", url);
});
});
});
I have a page that locates a link inside it and when that link is clicked it should save some data in database.
Besides, I have a file named "add.php" that communicates with the DB and operates well.
In my wordpress page I have added below codes for accessing the add.php file and send some parameters to it.
<a href="javascript:add(true);" >Click Me</a>
<script type="text/javascript">
function add(b){
$(document).ready(function(){
var result = $.ajax({
type: "POST",
url: "add.php",
data: { add: b }
});
result.done(function(msg) {
alert(msg);
});
result.fail(function(jqXHR, textStatus) {
alert( "No such data exists: " + textStatus );
});
});
}
</script>
I had this exact code in an html file and it worked smoothly. but it doesn't work on wordpress page like that.
Plus, the problem is that when I click the link -Click Me- it doesn't do anything.
please tell me where the problem is and how to solve it ?
I would recommend you to use this:
<a href="#" data-add="true" class='hitClick'>Click Me</a>
<!--use data* attributes to pass specific data -->
now in your function:
function add() {
event.preventDefault(); //<------make sure to add it.
var result = jQuery.ajax({
type: "POST",
url: "add.php",
data: {
add: jQuery(this).data('add')
}
});
result.done(function(msg) {
alert(msg);
});
result.fail(function(jqXHR, textStatus) {
alert("No such data exists: " + textStatus);
});
}
jQuery(document).ready(function(){
jQuery('.hitClick').on('click', add); // bind the click and use as callback
});
I have this code inside my js file. Can you tell me how can I change text inside div with class "message".
$.post(url, form_serialized, function(data) {
form.html('<div class="message">Thank you for contacting us!</div>');
});
So I want to change "Thank you for contacting us" that's inside .js file, to override it inline in html to "Thank you for sending us a message".
In your html, you need
<script type="text/javascript">
$(document).ready(function() {
$.post(url, form_serialized, function(data) {
form.html('<div class="message">Thank you for contacting us!</div>');
});
});
</script>
Although I suspect that you want this to be tied to some button press. So you may want:
<script type="text/javascript">
$("#form_id").submit(function(ev) {
ev.preventDefault();
// .... setup form_serialized variable with form data
$.post(url, form_serialized, function(data) {
form.html('<div class="message">Thank you for contacting us!</div>');
});
});
</script>
Where the form tag looks like
<form id="form_id">
You have to change your codes little in your js file
var textToBePassed ="'<div class="message">Thank you for contacting us!</div>'";
$.post(url, form_serialized, function(data) {
form.html(textToBePassed );
});
now just add this code in HTML file as
textToBePassed ="Thank you for sending us a message"
Before calling it.
I can write out the images src with this script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("img.film").click(function () {
alert($(this).attr('src'));
});
});
</script>
But how can I fill it to a session, which I can use in php?
I know that this row has to be changed, but for what?
alert($(this).attr('src'));
Thanks.
Well, if you want it to be read by PHP, you can just use a cookie.
$(document).ready(function () {
$("img.film").click(function () {
document.cookie = "image_src=" + $(this).attr('src');
});
});
Then, on PHP, just get the cookie from the cookie variable:
$_COOKIE['image_src'];
you need to make for example an ajax call to set your php session like this:
$(document).ready(function () {
$("img.film").click(function () {
var src = $(this).attr('src')
$.ajax({
type: 'POST',
url: "set_session.php",
data:{your_var:src},
success: function(resultData) {
alert("Save Complete") }
});
});
});
and in the same directory you need to create a file called set_session.php
session_start();
$_SESSION['your_key'] = $_POST['your_var'];
It's important that session_start() is in the first line of both file
So I have a page which, when requested, updates my database. For example when I go to database_update.php it just updates the database and doesn't show anything.
Index.php shows user database content.
So I have function in JavaScript called update which must use AJAX to run this page and after the page loads (after all queries run successfully) it must load index.php and show updated page to the user (reload the page without refresh effect).
My code is like:
$.get('ajax_update_table.php', {
// The following is important because page saves to another table
// users nick which call update:
update: UserLogin
}, function (output) {
// The following is unimportant:
$(myDiv).html(output).show();
});
Two suggestions:
Return a "success" or "error" code from your database_update script. Returning a JSON string is very easy. For example:
echo '{"success":"success"}';
Use the $.ajax function. Then add the success, error, and complete parameters. You can call any javascript function(s) when the AJAX request is complete.
$.ajax({
url: 'update_database.php',
dataType: 'json',
success: function (data) {successFunction(data)},
error: function () { error(); },
complete: function () { complete(); }
});
function successFunction(data) {
if ('success' in data) {
// Do success stuff here.
} else {
// Show errors here
}
}
// .... etc
I might be missing something, but I'll try to answer your question.
I would setup a blank page that on loading it sends the index.php to a div on that page. For example, make a page titled blank.php.
blank.php would have the following:
function Index(){
$.ajax({
url:"index.php",
type: "GET",
success:function(result){
$("#web-content").html(result);
}
});
}
<script type="text/javascript">Index();</script>
<div id="web-content"></div>
You would then have your index execute the Index function to update the web-content div with the index.php data without reloading the blank.php page.
Got it to work!
my index.php
<html>
<head>
<script type="text/javascript" language="Javascript" SRC="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="Javascript">
function update_and_replace()
{
$.ajax({
url: 'ajax_update_table.php',
dataType: 'json',
success: function (data) {successFunction(data)},
error: function () { error(); },
complete: function () { complete(); }
});
}
function successFunction(data) {
if ('success' in data) {
$("#content").load("index.php");
}
}
</script>
</head>
<body>
<div id='content'>
Now is: <?php echo date("Y-m-d, H:i:s");?>
<br/><br/><br/><br/>
Aktualizuj
</div>
</body>
</html>
Ajax_update_table.php
<?php echo '{"success":"success"}'; ?>
Thank You all for your help.
I know that my English is bad but with your help I made it!