I tried several codes but still, it's not working.
$(".chatboxtextarea").on('keypress', function(e){
if(e.keyCode == 13 && !e.shiftKey){
$('#file_name #fileLoader').show();
console.log('loader div triggered!');
if($.trim($(this).val()).length > 0){
if ((entr === false) && (submt === false)) {
sendMessageClient();
entr = true;
}
}else{
$(this).focus();
}
}
});
If you want to prevent the creating of a new line from happening you can use the following code:
$("textarea").keydown(function(e){
// Enter was pressed without shift key
if (e.keyCode == 13 && !e.shiftKey)
{
// prevent default behavior
e.preventDefault();
}
});
(Copy paste from here)
This will prevent the default behaviour from happening when pressing enter (but not pressing shift at the same time) inside a textarea.
Also, this jsFiddle is mentioned in the answer.
Related
I am trying to have a div show if an option is selected using the Select2 plug in.
I tried using the following code but it does not work:
$(document).ready(function() {
var h = $(".shipment-details--other-description");
$("#shipment-details-select-pacakage-types").change(function() {
if (this.checked && this.value == "Other") {
h.show();
} else {
h.hide();
}
}).change()
});
The div is being hid but not being shown if the Other option is selected.
Is there a different way to do this with Select2?
Edit: Forgot to mention that this a multiple select field. Also, adjusted the code and took out the this.checked as that was for a check field.
try to create a new css class, is-hidden{ display:none;}
$(document).ready(function() {
var h = $(".shipment-details--other-description");
$("#shipment-details-select-pacakage-types").change(function() {
if (this.checked && this.value == "Other") {
h.addClass('is-hidden');
} else {
h.removeClass('is-hidden');
}
}).change()
});
I am just beginning with jquery mobile but have experience in jquery and javascript and I seem to be experiencing difficulties with things being refreshed, not loaded, or loaded in the DOM.
Basically I have a 2 page document that have binded tap and change events to each. On both page 1 and page 2 a tap event calls the same function which is already loaded in the head of the document. I am not having issues with the function not being called yet my issue lies within the function and it appears to relate to the loaded DOM.
Here is the function:
function changeStatus(e) {
fstatus=$("#"+e).prop('title');
sID=$("#"+e).attr('rel');
if (fstatus == 'Pass') {
fstatus = 'Fail';
$("#studentColor_"+sID).css("background-color","#FCD1C5").css("border-color","#900");
$("#studentList"+sID+"_link").css("background-color","#FCD1C5");
} else if (fstatus == '') {
fstatus = 'Pass';
$("#studentColor_"+sID).css("background-color","#C5FCC5").css("border-color","#248703");
$("#studentList"+sID+"_link").css("background-color","#C5FCC5");
} else if (fstatus == 'Fail') {
fstatus = '';
$("#studentColor_"+sID).css("background-color","#FFF").css("border-color","#FFF");
$("#studentList"+sID+"_link").css("background-color","#FFF");
}
$("#studentList"+sID+"_link").prop("title",fstatus);
$("#studentColor_"+sID).prop("title",fstatus);
}
Upon entering page 1 for the first time the tap event fires as normal and all the css styles are changed correctly. Moving to page 2 the event fires however none of the css styles work, yet it sets the title correctly. Move back to page 1 and now it behaves as it did on page 2.
So from what I understand.. on initial page load of 1, page 2 is not in the DOM so $("#studentList"+sID+"_link") does not exist yet the function works completely fine. Upon moving to page 2 $("#studentList"+sID+"_link") does exist and is visible, and $("#studentColor_"+sID) which was loaded in page 1 is still in the DOM. (this is not a single page app)
Is this correct?
If the error is occurring because one of those elements don't exist anymore then wouldn't it make sense that the function would not work correctly even on the initial page load of page 1? (since the element on page 2 hasn't ever been loaded)
Also it works completely fine on a browser yet when put on mobile is when the styles stop working.
It seems that the only thing that is messing up in the function is the css() call. I hope my explanation makes sense as it baffles me..
Thanks for any help.
Additional info as requested:
It is 2 HTML documents. Both generated with a bit of php.
Here is how the elements are generated on page 1: (of course I cut out the sql calls etc)
while($row = mysql_fetch_array($result))
{
if ($row['passFail'] == '') {
$completionStatus='';
} else if ($row['passFail'] == 'P') {
$completionStatus='Pass';
} else if ($row['passFail'] == 'F') {
$completionStatus='Fail';
}
if ($completionStatus=='Pass') {
$bordercolor="#248703";
$backgroundcolor='#C5FCC5';
} else if ($completionStatus=='Fail') {
$bordercolor="#900";
$backgroundcolor='#FCD1C5';
} else if ($completionStatus == '') {
$bordercolor="#CCC";
$backgroundcolor='#FFF';
}
echo '<div class="draggable" style="text-align:center; width:50px; position:relative; font-size:.7em; top:'.$row['studentY'].'px; left:'.$row['studentX'].'px;" title="'.$completionStatus.'" rel="'.$row['ID'].'" id="student_'.$row['ID'].'"><div class="round shadow draggable_student" id="studentColor_'.$row['ID'].'" style="position: relative; background-color:'.$backgroundcolor.'; border:1px solid '.$bordercolor.'; margin-left:auto; margin-right:auto; margin-bottom:3px; width:40px; height:35px; padding:0px; font-weight:bold; text-align:center; padding-top:5px; vertical-align:middle; cursor:pointer;" title="'.$completionStatus.'"></div>'.$row[$_SESSION['student_identifier']].'</div>';
}
Here is how they are loaded into page 2:
while($row = mysql_fetch_array($result))
{
if ($row['passFail'] == '') {
$completionStatus='';
} else if ($row['passFail'] == 'P') {
$completionStatus='Pass';
} else if ($row['passFail'] == 'F') {
$completionStatus='Fail';
}
if ($completionStatus=='Pass') {
$bordercolor="#248703";
$backgroundcolor='background-color:#C5FCC5;';
} else if ($completionStatus=='Fail') {
$bordercolor="#900";
$backgroundcolor='background-color:#FCD1C5;';
} else if ($completionStatus == '') {
$bordercolor="#CCC";
$backgroundcolor='background-color:#FFF;';
}
if ($completionStatus == '') {
$readonly=' readonly';
} else {
$readonly='';
}
if ($row['asID']=='') {
$cc++;
$row['asID']=time()+$cc;
}
echo '<li><table cellpadding="0" cellspacing="0" width="100%"><tr><td class="student_infoLink" id="student'.$row['ID'].'_td" title="'.$completionStatus.'" rel="'.$row['ID'].'">'.$row['student_firstName'].' '.$row['student_lastName'].'</td><td align="right" width="10%"><input type="text" placeholder="Score" rel="'.$row['asID'].'" id="student'.$row['ID'].'_score" value="'.$row['score'].'" class="updateOnChange"'.$readonly.'><div style="padding:13px; text-align:center; display:none;"><img src="preloader.gif" width="56" height="21" border="0" /></div></td></tr></table>Edit Student</li>';
}
Please disregard all the inline styles as most will be removed once I get this fixed up.
Listeners being bound:
$(document).on('pageinit', function () {
$(function () {
function tapHandler(event) {
changeStatus($(this).attr("id"));
}
$(".student_infoLink").unbind("tap");
$(".draggable").unbind("tap");
$(".draggable").bind("tap", tapHandler);
$(".student_infoLink").bind("tap", tapHandler);
});
});
Workaround:
I am able to work around this issue with the following... by removing the call to the ID and searching off class. See below. I still would be appreciative of any help as to why the ID calls would not work. Much thanks to Omar for the help!
function changeStatus(e) {
fstatus=$(e).prop('title');
sID=$(e).attr('rel');
if (fstatus == 'Pass') {
fstatus = 'Fail';
$(e).find(".draggable_student").css("background-color","#FCD1C5").css("border-color","#900");
$("#studentList"+sID+"_link").css("background-color","#FCD1C5");
} else if (fstatus == '') {
fstatus = 'Pass';
$(e).find(".draggable_student").css("background-color","#C5FCC5").css("border-color","#248703");
$("#studentList"+sID+"_link").css("background-color","#C5FCC5");
} else if (fstatus == 'Fail') {
fstatus = '';
$(e).find(".draggable_student").css("background-color","#FFF").css("border-color","#FFF");
$("#studentList"+sID+"_link").css("background-color","#FFF");
}
$("#student"+sID+"_td").prop("title",fstatus);
$(e).prop("title",fstatus);
}
$(document).on('pageinit', function(e) {
console.log("pageinit is fired");
var pagecreated = e.target;
function tapHandler( event ){
changeStatus($(this));
}
$(".student_infoLink", pagecreated).unbind("tap");
$(".draggable", pagecreated).unbind("tap");
$(".draggable", pagecreated).bind("tap", tapHandler);
$(".student_infoLink", pagecreated).bind("tap", tapHandler);
});
I assume now that this works that the calling the ID was the issue... Any reasons why?
Quick, short answer... use classes instead of id when targeting an element. With the DOM loading multiple pages, selecting on an ID can get a bit whacky. See workaround above in edited post.
I know this has been asked before but I can't get any of he examples to work.
Getting the slide transition to work where you have all the pages as separate html files seems very difficult to do? How does the next/prev part of the script know which of the other files is next?
For example, index.html should slide to 01_welcome.html - but how does it know that it's not 02_funds.html?
Thanks for any enlightenment you can give. Below is the script ( courtesy of a previous answer) I've been trying to implement.
$('div.ui-page').live("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').live("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
}, true, true);
}
});
The code in your OP works well in Multi-Page Model environment, since all pages (div's) are present in DOM. For Single Page Model, you will need to tweak the code a bit as each page is an individual file. Another note, .live() is deprecated, use .on() instead.
The simplest solution is to add custom attributes to each page div, e.g.
<div data-role="page" data-next-page="services" data-prev-page="about">
Retrieve the values of the custom attributes on swipe and then load the target page.
$(document).on("swipeleft swiperight", function (event) {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
nextPage = activePage.data("next-page"),
prevPage = activePage.data("prev-page");
/* move to next page */
if (event.type == "swipeleft" && nextPage) {
$.mobile.pageContainer.pagecontainer("change", nextPage + ".html");
}
/* move to previous page */
if (event.type == "swiperight" && prevPage) {
$.mobile.pageContainer.pagecontainer("change", prevPage + ".html", {
reverse: true
});
}
});
I have a simple button that needs to be pressed (for accessibility reasons on desktop) by using the enter or spacebar keys. The following is what I have:
$("#return-home").on("tap", function () {
window.location.reload();
});
In addition to "tap" I need an event for enter and spacebar.
$("#return-home").on("tap keypress", function (e) {
if(e.type == "tap" || e.which == "13" || e.which == "32") {
window.location.reload();
}
});
I have a FB.getLoginStatus function that is there to bypass the login function if the user has already authorized the app:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
userID = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
$.mobile.pageContainer.pagecontainer('change' , '#homepage');
navigator.geolocation.getCurrentPosition(onSuccess, onError);
} else if (response.status === 'not_authorized') {
$.mobile.pageContainer.pagecontainer('change' , '#login');
} else {
$.mobile.pageContainer.pagecontainer('change' , '#login');
}
});
It works in that it checks the login status, but it quickly flashes the login screen before it jumps to the home screen. Is there a way I can completely avoid flashing the login screen and just load the home screen if the user is connected?
Yes there's a working solution:
$(document).on('pagebeforechange', function(e, data){
var to = data.toPage,
from = data.options.fromPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (from) from = '#' + from.attr('id');
if (from === '#index' && to === '#second') {
alert('Can not transition from #index to #second!');
e.preventDefault();
e.stopPropagation();
// remove active status on a button, if transition was triggered with a button
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
}
}
});
What you need to do here is add another layer of checking to this line:
if (from === '#index' && to === '#second') {
All you need to do is check if user has authorized through Facebook and redirect him programmatically using function changePage().
Read more about it here.
Update
I forgot, this example may not work in your case because if you're checking it in the beginning you will not have destination page because you are here to determinate which page is first: login page or main page.
This code will help you in this case:
$(document).on('pagebeforechange', function(e, data){
var to = data.toPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (to === '#second') {
alert('Can not transition the page #second!');
e.preventDefault();
e.stopPropagation();
// remove active status on a button, if transition was triggered with a button
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
}
}
});