I have been trying to display value of a datepicker in a div and two texboxes. I was able to do it in a normal PHP file however when i try to do it in a wordpress website. It is not happening The jquery code i am using is as follows:
jQuery(function() {
jQuery('#ui-datepicker-div').datepicker({
altField: '#wc_order_field_2563', //setting alternate field
onSelect: function(dateText, inst) {
$('#show_pickupdate_input').val(dateText);
$('#pickupdate_text').text(dateText);
//alert(dateText);
}
});
});
If you want to see this in action you an see it on twomoms.kitchen checkout page. However this does not seem to work no matter what I do.
Please let me know what is it that i am doing wrong :(
the issue got resolved by changing the code above with the following code below. This modification was done as the datepicker was added using a plugin that adds any fields as required. Code below changes div and textbox using the change in other textbox.
jQuery(function() {
jQuery('#wc_order_field_2563').datepicker({
onSelect: function(dateText, inst) {
$('#show_pickupdate_input').val(dateText);
$('#pickupdate_text').text(dateText);
//alert(dateText);
}
});
});
Related
I am new for MeteorJs. Some one could you please provide info for form area text tag.I tried to add text area and tried to implement using with event.
I got answer from refer few docs.. below is the correct one
html:
JS:
Template.body.events({
"submit .new-task": function (event) {
// Prevent default browser form submit
event.preventDefault();
var message=event.target.newMessage.value;
anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});
I am using TextExtJs for an autocomplete feature where you start typing and the dropdown of suggestions appears below the text input and you can select a suggested option with arrow keys or mouse.
Everything is working great except that I am trying to perform a function after the user selects one of the suggestions. There is a hideDropdown event which I think is the proper event to use for this. Unfortunately I'm not understanding how to do this, this is what I have tried:
$('#usearch').textext({
plugins : 'autocomplete ajax',
ajax : {
url : 'usersuggest.php',
dataType : 'json',
cacheResults : true
},
autocomplete : {
onHideDropdown : function(){
alert('A happened');
},
hideDropdown : function(){
alert('B happened');
}
},
onHideDropdown : function(){
alert('C happened');
},
hideDropdown : function(){
alert('D happened');
}
});
None of these functions with the alert actually ever run. They do not interfere with the suggestion piece of it. How do I attach a callback to this event?
I'm facing the same problem here....
Unfortunately there is no proper solution. The manual is as rudimental as the examples provided on the plugin page.
I managed to bind a kind of "onAddingTag" event, refer to this: http://textextjs.com/manual/plugins/tags.html#istagallowed
$('#textarea').textext().bind('isTagAllowed', function(e, data) {
var valueAdded = data.tag;
data.result = true; //needs to be done, since we're abusing this event
};
Despite the fact that this may help with this issue, your next problem would be: when does the user remove a tag?
Finally I ended up, using another autocomplete library.
I am trying to add a link to the colorbox interface as it is created. It will eventually link to the currently displayed image file but for now I just want to get the console.log to work. It adds the link correctly (#print-one) but I can't get a function to run when the link is clicked. Any help would be much appreciated!
$(document).bind('cbox_complete', function () {
// Show close button with a delay.
$('#cboxClose').css('opacity', 1);
// Add Print Button
if ($('#print-one').length ) {
// Do Nothing
}else {
$('#cboxNext').after('Print');
}
});
$('#print-one').click(function() {
console.log('Works');
});
This is all wrapped inside the $(document).ready function. I just can't get the console log to work when the link is clicked. I have been beating my head against a wall trying to figure it out. Thanks for any help!
You need to delegate the event.
$(document).on('click', '#print-one', function(){});
It seems that the link is added just after cbox is initialized, which may not be ready when the compiler gets to the click binding function a few lines below.
Try this:
...
// Add Print Button
if ($('#print-one').length ) {
// Do Nothing
}else {
$('Print').insertAfter('#cboxNext').click(function() {
console.log('Works');
});
}
Thanks for reading. I have some codes on my wordpress site, the first one adds an overlay over an image with a color, the article title and a link to go to the project. The second code adds an ajax pagination using jQuery.
The thing is that i have my projects with images and the jquery overlay owrking perfect, but when they click on the previous projects link that calls the ajax pagination, the jquery overlay stops working.
I have been trying different options, but maybe i'm not on the correct way to solve it. Does anyone has a clue?
Thanks in advance.
The codes:
// PORTFOLIO HOVER EFFECT
jQuery('ul.portfolio-thumbs li').hover(function(){
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
});
// POSTS NAVIGATION
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
I've found the solution in the same day and #BrockAdams helped me with the doubts. I'm putting here the code because it can be helpful for someone.
jQuery('ul.portfolio-thumbs li').live('hover', function(event){
if (event.type == 'mouseenter') {
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
} else {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
}
});
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
You can post answers to your own question.
And, you needed to use live()Doc on the hover, because the pagination presumably loads in new portfolio-thumbs lis.
Without the live(), these new lis would have no events attached to them (unless you re-called jQuery('ul.portfolio-thumbs li').hover after every pagination event).
Live is easier, and avoids the pitfall of having multiple copies of the same event-listener attached to an element.
And, yes, you can use both live() calls (or more) on the same page without problems.