I need some help getting a serialized <ul> list submitted via a AJAX post form request. How would I go about doing this? Below is my current code.
HTML:
<form id="update_fruit_form" method="post" action="/update_fruits" accept-charset="UTF-8">
<ul id="list_a">
<li id="item_Apple" value="1">Red</li>
<li id="item_Green" value="2">Pear</li>
<li id="item_Banana" value="3">Yellow</li>
</ul>
<input type="submit" value="Submit">
</form>
jQuery:
$("#update_fruit_form").submit(function() {
$.ajax({
url: "update_fruits.html",
context: "#list_a" ,
success: function(){
$(this).addClass("done");
}
});
});
Thanks!
var list = {};
$('#list_a li').each(function(){
list[ $(this).attr('value') ] = $(this).html();
});
$("#update_fruit_form").submit(function() {
$.ajax({
url: "update_fruits.html",
data: list,
success: function(){
$(this).addClass("done");
}
});
});
Related
I have trouble returning my search results as json in same page that I searched,
this is my function for search page
public function track(Request $request){
return view('front.track');
}
this is route for it:
Route::get('/track', 'frontend\FrontendController#track')->name('track');
and this function to get results of my search
public function shippingcode(Request $request){
$rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxxxxxxxxxxxxxxxxx');
$shippingcode = $request->input('shippingcode');
$item = Order::where('shippingcode', $shippingcode)->first();
$courier = $item->courier;
$results = $rajaongkir->waybill($shippingcode, $courier);
return response()->json($results);
}
and this is route for it:
Route::post('/shippingcode', 'frontend\FrontendController#shippingcode')->name('shippingcode');
and finally this is my search form in blade:
<form class="form-inline text-center" action="{{route('shippingcode')}}" method="post">
{{csrf_field()}}
<lable>Shipping Code #</lable>
<input type="text" class="form-control" name="shippingcode" placeholder="93657275025">
<button class="btn btn-success" id="submit" type="submit" name="button">Track</button>
</form>
Issue
Issue is except getting results bottom of my form I will redirect to another page and see results as JSON.
any idea?
UPDATE
I have added jquery to my page in order to get results but still i will redirect to another page:
JavaScript
<script type="text/javascript">
$(document).ready(function() {
$('button[id="submit"]').on('click', function() {
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
$.ajax({
url: '{{ url('shippingcode') }}',
type: "GET",
dataType: "json",
success:function(data) {
$('div#results').empty();
$("div#results").html(data);
}
});
});
});
</script>
and added this div bottom of my form <div class="col-md-8 col-md-offset-2" id="results"></div>
You need to prevent the default action of your form which is submitting the form via POST method to provided action URL.
Try adding -
$('button[id="submit"]').on('click', function(e) {
e.preventDefault();
// Your own login
});
SOLVED
Note: using e.preventDefault(); alone would not help at all, however
is necessary to have it.
Here is how I done it:
first of all I changed my function to code below:
public function shippingcode($code){
$rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxx');
$shippingcode = $code;
$item = Order::where('shippingcode', $shippingcode)->first();
$courier = $item->courier;
$results = $rajaongkir->waybill($shippingcode, $courier);
return response()->json($results);
}
and then I changed my route from POST to GET and added my {code} into it (look in my function).
Route::get('/shippingcode/{code}', 'frontend\FrontendController#shippingcode');
Finally I changed my JavaScript code to the following code. here I used e.preventDefault(); but pay attention how I got my button.
<script type="text/javascript">
$(document).ready(function() {
$('#submit').on('click', function(e) {
e.preventDefault();
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
var shippingcodedd = $("#code").val();
if(shippingcodedd) {
$.ajax({
url: '{{ url('shippingcode') }}/'+encodeURI(shippingcodedd),
type: "GET",
dataType: "json",
success:function(data) {
$('div#results').empty();
var summar = data.data.summary;
$('div#results').append('Data prints here!');
}
});
}else{
$('div#results').empty();
$('div#results').append('Sorry there is no info regarding to your tracking code in our system!');
}
});
});
</script>
PS: just for completeness here is my form HTML code:
<form class="form-inline text-center" action="" method="post">
{{csrf_field()}}
<lable for="shippingcode">Shipping Code #</lable>
<input type="text" id="code" class="form-control" name="shippingcode" placeholder="93657275025">
<button class="btn btn-success" id="submit" name="button">Track</button>
</form>
Hope it help others.
I'm trying to get post id and insert it into database after user click on add to favorite button.
The problem that all the post are return id 30 which is the last id in the database.
My php/html code
while($row = mysqli_fetch_array($get_posts)) {
<i style="float:right;" class="fa fa-pinterest-square">
<form id="pin_post" method="post"> ';
if (isset($_SESSION['user_id'])){
<input type="hidden" value="'. $_SESSION['user_id'].'" name="user_id" />
}
<input type="hidden" value="'.$row['post_id'].'" name="post_id[]" />
</form>
</i>
The jQuery / Ajax code
<script>
$(document).on("click",".fa-pinterest-square",function(e) {
$.ajax({
url: "includes/test.php",
type: "POST",
data: $('#pin_post').serialize(),
success: function(data) {
alert(data);
}
});
});
</script>
I'm getting last id in the database when I click any post.
Please help me to get the id of each post when I click on the
Since you are using #pin_post when serializing it you will get the last hit when jQuery is looking for #pin_post. Either you should use a unique id or something like this
$(document).on("click",".fa-pinterest-square",function(e) {
var form = $(this).find('form'); //Since the form is child to <i>
$.ajax({
url: "includes/test.php",
type: "POST",
data: form.serialize(),
success: function(data) {
alert(data);
}
});
});
Hi i want learn ajax but i have same problem. So i click (a11) button but my javascript alert 8, need to be 11. my other question i post data with ajax but say "no" thanks.!
<form action="" method="post" onclick="return false;" >
<input type="text" name="idh" value="'.$id.'"></input>
<button id="my_button" class="my_button" name="my_button" data-value="'.$id.'">'.$baslik.$id.'</button>
</form>
and my script
$('.my_button').click(function() {
var idm = $(this).attr('data-value');
var idh = $("input[name=idh]").val();
idh = $.trim(idh);
//alert (id);
$.ajax({
type: "POST",
url: "ajax.php",
data: idm,
success: function(cevapp){
alert (idh);
}
});
});
my ajax.php
I trying to sort the list of titles of the pages I can see the correct order after sorting in firebug console when i am hitting sort button it is not taking my request to the requested method. here is my jquery code I am kinda new in it.
<script>
$(function(){
$("#sortable").sortable();
$sortable = $("#sortable");
$( "#sortable_nav_items" ).sortable({
placeholder:"sortable-placeholder",
update: function( event, ui ) {
console.log($("#sortable_nav_items").sortable("toArray",{attribute:"pageid"}));
}
});
var order = $("#sortable_nav_items").sortable("toArray",{attribute:"pageid"});
console.log(order);
$sortable.bind('sortupdate',function(event,ui){
console.log($(this).sortable('toArray'));
$.post(
"content.cfc",
{method:"sortOrder",data:$(this).sortable('toArray')}
);
});
});
</script>
here is my list.
<cfoutput>
<div class="well">
<ul id="sortable_nav_items" class="list-group">
<cfloop query="_q">
<li class="list-group-item" pageid="#_q.id#" navOrder="#_q.nav_order#">
#_q.title#
</li>
</cfloop>
</ul>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<button class="btn btn-info" type="submit">
<i class="glyphicon glyphicon-retweet"></i>
Sort
</button>
</div>
</div>
</cfoutput>
can anyone please help me out what i have to do in it to post the changes to the requested method ? Thanks.
You have not bound click event for your button.
$("button").click(function() {
var order = $("#sortable_nav_items").sortable("toArray",{attribute:"pageid"});
$.post(
"content.cfc",
{method:"sortOrder",data:order}
);
});
Here is jsfiddle (no coldfusion stuff though): http://jsfiddle.net/nn4x8/4/
If you want to send server request on every sort change, same handler for 'sortupdate' event. E.g.:
$("#sortable_nav_items").bind('sortupdate', function() {
var order = $(this).sortable("toArray",{attribute:"pageid"});
$.post(
"content.cfc",
{method:"sortOrder",data:order}
);
});
Try this,
$.post( "content.cfc", { data: $(this).sortable('toArray') } ).done(function( data ) {
alert( "Data Loaded: " + data );
});
Alternate of POST in jquery
$.ajax({
type: 'POST',
url: "content.cfc",
dataType: 'json',
beforeSend: function(){
sortOrder()
},
data: {'data':$(this).sortable('toArray')},
success: function(result){
alert(result)
},
});
Friends I created a drop-down list using the following code using js .
<script>
$('.menu').dropit();
</script>
<ul class="menu">
<li>
Product_name
<ul>
<? foreach($customer_details as $details){?>
<li><?echo $details->name;?></li>
<?}?>
</ul>
</li>
</ul>
The problem is that when the user clicks on the link of the dropdown list I need to send the result ie is the
$details->name
through an ajax request to a function in the controller (using codeignitor framework).Hoe this is done ??
JS SOURCE : http://codepen.io/anon/pen/Eoxhp
try this
$('.menu ul li a').on('click', function(e) {
e.preventDefault(); // prevent the link from triggering a pageload
var productName = $(this).html();
$.ajax({
type: "POST",
url: url, // the url you want to send it to
data: {name: productName },
success: function() {
// do whatever you need to do on success
}
});
});
on the server side you'll be able to access the product name using $_POST['name'];
You can try something like this...
// In your HTML replace the line with this
<li><a onclick="sendInfo(this);" href="#"><?echo $details->name;?></a></li>
// JS
function sendInfo(aEl){
var val = $(aEl).text();
$.ajax({
url : "your url",
data : {"name" : val}
}).done(function(){
// Success. Do something
});
}
This is an ajax request on change of drop down it works fine for me
i hope that it will also solve your problem.
<select name="all_users" id="all_users" onchange="Mehdi_ajax(this.value);">
<option value=""><?=$this->lang->line('global_all')?></option>
<?php if($all_users)
{
foreach($all_users->result() AS $item=>$val)
{
?>
<option value="<?=$val->uid?>"><?=$val->username?></option>
<?php
}
}
?>
</select>
script code:
<script type="text/javascript">
var surl = '<?=secure_xss()?>';
function Mehdi_ajax(id)
{
$.ajax({
type:"POST",
url: surl+"movable/jewelry/get_all",
data: "userid=" + id,
success: function(result){
$("#Mehdi_ajax").html(result);
}
});
}