currently I am working on modification Remote Modal (show href in modal).
<a id="btnAdd" class="btn btn-sm btn-primary" role="button" data-toggle="modal" data-target="#DetailModal" data-tot="60" href="http://urlmodal">
on javascript I have
$('#DetailModal').on("loaded.bs.modal", function (e) {
alert($(e.relatedTarget).data('tot'));
});
I wanna to catch variable "data-tot" in link (button), but it result undefined. either $(e.relatedTarget).data('tot') or $(e).data('tot') result undefined.
Found it, I need to iterate show then loaded to catch then put in remote modal
$('#DetailModal').on("show.bs.modal", function (e) {
var dtot = $(e.relatedTarget).data('tot');
$('#DetailModal').on("loaded.bs.modal", function (e) {
$(e.target).find('#infoTot').html(dtot);
});
});
Related
I have a page with a response where a few items in a key named "tables" are coded as JQuery DataTable. My Goal is to do CRUD Operation on the same page index.blade.php by using Bootstrap Modal.
On clicking the EDIT button, I wanted to get clicked-row data in jQuery <script> and then fill it into the form inside a Modal.
As I've just started out with this as my first project, after two days long RnD on here and Google, I've figured out a way to do it. The next task I'm going to do is get & post requests via Ajax. But before that, I want to make sure if this is a good way or do I need a particular change/improvement.
Following is my script tag & HTML button:
<a href="javascript:void(0);" class="btn btn-sm text-primary btn-icon editButton"
data-bs-toggle="modal" data-bs-target="#editModal" data-id="{{ $table->id }}">
<i class="bx bx-edit-alt me-1"></i>
</a>
<script type="text/javascript">
$(document).ready(function() {
$('#myTable').DataTable();
var tables = #json($tables);
// Edit Function
$('.editButton').on('click', function() {
// Picking the clicked table from the response
var table;
for (let index = 0; index < tables.length; index++) {
if (tables[index].id == $(this).data("id")) {
table = tables[index];
break;
}
}
// Filling the Modal Form
$('#name').val(table.name);
$('#seats').val(table.seats);
$('#status').prop('checked', table.status);
$('#editForm').attr('action', '/tables/' + table.id);
// Focuses on the Name Field
$("#editModal").on('shown.bs.modal', function() {
$(this).find('#name').focus();
});
});
});
</script>
I'm trying to figure out how to reconcile this, but I have a button in Vue calling a function, which works, but it's taking more than a few seconds to complete and the href link to the next page happens first about half the time.
Is there a way to make this so that the button called method has to get a 200 success back in order for the href link to be triggered?
<button #click="changeStatus(dateEvent)" type="button" class=" taskButton btn-default">
<a v-bind:href="'/task/' + dateEvent.taskt_id + '/progress'" style="color:white;">Accept Task</a>
</button>
methods: {
changeStatus: function(dateEvent) {
//console.log(dateEvent.status, dateEvent.taskt_id)
let data = {
id: dateEvent.taskt_id,
status: 'P'
};
}
You need programmatic navigation (vue router if you want) and async/await:
You could do it without the router in vanilla js as well:
methods: {
async changeStatus(dateEvent) {
await this.myAsyncFunction(); // your function that takes two seconds to complete
let data = {
id: dateEvent.task_id,
status: 'P'
};
var route = '/task/' + dateEvent.task_id + '/progress'"
this.$router.push(route);
}
}
<button #click="changeStatus(dateEvent)" type="button" class=" taskButton btn-default">
<a style="color:white;">Accept Task</a>
</button>
I am Trying To Update the status of Order In My App. When Page Refreshes and I try to Update it, It successfully Update. But When I try to Update Some Other Order, Update Method Return Success on OnComplete Method But Does Not Update Data On Real Time Database.
Its causing me headaches, I have Already Tried All Possible Solutions but nothing worked.
var dbRef = firebase.database();
var requestsRef = dbRef.ref('requests');
var onComplete = function (error) {
if (error) {
console.log('Synchronization failed');
} else {
console.log('Synchronization succeeded');
}
};
function sendToProcessing(e) {
var confirmation = confirm("Really Wanna Send To Processing?");
if (confirmation) {
var key = parseInt($(e).data("key"));
requestsRef.child(key).update({
'status': "Processing"
}, onComplete);
$('#orderDetailsModel').modal("hide")
} else {
return false;
}
}
HTML Part:
<button type="button" class="btn m-2 btn-outline-success " onclick="sendToProcessing(this)" id="btn-processing"><i class="fas fa-utensils"></i></button>
Image Display:
Image Model When Clicked On Eye Button
your are trying to retrieve key using $(e).data("Key"). And in your case e is the button element. The button element doesn't have any attribute called data-key.
Try adding your key to the button as below.
<button type="button" class="btn m-2 btn-outline-success " data-key="keyvalue "onclick="sendToProcessing(this)" id="btn-processing"><i class="fas fa-utensils"></i></button>
Also try debugging your sendToProcessing Method, and try to console.log(key) which might be a null.
I have a function that I want to reuse throughout my program. Basically it's a bootstrap dialog box that has a confirm and a cancel button. I setup the helper function to accept two anonymous functions, one for the cancel and one for the confirm. I have everything working except I am not sure how to properly assign it to the onclick when building the html. I want to avoid using a global variable but this is the only way I was able to get this to work.
Custom function:
function confirmMessageBox(msg, cancelFunc, confirmFunc) {
var html = ' <div class="container"><div class="modal fade" id="ConfirmMsgModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Confirmation Needed</h4></div><div class="locationTableCanvas"><div class="modal-body"><p>' + msg + '</p></div></div><div class="modal-footer"><table><tr><td><button type="button" class="btn btn-default" data-dismiss="modal" onclick = "(' + cancelFunc + ')()">Cancel</button></td><td><button type="button" class="btn btn-default" data-dismiss="modal" onclick = "(' + confirmFunc + ')()">Confirm</button></td></tr></table></div></div></div></div></div>';
$("#confirmMsgContainer").html(html);
$('#ConfirmMsgModal').modal('show');
}
I have to do, onclick = "(' + cancelFunc + ')()"> because if I do, onclick = "' + cancelFunc() + '"> it shows up as undefined. The current way will basically just print the anonymous function out and assign it to the onclick (almost as if I just typed out the anonymous function right at the onclick)
here is where I call the function:
var transTypeHolder;
$("input[name='transType']").click(function () {
var tabLength = $('#SNToAddList tbody tr').length;
if (tabLength == 0) {
var selection = $(this).attr("id");
serialAllowableCheck(selection);
resetSerialNumberCanvasAndHide();
$("#Location").val("");
$("#SerialNumber").val("");
}
else {
transTypeHolder = $(this).val();
var confirm = function () {
var $radios = $('input:radio[name=transType]');
$radios.filter('[value='+transTypeHolder+']').prop('checked', true);
resetSerialNumberCanvasAndHide();
$('#Location').val('');
$('#SerialNumber').val('');
};
var cancel = function () {};
confirmMessageBox("This is a test", cancel, confirm);
return false;
}
});
Is there a way to some how pass a variable to the anonymous function without using the global variable I have as, "transTypeHolder" ?
Before I get the, "Why are you doing it this way??" response; Javascript isn't a strong language of mine, as I am using ASP.NET MVC4. I haven't had a chance to sit down and learn Javascript in detail and I sort of picked it up and search what I need. So if there is a better way of tackling this, I am open for constructive criticism.
Don't make event handler assignments in HTML at all. If you want people to be able to supply their own functions for canceling and confirming use on:
function confirmMessageBox(msg, cancelFunc, confirmFunc) {
var html = ' <div class="container"><div class="modal fade" id="ConfirmMsgModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Confirmation Needed</h4></div><div class="locationTableCanvas"><div class="modal-body"><p>' + msg + '</p></div></div><div class="modal-footer"><table><tr><td><button type="button" class="btn btn-default cancel" data-dismiss="modal">Cancel</button></td><td><button type="button" class="btn btn-default confirm" data-dismiss="modal">Confirm</button></td></tr></table></div></div></div></div></div>';
$("#confirmMsgContainer").html(html);
$("#confirmMsgContainer").off('click', '.confirm').on('click', '.confirm', confirmFunc);
$("#confirmMsgContainer").off('click', '.cancel').on('click', '.cancel', cancelFunc);
$('#ConfirmMsgModal').modal('show');
}
Note that I've edited the HTML you're using to remove the onclicks and added a class to each button. I'm also using off to be sure any previously added event handlers are removed.
As far as passing the variable to the confirm function without using a global, use a closure:
var transTypeHolder = $(this).val();
var confirm = (function (typeHolder) {
return function () {
var $radios = $('input:radio[name=transType]');
$radios.filter('[value='+typeHolder+']').prop('checked', true);
resetSerialNumberCanvasAndHide();
$('#Location').val('');
$('#SerialNumber').val('');
};
})(transTypeHolder);
That tells JavaScript to create a function, which returns a function that does what you want it to do. That "function creator" takes in the variable you want to keep around, allowing it to be used elsewhere.
Now, I haven't tested this, so you may have some debugging in your future, but hopefully it gives you a jumping-off point.
You should be able to do it by having the function being acessible from global context under a generated name (which can be multiple if you have more than one instance of the box), like so:
function confirmMessageBox(msg, cancelFunc, confirmFunc) {
window['generatedCancelFunctionName1'] = cancelFunc;
window['generatedConfirmFunctionName1'] = confirmFunc;
var html = ' <div class="container"><div class="modal fade" id="ConfirmMsgModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Confirmation Needed</h4></div><div class="locationTableCanvas"><div class="modal-body"><p>' + msg + '</p></div></div><div class="modal-footer"><table><tr><td><button type="button" class="btn btn-default" data-dismiss="modal" onclick = "generatedCancelFunctionName1()">Cancel</button></td><td><button type="button" class="btn btn-default" data-dismiss="modal" onclick = "generatedConfirmFunctionName1()">Confirm</button></td></tr></table></div></div></div></div></div>';
$("#confirmMsgContainer").html(html);
$('#ConfirmMsgModal').modal('show');
}
This way you are not obliged to expose the function code. You can also set an id attribute to the element and set a jquery click() function like in the second part (but you would need the html to be created before you set the click)
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
JavaScript not being called in inline event handler
Trying to build a javascript based like/dislike system using AJAX to perform the actions. The like and dislike functions are named "likeit" and "dislikeit".
HTML:
<a class="btn" data-toggle="tooltip" title="I like this." id="like" onclick="likeit('abc123');"><i class="icon-thumbs-up"></i></a>
<a class="btn" data-toggle="tooltip" title="I didn't like this." id="dislike" onclick="dislikeit('abc123');"><i class="icon-thumbs-down"></i></a>
JS:
$(document).ready(function() {
"use strict";
(function likeit(id) {
$.post("likeDislike.php", {likeID:id}, function(data) {
alert(data);
// Nothing to be displayed.
});
});
(function dislikeit(id) {
});
});
The error I'm getting in Google Chrome's Inspect Element is:
Uncaught ReferenceError: likeit is not defined
Uncaught ReferenceError: dislikeit is not defined
Yet, they are defined right there.
Your onclick=".." stuff (which you shouldn't use anyway) can only access the global scope. Your functions are defined in the scope of the document.ready callback function.
The proper solution is registering your handlers using JavaScript instead of inline events.
$(document).ready(function() {
"use strict";
function likeit(id) { ... }
function dislikeit(id) { ... }
var funcMap = {
'like': likeit,
'dislike': dislikeit
};
$('.btn').on('click', function(e) {
e.preventDefault();
var action = $(this).data('action');
var id = $(this).data('id');
var func = funcMap[action];
if(func) {
func.call(this, id);
}
})
});
Your HTML also needs some modifications:
<a class="btn" data-toggle="tooltip" title="I like this." id="like" data-id="abc123" data-action="like"><i class="icon-thumbs-up"></i></a>
<a class="btn" data-toggle="tooltip" title="I didn't like this." id="dislike" data-id="abc123" data-action="dislike"><i class="icon-thumbs-down"></i></a>
try this
//make sure jquery library loaded here
<a class="btn" data-toggle="tooltip" title="I like this." id="like" onclick="likeit('abc123');"><i class="icon-thumbs-up"></i></a>
<a class="btn" data-toggle="tooltip" title="I didn't like this." id="dislike" onclick="dislikeit('abc123');"><i class="icon-thumbs-down"></i></a>
<script type="text/javascript">
function likeit(id){
$.post("likeDislike.php", {likeID:id}, function(data) {
alert(data);
// Nothing to be displayed.
});
}
function dislikeit(id) {
}
</script>