In Jquery mobile-1.1.1 pagebeforechange, pagebeforeshow events not fired second time call of $mobile.changepage.
From Home page:
function scan() {
window.plugins.barcodeScanner.scan(function(result) {
alert("Barcode-->"+result.text);
barcode=result.text;
$.mobile.changePage("scan.html",{reloadPage:true,transition: "none"});
}, function(error) {
alert("Scanning failed: " + error);
});
}
Page Load:
$("#scan_page").live("pagebeforeshow",function(event){
alert("Scan page Init");
loadScannedItems();
});
function loadScannedItems()
{
//append scanned items to list
// called Scan() again
}
pagebeforeshow event fired first time the page loads,again I go to scan function call the changePage, but pagebeforeshow not fired. What is the problem in this code?
Also created button with data-role="button" dynamically. But still it displayed as link?
Related
I'm opening my chat window programtically using ToggleChatVisibility which works great, but it does not fire the relevent FlexWebChat.Action
<script>
const operatingHoursCheckMsg = async function () {
Twilio.FlexWebChat.Actions.on("afterToggleChatVisibility", (payload) => {
console.log('Not Working');
});
}
await initateWebChat.init();
}
function Test() {
operatingHoursCheckMsg();
Twilio.FlexWebChat.Actions.invokeAction("ToggleChatVisibility");
}
</script>
<button type="button" onclick="Test()">Click to open and close chat window</button>
the afterToggleChatVisibility event fires if I close and reopen the chat using the chat box ui, but not if I click my button.
How can I trigger this event properly?
I think you have a race condition causing this issue. You defined the operatingHoursCheckMsg function as async even though there isn't an asynchronous call involved (though maybe there is in your full script) but in your Test function you do not wait for the promise to resolve before invoking the action. I think this means that JavaScript placed the promise on a queue to be handled asynchronously by the event loop, and then ran the next synchronous line of code. So you invoke the action before the event listener is registered.
It also looks as though you want to use the button to continue toggling the chat open and closed, so you should probably not be attaching a new listener every time the button is clicked.
I'd recommend you set up the one listener after you have initiated the webchat, like this:
<script>
const operatingHoursCheckMsg = async function () {
// Do operating hours check
}
await initateWebChat.init();
Twilio.FlexWebChat.Actions.on("afterToggleChatVisibility", (payload) => {
console.log('Chat toggled!');
});
}
async function Test() {
await operatingHoursCheckMsg();
Twilio.FlexWebChat.Actions.invokeAction("ToggleChatVisibility");
}
</script>
<button type="button" onclick="Test()">Click to open and close chat window</button>
I am opening a bootbox dialog box when the user click inside select-2 input box using the following code
$("#categoryfinder").on("select2-open", function () {
bootbox.confirm("Are you sure?", function (result) {
Example.show("Confirm result: " + result);
});
});
Once it is opened, the popup window is not active and I have to click twice to close or to trigger any event on the popup
Please let me know if there is any solution for this.
EDIT: when I click inside 1, the popup is not active at 1,2,3, I have to click once to make it active.
I fixed this issue by doing the following changes
$("#allergenfinder").on("select2-opening", function (e) {
e.preventDefault();
excludeAllergenPrompt();
});
When I click the back button on the browser, my popup closes but the listener events brought me back to the previous page, I want in my function an element that closes the popup without me go back. While keeping the history listener to other pages (don't stop in the whole of the application)
$(document).on("pageshow", "#member", function (){
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
$("#mypopup").popup("close");
}
});
});
I try with
$(document).bind("mobileinit", function () {
$.mobile.hashListeningEnabled = false;
});
But don't working
I have a telerik grid that I am using to do a post to the server when the user double click on a row. It appears to work fine until I place an alert in the code and notice some odd behaviors. When I double click on a row for the first time, the alert comes up twice and continues to display twice the number of times that I click. I mean - it comes up twice the first time, 4 times the second time, 6 times the third times, and it continues on. Below is the scripts that I am using to call the grid.
function DisplayStudent(e) {
if (IsStudentGradeAvailable == "True") {
$('tr', this).live('dblclick', function () {
var row = e.row;
var StudentId= row.cells[0].innerHTML;
var StudentGrade= row.cells[1].innerHTML;
var data = { "StudentId= ": StudentId= , "StudentGrade": StudentGrade };
var url = '#Url.Action("Student", "StudentGrade")';
$.ajax({
url: url,
type: 'post',
dataType: 'text',
data: data,
success: function (data) {
alert("Success");
},
error: function (error) {
alert("Error");
}
});
});
}
}
Live attaches an event handler. You want one event handler, so you should call the live() method only once. Given your code, this implies that DisplayStudent() should only be called once.
If DisplayStudent() is called n times, you will have attached n event handlers, each of which alerts you when you click.
I have a page that is created completely using Knockout. In one of the templates, clicking on a link will display a JQuery Datepicker control to select a date. Upon selecting the date, a function executes using the selected date and the Datepicker closes. That much works just fine.
It can take several seconds from when someone selects a date until the Datepicker closes. This is due to a function that is called (LoadAppointmentTimeSlots) which needs to run synchronously and can take a while to do what it does. To address this, I would like a DIV to appear that provides feedback to the user that the system is working ("#loading").
THE PROBLEM is that the DIV does not appear until after the LoadAppointmentTimeSlots function executes (by which time the DIV gets hidden again). I have experimented with setTimeout in several ways, but nothing has worked.
Below is the "offending" code:
var SchedulingViewModel = function () {
var self = this;
...
self.Date_OnClick = function () {
var selectedDate;
$("#calendarPopup").append('<div id="datepicker" />');
$("#datepicker").datepicker({
dateformat: 'mm-dd-yy',
changeMonth: true,
changeYear: true,
setDate: new Date(),
minDate: 0,
maxDate: self.SelectedRFVInterval() - 1,
onSelect: function (datetext, inst) {
selectedDate = datetext;
$("#loading").show();
self.LoadAppointmentTimeSlots(datetext); // function within view model that uses $AJAX in sync mode to return time slot data
$("#loading").hide();
$('#calendarPopup').dialog('close');
}
});
};
...
}
The difficulty you are running into is because show() is executed asynchronously, and since javascript is executed in a single thread, that means they have to wait until all synchronous code (such as LoadAppointmentTimeSlots) is done.
To get your desired behaviour, put everything after the show() call into the callback for the show command. That way LoadAppointmentTimeSlots won't execute until the show() call is done. Here is how:
// ... other code
$("#loading").show(function() {
self.LoadAppointmentTimeSlots(datetext);
$("#loading").hide();
$('#calendarPopup').dialog('close');
});
However, it might be better to change your ajax call in LoadAppointmentTimeSlots to be asynchronous and move the hide() and dialog('close') calls to the callback of the ajax call. This allows javascript to keep doing other things while you are waiting for LoadAppointmentTimeSlots to finish. That might look more like this:
// ... other code
$("#loading").show()
self.LoadAppointmentTimeSlots(datetext, function() {
$("#loading").hide();
$('#calendarPopup').dialog('close');
});
// ... more code
function LoadAppointmentTimeSlots(datetext, alwaysCallback) {
// Prepare request details
$.ajax( "/myendpoint?param=foo" )
.done(function(data) { alert("success"); }) // do something with data
.fail(function() { alert("error"); })
.always(alwaysCallback); // called on both success and failure of ajax call
}