I have tried these options:
jQuery( document ).ready(function() {
jQuery("#adv_actions_shortcode").val("verhuur");
});
and
jQuery( document ).ready(function() {
jQuery("#adv_actions_shortcode option[value=verhuur]").prop("selected", true);
});
The url is http://makelaarcorrect.test.hetkanbeteronline.nl/woningaanbod-verhuur/
I must be forgetting something, anyone can help me out?
You're using a non-standard dropdown menu. This could be a plugin or something else. You could trigger a click on the correct element by using jQuery instead by using the following code.
jQuery("#adv_actions_shortcode").parent().find('[data-value="verkoop"]').trigger('click');
Related
I have a conflict with my javascript which is causing elements not to fadein. I have a button set to fadein after 10 seconds which works fine when I remove my javascript that I'm using for something else.
Can anyone help me figure out what the conflict might be?
You can see the test page I'm working on here: https://training.handcraftedbusinessfilms.com/test-fade-in/
I've currently removed the javascript that is causing the conflict but you can see it below.
<script type="text/javascript">
// Custom code by James
jQuery( document ).ready( function ( jQuery ) {
// binds to the plugin's function
jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard() );
// triggers the change to default option
jQuery( "input[id^=gform_payment_method_card_]" ).click();
console.log("Hello James");
});
</script>
Bro, your script is correct, but I see that you have 2 calls of "document.ready" in different parts of the html, so just need use once. I have merged and tested the script in the "head" tag and it works:
<script>
$(document).ready(function() {
$("div.button").fadeIn(2000);
//By James
//binds to the plugin's function
jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard );
//triggers the change to default option
jQuery( "input[id^=gform_payment_method_card_]" ).click();
console.log("Hello James");
});
</script>
The jquery was being called before it was defined in the header b/c the scripts were injected into the header via the theme and we couldn't control exactly the order of the scripts.
The solution was to create a site specific plugin that set a function to hold off on calling any jquery before the jquery was defined.
I have an application that has many tabs, apart from the first tab - all others are loaded via Ajax.
The tab content all loads correctly.
However if I have a jQuery widget in a (ajax loaded) tab, the widget does not work.
I attempted to use:
$(document).on('click', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
But the datepicker does not display.
Confusingly (for me):
$(document).on('click', '#dateOfBirth', function() {
alert('This works properly');
});
Works properly! The alert displays when the date field is "clicked".
And of course if I have a simple page without the tabs / ajax content - the datepicker displays as expected when the date field is clicked.
I am using the jQuery 2.2.0 and
jQuery UI 1.12.0 with the "redmond" theme / CSS.
The view html follows the following;
<div class = "emr-bodycontent">
<div id="tabs">
<ul>
<li>Patient Details</li>
<li>Carers</li>
...
...
Here is the JS used for the TABS;
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"There seems to be an error retrieving the data you requested."
);
});
}
});
Instead of using click use focus and datepicker will work . Assumes that the element id is valid and is an input
$(document).on('focus', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
For any other plugins inside tabs you can use load callback of tabs ... see api docs
DEMO
I will suggest you to setup the datepicker() after Ajax content loaded, do not use click event. Because the initiate call of $('#dateOfBirth').datepicker() is to set up the datepicker, you may need to click again to trigger the calendar.
Or, you can try to manually trigger it right after set.
$(document).on('click', '#dateOfBirth', function() {
$(this).datepicker();
$(this).datepicker("show");
});
Firstly, thanks very much for the answers / comments.
Both answers work successfully.
Kieran's worked straight away as it was manually triggering the event.
Charlie's worked, too - but only after I clicked several times.
Though after fixing my underlying issue, Charlie's worked straight away, too.
The underlying issue was indeed a duplicate ID.
(thanks for the prompt to check, Charlie).
Because the TAB contents are their own individual forms / pages - I only ever worried about making ID's unique within individual TABs.
After ensuring that ALL IDs are unique, the widget works correctly / as expected.
How can I load a div after moving the focus into an input field? That means when my cursor is placed in an input field, I want to load a div just below the input field. Please help me, I'm newbie in jQuery and don't know exactly how can I do this.
That's fairly straightfoward with jQuery:
$('#myInput').on('focus', function(){
$(this).after('<div />').html('whatever goes in the div');
})
...though, where you get the contents for the div from is another issue. Do you need to load that from the server-side?
Try this:
$( "#target" ).focus(function() {
$( this ).after( "<div>Test</div>" );
});
I'm using an Ajax call to get a list of checkboxes to appear in a panel after the user presses login. The data loads in fine but there is no JQM styling on it, its only the default browser styling. The id of the checklist is filterlist, and the div where I want to put it is called test1.
javascript:
$(document).on('click', '#loginbutton', function() {
$( "#test1" ).load( "test.html #filterlist" );
});
Try using
$(document).on('click', '#loginbutton', function() {
$( "#test1" ).load( "test.html #filterlist" );
$( "#test1" ).trigger ('create');
});
this will apply the jquery mobile styling to the newly created elements, if it is loading a page you might try 'pagecreate' instead
I'm using the http://docs.jquery.com/UI/Dialog and http://docs.jquery.com/UI/Autocomplete with JQuery 1.7.2 and JQuery-UI 1.8.18.
There is a form with a text box, which will fire the autocomplete fine when loaded in the page as normal. It's nice and simple!
(function() {
jQuery(function($) {
return $("#type").autocomplete({
source: "/auto-suggest/supplies",
minLength: 2
});
});
}).call(this);
However, if the form is rendered via a dialog the autocomplete does not fire (no UI changes, and the server shows no access to the source url). I'm assuming this is because the input field has not been rendered at document load. So, I tried to use dialog's create event to assign the autocomplete, by passing the function to it as a callback. Again, the autocomplete does not fire.
I'm mystified as to how to get this to work. I would be tempted to get the dialog to create and then hide on document load, but in this instance there could be several instances of the dialog as it's related to table data.
Any help with this will be much appreciated.
Try using open event - this will ensure that the DOM elements are ready
$( ".selector" ).bind( "dialogopen", function(event, ui) {
$("#type").autocomplete({
source: "/auto-suggest/supplies",
minLength: 2
});
});
You can even get the values and then in the success call dialog
$.get('/auto-suggest/supplies', function(data) {
//call dialog here
});
Try delegate
Delegate autocomplete
BEST SOLUTION IS WROTE BY: ManseUK