can anyone help please. I have a problem updating "div" inside of "table" to update "tr with_id". However when I run test and
place without_"id" outside of table my script runs greate and i'm getting server "TEST" response
<table style="border: none; border-bottom: 1px solid #2F2E2F;">
<tr>
<th colspan="4">Notifications</th>
</tr>
<div id="update_118">
<tr class="read_118">
</div>
<td>... </td>
<td> Comment on your Photo </td>
<td>today 21:43</td>
<td>... </td>
</tr>
</table>
Now I want to up update this "div" when mouseover on success: function() without page refreshing to have its value change to class="light" to have NOT TO CALL ajax url: "/alerts/ajax_read/118" over and over while mouse is over on it.
<div id="update_118">
<tr class="light">
</div>
here is my script,...
<script>
$(document).ready(function(){
$('.read_118').on('mouseover', function(){
var id = $(this).attr("id")
var data = 'id=' + id ;
$.ajax({
type: "GET",
url: "/alerts/ajax_read/118",
data: data,
cache: false,
success: function(){
$('#update_118').fadeOut('slow').load('/alerts/ajax_load/118').fadeIn("slow");
return false;
}
});
});
});
</script>
here is my server response file:
$response = " <tr class='light'> ";
echo $response;
thanks in advance,...
chris
Update following line
success: function(){
To
success: function(data){
and set the "data" variable value to your respective "div" or other place where you want.
Related
$(document).ready(function(){
$(document).on('click', '.dlt', function () {
var id = $(this).attr('data-id');
var token= '{{ csrf_token() }}';
$.ajax({
method: 'post',
url: '{{route('product.delete')}}',
data: {id:id, _token:token},
success: function (response) {
location.reload();
}
});
});
});
<tbody>
#if($products->count()>0)
#foreach($products as $product)
<tr>
<td class="p_name">{{$product->name}}</td>
<td class="p_details">{{$product->details}}</td>
<td class="p_price">{{$product->price}}</td>
<td><a class="add" data-id="{{$product->id}}" title="Add" data-toggle="tooltip" style="display: none"><i class="fa fa-book"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="fa fa-edit"></i></a>
<a class="dlt" onclick="confirm('Are you sure to delete it?')" title="Delete" data-toggle="tooltip" data-id="{{$product->id}}"><i class="fa fa-trash"></i></a>
</td>
</tr>
#endforeach
#else
<tr>
<td colspan="4" class="text-center bg-danger">No Product Data Found</td>
</tr>
#endif
</tbody>
Although I click on Cancel button of Confirm() message, but onclick ajax request already done. How to prevent it until I click on OK button of confirm() message?
Inside a function, you have to use this script -
var result = confirm("Want to delete?");
if (result) {
//Logic to Ajax
}
In your code
$(document).ready(function() {
$(document).on('click', '.dlt', function() {
var result = confirm("Want to delete?");
if (result) {
//logic to AJAX
var id = $(this).attr('data-id');
var token = '{{ csrf_token() }}';
$.ajax({
method: 'post',
url: '{{route('
product.delete ')}}',
data: {
id: id,
_token: token
},
success: function(response) {
location.reload();
}
});
}
});
});
I started messing around with Vue.js earlier this week.
So far I created a list of MTG(a TCG) cards. The data comes from the database through an Ajax request. This all works like a charm.
What i want to do next is replace the string that contains the costs of a card e.g. something like '{1}{U}{G}' with images for the corresponding tag.
HTML:
<div v-for="(cards, key) in mainBoard" class="">
<table class="table">
<tr>
<th colspan="5">#{{ key }}</th>
</tr>
<tr>
<th>#</th>
<th>Name</th>
<th>ManaCost</th>
#if($deck->enableCommander())
<th>Commander</th>
#else
<th></th>
#endif
<th>Actions</th>
</tr>
<tr v-for="card in cards">
<td>#{{card.pivot.quantity}}</td>
<td>#{{card.name}}</td>s
<td v-html="replaceManaSymbols(card)"></td>
#if($deck->enableCommander())
<td>
<span v-if="card.pivot.commander" #click="preformMethod(card, 'removeCommander', $event)"><i class="fa fa-flag"></i></span>
<span v-else #click="preformMethod(card,'assignCommander', $event)"><i class="far fa-flag"></i></span>
</td>
#else
<td> </td>
#endif
<td>
<button #click="preformMethod(card,'removeCardFromDeck', $event)"><i class="fa fa-times-circle"></i></button>
<button #click="preformMethod(card,'plusCardInDeck', $event)"><i class="fa fa-plus-circle"></i></button>
<button #click="preformMethod(card,'minusCardInDeck', $event)"><i class="fa fa-minus-circle"></i></button>
</td>
</tr>
</table>
</div>
Vue.js
new Vue({
el: '#Itemlist',
data: {
mainBoard: [],
sideBoard: [],
},
methods:{
preformMethod(card, url){
var self = this;
var varData = {
slug: '{{ $deck->slug }}',
card: card.id,
board: card.pivot.mainboard
};
$.ajax({
url: '/vue/'+url,
data: varData,
method: 'GET',
success: function (data) {
self.mainBoard = data.mainBoard;
self.sideBoard = data.sideBoard;
},
error: function (error) {
console.log(error);
}
});
},
replaceManaSymbols(card){
var mc = card.manaCost;
var dump = mc.replace(/([}])/g, '},').split(',');
var html = '';
/**
* replace each tag with an image
*/
return html;
}
},
mounted(){
var self = this;
var varData = {
slug: '{{ $deck->slug }}'
};
$.ajax({
url: '/vue/getDeckList',
data: varData,
method: 'GET',
success: function (data) {
self.mainBoard = data.mainBoard;
self.sideBoard = data.sideBoard;
},
error: function (error) {
console.log(error);
}
});
}
})
I pass the card as a parameter to the replaceManaSymbols method. I can console.log the contents of mana without any issue. But as soon as a want to modify the string Vue throws the error TypeError: Cannot read property 'toLowerCase/split/replace' of null. I'm not really sure what's going wrong. Any idea's?
As a rule of thumb, you shouldn't use methods on the display side. Keep them for the update side - processing changes back into a store and such. Methods aren't reactive - they need to be called. You want your display to automatically reflect some underlying data, so you should use computed.
You should also avoid using v-html, because you end up with markup outside your templates, and that markup is static. It's not totally clear to me what will be in v-html, but you should try and keep markup in your template, and inject values using data, props or computed. Hope this helps!
If you want a div with some text that magically turns into an image tag, this could be a good use for <component :is>.
I have a design of grid in controller that displays me all data of selected check boxes.
This grid gets appended to a span through ajax.
While performing a delete request, one by one my data in grid gets deleted,
but the grid header stays as it is.
This is my design of grid in controller:
$res_div = '';
$res_div.='<table width="100%" border="0" class="table table-striped table-bordered table-hover">';
$res_div.='<tr>
<th width="100%">SublawId</th>
<th width="100%">Sublawname</th>
<th width="100%">View</th>
<th width="100%">Update</th>
</tr>';
foreach ($law as $sublaw)
{
$law_details = DB::table('tbl_law_sub_master')->where('id', $sublaw->id)->select('*')->first();
$res_div.='<tr>
<td>
<strong>'.$law_details->lms_id.'</strong>
</td>
<td>
<strong>('.$law_details->sub_law_name.')</strong>
</td>
<td align="center">
<input type="checkbox" id="cb1" onclick="ts(this)" class="cb1" name="viewsub_'.$sublaw->id.'">
</td>
<td align="center">
<input type="checkbox" id="cb1" onclick="ts(this)" class="cb1" name="updatesub_'.$sublaw->id.'">
</td>
</tr>';
}
$res_div.='</table>';
$data=array(
'res_div'=>$res_div,
'law'=>$law
);
return json_encode($data);
my ajax request on blade:
$.ajax({
url: "{{ URL::to('staff/staffpostsublawsdata') }}?sub_law_id="+sublaw_ids.join(),
type: 'POST',
dataType: "json",
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
var res_sublaw_content=returndata.res_div;
var data = document.getElementById("append_sublaw_grid").innerHTML = ""; $('#append_sublaw_grid').append(res_sublaw_content);
return false;
}
});
On deletion all data gets deleted one by one from grid, but its header stays..
A screenshot:
Everytime you remove a row u can count the number of rows left using
var rowCount = $('.table tbody tr').length;
if rowcount goes to 0 then just hide the table using
$('.table').hide()
Working example:
Put this code in the function where you delete the rows
var rowCount = $('.table tbody tr').length;
if( rowcount == 0){
$('.table').hide();
}
In the console,I am getting name based on id.How to bind that name into the html page.
Here is my code..
function getEventname(){
var clid=$('#eventid').val();
console.log("i am ok" + clid);
$.ajax({
type: "GET",
url: "EduManage.jsp",
data: {
control:'ajax',
ch:'1',
key:'1_0a1m_1',
eventid:clid
},
success: function(data) {
console.log("i am ok" + data);
(what to do to bind the name in the html page)
}
});
}
Now the HTML is;
<td class="bg1">
Event Id :
</td>
<td class="bg1" width="25%">
<input name="eventid" type="text" id="eventid" size="10" maxlength="10" onblur="getEventname()"/>
</td>
<td class="bg1" width="40%">
Event Name :
</td>
<td class="bg1" width="25%">
<input type="text" name="eventname" id="eventname">
</td>
In the console,I am getting name as i am ok seminar .How to bind that name in the HTML page automatically when id is given.
Can anyone help?
So your Javascript function should be;
function getEventname(){
var clid=$('#eventid').val();
console.log("i am ok"+clid);
$.ajax({
type: "GET",
url: "EduManage.jsp",
data: {
control:'ajax',
ch:'1',
key:'1_0a1m_1',
eventid:clid
},
success: function(data) {
console.log("i am ok"+data);
//The one line change
$("#eventname").val(data);
}
});
}
So you had already implemented everything. All you need to do is add data in some element. If you want to add it in td then use this:
$.ajax({type: "GET",url: "EduManage.jsp",data: {control:'ajax', ch:'1', key:'1_0a1m_1', eventid:clid},
success: function(data) {
console.log("i am ok"+data);
$("td.last").append(data);
(what to do to bind the name in the hmtl page)
}
});
and add a new html tag:
<td class="last"></td>
You can also update the html using jquery but its not a practice to do so.
Hope this works.
I am creating small plugin where i want to submit form data using ajax but it giving response zero.
Here is my call i have added all code in a single file for the time being
file name :index.php
<?php wp_enqueue_script("jquery");?>
<?php
function myaddgallery(){
global $wpdb;
echo "abac";
}
add_action('wp_ajax_myaddgallery' , 'myaddgallery');
add_action('wp_ajax_nopriv_myaddgallery' , 'myaddgallery');
?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#shaGalleryForm').submit(function(e){
// prevent normal submit behaviour
e.preventDefault();
var name = jQuery("#shaGalleryName").val();
alert(name);
//var postData = jQuery("#shaGalleryForm").serialize();
//console.log(postData);
var name = "shalu";
jQuery.ajax({
type: "POST",
url: "http://localhost/plugindevelop/wp-admin/admin-ajax.php",
data : {action: "myaddgallery", name : name},
success: function(response){
//console.log(postData);
console.log("added success");
alert(response);
},
error: function(data){
console.log("fail");
}
});
});
}) ;
</script>
<div class='wrap'>
<h2>Add Gallery</h2>
<p>This is where from you can create new gallery</p>
<form name="shaGalleryForm" id="shaGalleryForm" method="post">
<table class="form-table">
<tr>
<th>Gallery Name</th>
<td>
<input type="text" id="shaGalleryName" name="shaGalleryName">
<p class="description">Add gallery name also please avoid special character</p>
</td>
</tr>
</table>
<p class="submit">
<input type="submit" value="Save" id="shaSaveGallery" name="shaSaveGallery" class="button button-primary">
</p>
</form>
</div>
Try to add die() after you echo the data
function myaddgallery(){
global $wpdb;
echo "abac";
die();
}