I have a code for filterable audio files, how can I add add-to-cart functionality?
My index.php file:
https://www.pastiebin.com/5cff432c06f57
and my fetch_data.php file,
https://www.pastiebin.com/5cff436697ed2
Here if I click add to playlist button the alert was shown based on the hello.php file [ just echo message ], here how can I save my id and name into the hello.php page like cart page, if I click add to playlist button I need my id and name save into the hello.php page.
Current Output:
on your Button onClick, add new function like addCart()
<button type="button" class="btn btn-primary" type="submit" style="padding: 5px 83px 5px 83px;" onclick="addCart(<?php echo $row['voice_id']; ?>); " >Add to PlayList </button>
then your script should be like to call ajax
<script>
function addCart(id) {
$.ajax({
type: 'POST',
url: 'hello.php',
dataType: 'html',
data : {id: id}, // pass id to the php
success: function(data) {
alert(data);
}
});
}
and in your hello.php
<?php
$id = $_POST['id'];
//code to save it to databse table
?>
Related
This is the form modal code ...
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add Ajax</button>
Here I can able to add/edit my form. But, the problem is when I click the Add Ajax to create a new form after the click edit button it contains the last edited modal data. I can't reset the data ... modal is only empty after page refresh
script tag
$(".edit-ajax").click(function() {
let id =$(this).data('id');
$("#myModal").find('[name="id"]').val(id);
$.ajax({
url: frontend_form_object.ajaxurl,
type:'POST',
async:false, // Code paused. (Other code waiting for this to finish.)
data: {
action: 'edit_ajax_test',
id : id,
},
})
.done(function(response) {
console.log(response.success);
$("[name=first_name]").val(response.data.edit_ajax.caller_name);
$("[name=last_name]").val(response.data.edit_ajax.caller_state);
//toastr.success('Successfully saved', 'Success', {timeOut: 5000});
$('#myModal').modal('hide');
})
});
Try this:
$(".edit-ajax").click(function() {
$("#myModal").find("#yourformId")[0].reset();
//rest of your code
}
Here I'm attaching the image of my code. I need to post an id to the same page when I clicking a link, and also need to pop-up a bootstrap model window. I'm worked with several methods. The value is available at console and fire bug inspect. But I could not get the id using $_GET,$_POST or $_REQUEST methods. Any Can you help me?
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" id="edit-button" data-id="26" ><span class="fa fa-pencil"></span></button></p></td>
<script>
$('#edit-button').click(function(){
var eid = $(this).data('id');
$.ajax
({
url: 'managers.php',
data: {"eid": eid},
type: 'post',
success: function(result)
{
console.log(eid);
}
});
});
</script>
It appears that the ajax request succeeds but returns the entire page rather than the specific data you need. To alleviate this check for the request method (POST) and for the existence of the particular variable (eid) and, before sending any data back, clear the output buffer (ob_clean) - proceed with processing and then exit/die.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['eid'] ) ){
ob_clean();
/* other code presumably to do something with POSTed data */
/* send some sort of response */
echo $_POST['eid'];
exit();
}
?>
Complete example of returning only required data rather than entire page.
<html>
<head>
<script src="//code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
<body>
<p>This HTML data will not be part of the ajax response, only "the value of eid: X"</p>
<input type='button' id='edit-button' data-id=303 value='Edit' />
<script>
$('#edit-button').click(function(){
var eid = $(this).data('id');
$.ajax
({
url: 'simplejquery.php',/* chenge this to suit your url */
data: {"eid": eid},
type: 'post',
success: function(result)
{
console.log(result);
alert(result)
}
});
});
</script>
</body>
</html>
Hi I have been at this for days now and I just cant figure out why this isn't working, please could someone take a look.
index.php
<form id = "update_status" method = "POST">
<textarea id="shadow" name ="user_status" placeholder = "Share what is on your mind!" cols="97" rows="1" title="Share what's on your mind"></textarea>
<input style="float:right; margin-top: 0.3%;margin-right : 0% !important;" id = "btnStatus_update" name = "btnStatus_udate" type="button" value="Add Post" title="Your posts will be made public"></input></form>
swift.php
$(document).ready(function(){
$("#btnStatus_update").click(function(e) {
e.preventDefault();
//alert("Confirming function works");
$.ajax({
cache: false,
type: 'POST',
url: './datacenter.php',
data: $("#user_status"),
success: function(d) {
$("#successMesg").html(d);
}
});
});
});
datacenter.php
if (isset($_POST['user_status'])) {
var_dump($_POST['user_status']);
foreach ($_POST as $ak => $av) {
if (empty(trim($_POST['user_status']))) {
echo 'Say what is on your mind'.' ';
} else {
$userstatus = $_POST['user_status'];
add_user_status($user_data['id'], $userstatus);
}
}
}
using var_dump for testing I was hoping it did return the data, but instead i get NULL, i need the data so i can pass it into the add_user_status function to be added to the database, but it seems there is something missing or off about the code denying me my satisfaction. Please help
There are a few things that appear to be missing:
Index.php:
You need to add an action="something" attribute to the form tag, this tells the form what to do when you submit it. (unless you are manually handling this is JS somewhere else?)
<form id = "update_status" action ="data.php" method = "POST">
Also, unless you are using JavaScript on the index page to handle the actual submitting of the form, your <input> should include a type="submit" attribute. (this will also make it a button) and when clicked it will automatically submit the form to the action location above.
Swift.php:
the code posted is JS, and does what the first line of the previous paragraph mentioned (handles the submit button). Do you include this file inside the index.php? if the index.php cannot see it, then it wont run. It must also be in the html somewhere in a proper <script> block.
I believe the correct way to send form data using ajax is to serialize the data:
$('#update_status').serialize() instead of just sending the one input field.
You will also be required to reference the jQuery libraries, preferably in the index, but could also go in swift.php. I am also assuming that the code posted appears in the necessary <script> block.
Data.php:
should this be datacenter.php? your Swift.php is sending the ajax request to ./datacenter.php
On a side note, if you need it to use Ajax then you actually don't need the action ="data.php" method = "POST" in the form (Ajax does all that for you)
The way it could be done would be something like this:
Index.php:
// HTML beginning stuff
<head>
// Either reference the script in its own JS file or:
// Need to also include jquery library
<script type="text/javascript">
$(document).ready(function(){
$("#btnStatus_update").click(function(e) {
e.preventDefault();
//alert("Confirming function works");
$.ajax({
cache: false,
type: 'POST',
url: './datacenter.php',
data: $('#update_status').serialize(),
success: function(d) {
$("#successMesg").html(d);
}
});
});
});
</script>
</head>
<body>
<form id = "update_status">
<textarea id="shadow" name ="user_status" placeholder = "Share what is on your mind!" cols="97" rows="1" title="Share what's on your mind"></textarea>
<input style="float:right; margin-top: 0.3%;margin-right : 0% !important;" id = "btnStatus_update" name = "btnStatus_udate" type="button" value="Add Post" title="Your posts will be made public"></input>
</form>
</body>
datacenter.php:
<?php
var UserStatus = user_status
if (!empty(UserStatus)) {
var_dump($_POST['user_status']);
// process as necessary
}
?>
But, including the
<form id = "update_status" action ="datacenter.php" method = "POST">
and changing the button to
<input style="float:right; margin-top: 0.3%;margin-right : 0% !important;" id = "btnStatus_update" name = "btnStatus_udate" type="submit" value="Add Post" title="Your posts will be made public">
will allow users to still post information if they have JavaScript disabled.
the selector for the textarea is incorrect, the id is not "user_status", its "shadow"
data: $("#user_status"),
should really be:
data: $("textarea[name=user_status]")
or
data: $("#shadow")
The problem that we have is describing as follows. We have two different pages, the first one is called profile.php and the second one is called save_button.php. In the page profile.php I have this script which is written the following code in jQuery:
<script >
$(function(){
$("#save").bind('click', function(){
document.getElementById('save').style.background='#F26522';
document.getElementById('modify').style.background='#0083A9';
$.ajax({
url: 'save_button.php',
type: 'post',
data: { "callFunc1": "test"},
success: function(response) { alert(response); }
});
})
});
</script>
In the body of profile.php page we have written this code, here we have two different buttons:
<body>
<div class="button_container" >
<input id="modify" type="button" class="buttons" value="Modify" onclick="changeText();" />
<button id="save" class="buttons" >Save</button>
</div>
</body>
When we click the save button we want to execute the PHP code in another page, called save_button.php. Inside this page, save_button.php, we have written the following code:
<?php echo "test works"; ?>
What happens with us is that when we click the save button, in our page is not alerted the words "test works". Do you have any idea what to do in this page? Please, give us a quick feedback as this is a school project and we have to submit within the three next days. Many thanks.
Basically I have a list of files composed from a foreach loop that all have the same code except for the name, which carries the file_id for each file. My problem is that when I added an on-click pop-up event I lose the ability to fetch the current $(".flag") attribute name. Is there a way that I can pass it along the way so I can use it in the end?
PHP: (the user sees the link which they can click...remember there are several of these as a result from the foreach loop. I'm showing one for example)
echo "<td><a href='#' class='flag' name='$files[id]' >Click Here</a> ( $files[nums] )</td>";
jQuery: (on-click this will happen)
$(".flag").live('click', function() {
$(".pop").show("slow");
return false;
});
HTML: this div will popup
<div class="pop">
<form method="post" id="new_folder" >
<p><label for="folder">Reason for Reporting?</label><textarea id="report_reason" name="report_reason" maxlenght="100" style="resize:none" cols="30" rows="5">Please limit your response to 100 characters.</textarea></p>
<p><input type="submit" value="Submit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
</form>
</div>
jQuery: on submit I need to send the current $files['id'] and textarea value via ajax. The textarea sends the correct data, but the $(".flag") instead of being the id of the selected link it is the id of the first fetched id from the foreach loop
$("#message_submit").on("click", function(e){
var fileID = $(".flag").attr("name");
var text = $("#report_reason").val();
$(".pop").hide("slow");
$.ajax({
url: '<?php echo base_url().'home/report_file';?>',
type: 'POST',
data: { val: fileID, val2: text },
dataType: 'json',
success: function(output_string){
$(".success").text("You have flagged this file!!").show().css({"color" : "green", "margin-top" : "10px"});
$(".success").fadeOut(10000);
}
});
return false;
});
You can save the .flag link being clicked and later use it.
var flagClicked;
$(".flag").live('click', function() {
$(".pop").show("slow");
flagClicked = $(this);
return false;
});
$("#message_submit").on("click", function(e){
var fileID = flagClicked.attr("name");
....