I am trying to use a drag-and-drop function in 'index.php' and post a variable, 'element' to 'store.php', where in the final version it should update a database.
'store.php' is called and runs but the variable is not being passed. I have attached below a shortened version of 'store.php' with a trap to catch this, so in this version I get the response "Element value not set".
INDEX.PHP:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="scripts/jquery-1.3.2.min.js"></script>
<script src="scripts/jquery-ui-1.7.1.custom.min.js"></script>
<link rel="stylesheet" href="style.css">
<div class="content_box" id="content_box_drag" onMouseOver="drag();">
Drag label
<?php for($i=0; $i<5;$i++) {
echo "<p class='dragelement' id='dragelement_$i'>Ferrari_$i</p>";
} ?>
</div>
<div class="content_holder_box" id="content_box_drop">
Drop here
<p class="dropper"></p>
</div>
<div style="clear:both;"></div>
<br/><br/>
<div id="search_result"></div>
<script>
//initialize the drag and drop functions.
function drag(){
$( "#content_box_drag p" ).draggable({
appendTo: "body",
helper: "clone",
revert: "invalid"
});
$( "#content_box_drop p" ).droppable({
activeClass: "dropper_hover",
hoverClass: "dropper_hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var ele = ui.draggable.text();
$.ajax({
url: "store.php",
method: "POST",
data: "element=" + ele,
success: function(result) {
alert(result);
}
});
}
});
}
</script>
STORE.PHP (shortened):
<?php
if(isset($_POST['element'])){
$element=$_POST['element'];
} else {
echo "Element value not set";
exit;
}
?>
Any ideas why the variable is not being set?
Parameter method doesn't exist, change to type: "POST"
Set your data as JSON map, change data: "element=" + ele to data: {element : ele}
http://api.jquery.com/jQuery.ajax/ (Search type description)
$( "#content_box_drop p" ).droppable({
activeClass: "dropper_hover",
hoverClass: "dropper_hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var ele = ui.draggable.text();
$.ajax({
url: "store.php",
type: "POST",
data: {element : ele},
success: function(result) {
alert(result);
}
});
}
});
Related
View Code:
<script>
function getMessage(){
$.ajax({
type:'POST',
url:'/getmsg',
data:'_token = <?php echo csrf_token() ?>',
success:function(data){
$("#msg").html(data.msg);
}
});
}
</script>
<body>
<div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
<input type="button" value="Replace Message" onclick='getMessage()'>
</body>
Here ,When I click on the button it should be replaced by the other text. But nothings appears on clicking.
Controller code:
public function index(){
$msg = "This is a simple message.";
return response()->json(array('msg'=> $msg), 200);
}
In pure js that code work fine
function getMessage(){
alert('Its working!');
}
<body>
<div id = 'msg'>This message will be replaced using Ajax.
Click the button to replace the message.</div>
<input type="button" value="Replace Message" onclick='getMessage()'>
</body>
Looks OK.
Put a breakpoint in your success and see what data is.
Or do a console.log
Mick
in your ajax code you didn't define dataType, add dataType:"json", to retrive the json data, change your ajax code as
function getMessage(){
$.ajax({
type:'POST',
url:'/getmsg',
dataType:'json',
data:{
_token = '<?php echo csrf_token() ?>'
},
success:function(data){
$("#msg").html(data.msg);
}
});
Update your code with below mentioned code, and let's try.. i will working for me..
<script type="text/javascript" charset="utf-8">
$(document).on('click', '#btnSelector', function(event) {
event.preventDefault();
/* Act on the event */
getMessage();
});
var getMessage = function(){
$.ajax({
type:'POST',
url:'/getmsg', //Make sure your URL is correct
dataType: 'json', //Make sure your returning data type dffine as json
data:'_token = <?php echo csrf_token() ?>',
success:function(data){
console.log(data); //Please share cosnole data
if(data.msg) //Check the data.msg isset?
{
$("#msg").html(data.msg); //replace html by data.msg
}
}
});
}
</script>
<body>
<div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
<input type="button" value="Replace Message" id='btnSelector'>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<body>
<div id='msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
<input type="button" id="ajax_call" value="Replace Message">
</body>
<script>
$(function () {
$('#ajax_call').on('click', function () {
$.ajax({
type:'POST',
url:'<?php echo url("/getms"); ?>',
data:'_token = <?php echo csrf_token() ?>',
success:function(data){
$("#msg").html(data.msg);
},
complete: function(){
alert('complete');
},
error: function(result) {
alert('error');
}
});
});
});
</script>
Jquery onclick function: jquery onclick function not defined
Also check: Function not calling within an onclick event
Form submit is not happened in this scenario..
$.ajax({
type: "POST",
async: false,
url: base_url+"register/registration_val",
data: "register_first_name="+first_name,
success: function(data){
$('#inferiz').html(data);
},
error: function(){
alert('error');
}
In your view you can add this:
<script type="text/javascript">
var base_url = "<?php print base_url(); ?>";
</script>
Plus try to alert and see the value of final url in ajax i.e alert(url);
Try adding a id to the firstname input
<script type="text/javascript">
$(document).on('submit','#form-reg',function(){ // #form-reg is id on form open tag
$.ajax({
url: "<?php echo base_url('register/registration_val');?>",
type: 'POST',
data: {
firstname: $('#firstname').val(),
},
dataType: 'html', // I perfer to use json
success: function(data){
$('#inferiz').html(data);
},
error: function(){
alert('error');
}
}
});
});
</script>
I would use dataType: json much easier that way to get data from controller
You used data: "register_first_name="+first_name, it's not correct. Correction is data: {register_first_name:first_name},
base_url like this var base_url = <?php echo base_url(); ?>
So, Bellow final code :
<script type="text/javascript">
jQuery(document).ready(function ($) {
var base_url = <?php echo base_url(); ?>
$.ajax({
url: base_url+"register/registration_val", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: {register_first_name:first_name}, // Data sent to server, a set of key/value pairs representing form fields and values
contentType: false, // The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded"
}).done(function (data) {
$('#inferiz').html(data);
}).fail(function (data) {
console.log('failed');
});
}(jQuery));
</script>
Please verify your view part that whether you provided id same as in ajax function.
view part:
<form id="form-reg">
<input name="firstname" id="firstname" type="text" required placeholder="Enter firstname " >
<span id="name_validation" class="text-danger"></span>
<button name="submit" id="submit_button" onClick="myFunction();" >submit</button>
</form>
Then correct the base url path which has to be given inside php tag.
function myFunction() {
$.ajax({
url: "<?php echo base_url();?>register/registration_val",
type: "POST",
data:'firstname='+$("#firstname").val(),
success: function(msg)
{
alert('done..!');
}
});
}
What is incorrect in the code? Can not pass data to _autosave.php
<script type="text/javascript">
$(document).ready(function(){
autosave();
});
function autosave() {
var t = setTimeout("autosave()", 5000);
var inputValues= $('.input_form').serialize();
$.ajax( {
type: "POST",
url: "_autosave.php",
data: inputValues,
} )
.done(function(data){
alert(data);
});
...
Input is this
<form id="input_form" autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]) ?>"
method="post">
<input type="text" name="input" id="input">
_autosave.php is this
$input = $_POST['input'];
echo $input .' input<br>';
If I enter some value in input, get input<br> instead of entered value
Update
If for someone may be necessary here is working code
$.post("_autosave.php", $("#form1").serialize(), function(data) {
$('#load').html(data);
$('#is_row_changed1').val(0)
});
You have a trailing comma here resulting in invalid javascript:
data: inputValues,
Here's how you could fix (and improve your current code):
<script type="text/javascript">
$(document).ready(autosave);
function autosave() {
window.setTimeout(autosave, 5000);
var inputValues = $('.input_form').serialize();
$.ajax({
type: "POST",
url: "_autosave.php",
data: inputValues
})
.done(function(data) {
alert(data);
});
}
</script>
or if you prefer a shorthand:
<script type="text/javascript">
$(document).ready(autosave);
function autosave() {
window.setTimeout(autosave, 5000);
var inputValues = $('.input_form').serialize();
$.post("_autosave.php", inputValues, function(data) {
alert(data);
});
}
</script>
Have you tried with serializeArray() instead?
<script type="text/javascript">
$(document).ready(autosave);
function autosave() {
window.setTimeout(autosave, 5000);
$.post("_autosave.php", $('.input_form').serializeArray(),
function(data) {
alert(data);
});
}
</script>
I am submitting a form via Ajax, and I want to prepend the project name to a list item when the form is submitted. Everything works fine except for pulling the information needed inside the success function. Data[Project][project_name] is being posted. How do I get the project name inside the success function? Right now "data" is being displayed in the list. I only have the one textbox in my form.
<script type="text/javascript">
$(document).ready(function () {
var frm = $('#ProjectAddForm');
frm.submit(function() {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function(data) {
$('#ProjectProjectName').val('');
$('#ProjectList').prepend("<li style='color: green;'>data</li>");
}
})
});
return false;
});
</script>
HTML:
<ul id="ProjectList">
<?php foreach ($projects as $project): ?>
<li><?php echo $project['Project']['project_name']; ?></li>
<?php endforeach; ?>
<?php unset($project); ?>
</ul>
<form accept-charset="utf-8" method="post" onsubmit="event.returnValue = false; return false;" id="ProjectAddForm" action="/callLog/projects/add">
I needed to add a dataType: 'json' to the request.
<script type="text/javascript">
$(document).ready(function () {
var frm = $('#ProjectAddForm');
frm.submit(function() {
$.ajax({
type: frm.attr('method'),
url: "<?php echo $this->Html->Url(array('controller' => 'projects', 'action' => 'add.json')); ?>",
data: frm.serialize(),
dataType: 'json',
success: function(data) {
$('#ProjectProjectName').val('');
$('#ProjectList').prepend("<li class='icon-remove', style='color: green;'>" + data.projectName + "</li>");
$('#modalProject').modal('hide');
}
})
});
return false;
});
</script>
Ajax Jquery form not working vs div why its happen and how can i fix my error?
view.html-Code with form
not working
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<form id="parse-form" action="#" method="post">
<button type="submit" id="submit-html">submit ajax request without parameters</button>
</form>
<div>array values: <div id="array-values"></div></div>
<script type="text/javascript">
$(document).ready(function() {
$('#submit-html').click(function() {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType:'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function (i, elem) {
$('#array-values').append('<div>'+elem+'</div>');
});
}
});
});
});
</script>
</body>
</html>
view.html -form replaced by div
working
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="parse-form">
<button type="submit" id="submit-html">submit ajax request without parameters</button>
</div>
<div>array values: <div id="array-values"></div></div>
<script type="text/javascript">
$(document).ready(function() {
$('#submit-html').click(function() {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType:'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function (i, elem) {
$('#array-values').append('<div>'+elem+'</div>');
});
}
});
});
});
</script>
</body>
</html>
controller.php -simple php file that return json array:
<?php
$arr=array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>
Thanks
The form has a default action with a type="submit" button, which is submitting, so you'll need to stop that from happening by adding return false or event.preventDefault() , like this:
$(document).ready(function() {
$('#submit-html').click(function(e) {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType:'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function (i, elem) {
$('#array-values').append('<div>'+elem+'</div>');
});
}
});
return false;
//or e.preventDefault();
});
});
Without this, the form is submitting as it normally would with no JavaScript, leaving the page. So effectively it's doing a refresh, instead of AJAX submitting your form (which doesn't have time to complete...because you left :)
An element of type=submit inside a <form> will perform the form request when clicked on.
You need to abort the default behavior by running event.preventDefault() inside the click callback.
My guess is that the form is submitting and refreshing the page before the ajax has a chance to respond.
Try putting return false; at the end of the click handler.
$('#submit-html').click(function() {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType: 'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function(i, elem) {
$('#array-values').append('<div>' + elem + '</div>');
});
}
});
return false;
});
Of course you'll have the same issue if the user hits Enter in one of the fields. Unless you're preventing the Enter key from submitting the form, you may want to the handle the event using the submit() handler.
$('#parse-form').submit(function() {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType: 'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function(i, elem) {
$('#array-values').append('<div>' + elem + '</div>');
});
}
});
return false;
});
Try using submit() http://api.jquery.com/submit/ , this should work with keyboard events as well as clicks. You can use serialize() to get any form data into the ajax objects data variable.