QUESTION ANSWERED HERE -- Needed to check for load-success.bs.table to wait for the table to fully load
wait till bootstrapTable is fully loaded before doing something
I have a weird problem with Bootstrap-Table. I'm rendering it as follows, and then I need to attach some jQuery handlers to the generated fields.
function createTable(){
$('#myTable').bootstrapTable('refresh', {
url: 'loadRequests'
});
// After the construction of the Bootstrap-Table, the dynamically-rendered fields (e.g. checkboxes) are now available
// Attach a handler to de-select the 'All' checkbox at the top if an individual checkbox is unchecked
$('.requestor_checkbox').on('click', function(e) {
if (!$(this).is(':checked')) {
//de-select the All checkbox at the top
$('#ckbCheckAll').prop('checked', false);
}
});
}
One of the fields generated by the Bootstrap-Table (via Data-Formatter) is checkboxes with the CSS style 'requestor_checkbox'. It happens here, note the data-formatter that will output individual checkboxes; and the header will have the 'All' checkbox:
<th class="numeric" data-formatter="checkboxFormatter">
<input type="checkbox" name="ckbCheckAll" id="ckbCheckAll" class="btn btn-primary" value="Select all">
</th>
JS handler for Data-Formatter
function checkboxFormatter(id, row, index) {
return '<input type="checkbox" class="requestor_checkbox checkBoxClass" value="' + row.id + '">';
}
As you can see in the top section of the code, I need to attach a jQuery event handler to the just-generated checkboxes. The weird thing is, there is a delay, and the checkboxes aren't found.
But if I set my event binder to execute 1 seconds later after a timeout, then it does work. The following works:
// 1. Render Bootstrap-Table
$('#myTable').bootstrapTable('refresh', {
url: 'loaRequests?requestId=' + requestId
});
// 2. 1-SEC DELAY: After the construction of the Bootstrap-Table, the dynamically-rendered fields (e.g. checkboxes) are now available
// Attach a handler to de-select the 'All' checkbox at the top if an individual checkbox is unchecked
setTimeout(function (){
$('.requestor_checkbox').on('click', function(e) {
if (!$(this).is(':checked')) {
//de-select the All checkbox at the top
$('#ckbCheckAll').prop('checked', false);
}
});
}, 1000);
Related
Assuming the following:
I have an HTML page that loads a template.
The template name is scheduleTable.
The template desrcribes an HTMLTable, with (of course) various trs and tds, with a particular td that uses a CSS class named "tddetails1"
If I want to respond with JavaScript to a right-click on that "tddetails1" element, I would think I would need code something like this in the js file:
Template.scheduleTable.events({
"right-click .tddetails1": function (event) {
// do something
});
But what event can I use? There is no "right-click" event, and I don't want to capture "regular" (left) clicks. Am I doomed to use an html button in each td, and respond to their click events?
UPDATE
Yes, Christian's answer was "spot on"; this works:
HTML
<template name="tblExpenseDescription">
<table width="75%" border="1">
<tr>
<td width="200px"><strong>Description of Expense</strong></td>
<td class="rc1" >Date 1: <input type="date" id="date1" name="date1"/>
</td>
. . .
JavaScript
if (Meteor.isClient) {
Template.tblExpenseDescription.events({
"mousedown .rc1": function (event) {
if (event.button == 2) {
console.log('date1 was right-clicked');
}
}
});
}
Just use the mousedown event handler and check that event.button == 2:
Template.scheduleTable.events({
"mousedown .tddetails1": function (event) {
if (event.button == 2) {
// this code will run on right-click
// do something
}
}
});
EDIT:
To also prevent the context menu from popping up add:
"contextmenu .tddetails1": function (event) {
return false;
}
into your event handler object.
I'm developing a Qt program that contains an OpenStreetMap application as a HTML page and this page is able to access a database -via submitting an ajax form that contains the start and end dates of queries- in order to retrieve and visualize queries on the map. I would like to move this querying process to Qt from the HTML/Javascript part. So far I managed to interact with the browser via Qt but I still have a problem that is below:
1) The fetch queries button of Qt is clicked and an alert box is supposed to pop up saying that Ajax POST is failed -the database is not on my current laptop and I should be getting the error when I click either the HTML Browser window's fetch queries button or the Qt's fetch button-
2) But also, whenever I click the Fetch queries button of the HTML Browser, it displays the POST warning but also displays extra POST warning alert boxes depending on how many times I have clicked the Qt's Fetch queries button. -for example if I have clicked the Qt's fetch queries button 5 times in a row and then clicked the HTML window's fetch button once, I get 6 POST failed messages in a row-
The HTML code is like the following:
<form id="ajaxForm" action="index.php" method="post">
Start <input type="text" name = "date1" id = "datepicker" value = "2011-07-13" style = "width:70px">
<input type="text" name = "time1" id = "timepicker1" value = "00:00" style = "width:40px">
End <input type="text" name = "date2" id = "datepicker2" value = "2011-07-13" style = "width:70px">
<input type="text" name = "time2" id = "timepicker2" value = "00:01" style = "width:40px">
The post method of AJAX form is this:
<script type="text/javascript">
$(document).ready(function(){
// ajaxForm submit
$('#ajaxForm').submit(function() {
$.ajax({
type: 'POST',
url: 'heatQuery.php',
data: $(this).serialize(),
dataType: 'json',
success: function(response)
{
// update the points for heatmap layer
updateHeatMap(response);
},
error: function(errorMsg)
{
alert('Error in Ajax POST');
}
});
return false;
});
});
</script>
And finally, the Qt code that calls the function is this:
void MainWindow::onButtonClicked() // clicking the button in order to POST
{
//the QString a is the same ajax post function as declared above
QString a = "$(document).ready(function(){$('#ajaxForm').submit(function() {$.ajax({type: 'POST',url: 'heatQuery.php',data: $(this).serialize(),dataType: 'json',success: function(response){updateHeatMap(response);},error: function(errorMsg){alert('Error in Ajax POST');}});return false;});});";
this->view->page()->mainFrame()->evaluateJavaScript(a);
}
Any ideas on what is wrong here? Thanks.
I think I have got the problem. XMLHttpRequest loads your local file successfully, but it returns 0 in request.status, thats why error() gets fired from your jQuery code.
I ran following example code in QWebView..
var request = new XMLHttpRequest();
request.open('POST', 'file:///C:/hello.txt', true);
request.onreadystatechange = function(e) {
if(request.readyState == 4)
{
// 'responseText' will not be empty if file present..
alert("response text: " + request.responseText);
alert("status: " + request.status);
}
}
request.send();
Hope this helps..
How do I call a user-define function such as this one using the onClick attribute of a input button? More specifically what special steps must I take in JQuery and what would the HTML markup look like? Thanks
function simClick(keyCode) {
var e = jQuery.Event("keypress");
e.keyCode = 8;
$(document).trigger(e);
}
<input type="button" ID="delBtn" class="calcBtn" value="Del" onclick="???????" />
HTML
<input type="button" ID="delBtn" class="calcBtn" value="Del" />
Javascript in separate file
// When the DOM is ready
$(function() {
// Function that is executed w keypress or button click
doThis = function() {
// Stuff to do
}
// To do when element with ID delBtn is clicked
$("#delBtn").click(function() {
// Stuff to do when input is clicked
doThis();
});
// To do when key is pressed
$(document).keydown(function(event) {
// Stuff to do when key is pressed
// Can check which key was pressed here.
var code = (event.keyCode ? event.keyCode : event.which);
if(code == 8) { //Enter keycode
doThis();
}
});
});
There are many ways to attach a handler to when that button is clicked. Take a look at jQuery selectors.
You could also use the attribute equals selector
$("input[value='Del']")...... // For the input with a value of Del
I'm not sure what you quoted JS has to do with the input button, since it looks like you're trying to work with a keypress instead of a click in that function.... But the above jQuery is how you capture a click on that input button.
Take a look at, "Which key was pressed?"
I'm trying to prevent the user from clicking on more than one postback-causing element on the page. In other words, if they click the 'continue' submit button, they shouldn't be able to cause another postback before the original request comes back.
I've had a go with two versions of jQuery code. Neither does exactly what I want:
This version will disable all the postback elements, but in doing so, it stops the clicked element from firing. For the record, I don't think the .removeAttr('onclick') is really required, but leaving it out doesn't seem to change the behaviour.
$(function() {
$('a, :button, :submit').click(function() {
var elements = $('a, :button, :submit');
elements.attr('disabled', 'disabled').removeAttr('onclick');
});
});
This version disables all other postback elements, but it lets me reuse the same element that was clicked - I don't want to be able to hit the same button twice.
$(function() {
$('a, :button, :submit').click(function() {
var otherelements = $('a:not(#' + $(this).attr('id') + '), :button:not(#' + $(this).attr('id') + '), :submit:not(#' + $(this).attr('id') + ')');
elements.attr('disabled', 'disabled').removeAttr('onclick');
});
});
How can I prevent this behaviour?
I just tested your first approach without JQuery, and it worked fine, i.e. disabling the submit button didn't prevent the form submission.
<form method="get">
<input type="text" name="textfield" value="a" />
<input type="submit" onclick="this.disabled=true">
</form>
Maybe you want to double check is there is anything else, e.g. JQuery, going on?
Maybe you could put a flag or something that it could remember what button it was clicked and if that flag exist, you can remove the onclick event on that postback-causing element. But I think this cannot be done in client side scripting alone, since once the page is submitted, all client side elements and scripts are refreshed.
Perhaps instead of making this a click function make it onmouseup so it fires after the click event has occured.
Here's a final version that worked - just overriding the form submit event rather than looking at any individual elements.
var submitted = false;
$(function() {
$('form').bind('submit', function() {
if (!submitted) {
submitted = true;
return true;
} else {
return false;
}
});
});
Thanks all for your suggestions.
Having this div:
<div id="advSearchDialog" style="visibility:hidden;">
<xx:search ID="searchUC" runat="server" />
</div>
And a button:
<input type="button" id="btnAdvSearch" value="Search" />
I turn it into a jQuery dialog, where the button opens the dialog:
$(document).ready(function() {
$('#advSearchDialog').dialog({
autoOpen: false,
height: 500,
width: 600,
modal: true,
bgiframe: true,
title: 'Avanceret søgning',
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
$('#btnAdvSearch').click(function() {
$('#advSearchDialog').css('visibility', 'visible');
$('#advSearchDialog').dialog('open');
});
});
Using ASP.NET, I get a problem.
If I push some other button on the ASP.NET page (inside an update panel), and after that clicks the btnAdvSearch button, nothing happens. Why is that?
Thanks in advance
maybe the partial page refresh removes your click event, hard to say without seeing the whole page.
the solutions to that problem would be using jquery live events
http://docs.jquery.com/Events/live
hth
Check the emitted HTML using firebug or somthing similar and you will probably notice that your button is no longer inside the form tags and is at the end of the body tag.
In you're OK button callback you can use something like
dialogBox.appendTo($('#FormIdHere'));
dialogBox is a variable set as so
var dialogBox = $('#DialogDiv').dialog({ autoOpen: false });
This should add your button back into the form.
EDIT:
Here is a code snippet I've recently used (all the code below is fired within an onload function but reasonPostBack must be declared outside the onload function)
var button = $('input.rejectButton');
reasonPostBack = button.attr('onclick');
button.removeAttr('onclick');
var dialogBox = $('#ReasonDiv').dialog({ autoOpen: false, title: 'Please enter a reason', modal: true, bgiframe: true, buttons: { "Ok": function() {
if ($('input.reasonTextBox').val().length > 0) {
$(this).dialog('close');
dialogBox.appendTo($('#theform'));
reasonPostBack();
}
else
{
alert('You must enter a reason for rejection');
}
}
}
});
button.click(function() {
dialogBox.dialog('open');
return false;
});
First i take a reference to the .Net postback with
var reasonPostBack = button.attr('onclick');
and hold it for later then strip the click event from the button to stop the post back ocurring "automatically". I then build the dialog box and add an anonymous function for the OK button, this runs my code to test if there is anything in a text box, if there isn't it simply alerts the user otherwise it;
Closes the div
$(this).dialog('close');
Adds the div back inside the form tags ready for the post back
dialogBox.appendTo($('#theform'));
and then calls the original postback
reasonPostBack();
Finally the last bit of code
button.click(function() {
dialogBox.dialog('open');
return false;
});
adds our own event handler to the .Net button to open the dialog that was instantiated earlier.
HTH
OneSHOT