I am working on a project where I need Provinces and Districts of that specific province, everything works fine but when I want to use this form inside a Modal the district dropdown which is dependent on the province dropdown is not updating by livewire updatedFoo hook.
public function updatedProvince($value)
{
$this->districts = District::where('province_id', $value)->orderBy('name')->get();
}
the $province field is updating but this method never runs
note: it is working when I remove the popup modal
Related
I have recently learnt angular from udemy. I was trying to use this a custom checkbox in my angular app. The problem is not with the checkbox itself but the ui not getting updated on checkAll, uncheckAll after user interaction with an individual checkbox
My implementation on stackblitz
Things i have tried:
using timeout (i have used it to get autofocus working)
using ChangeDetectorRef detectChanges()
using template forms but tr/tbody won't render even if i wrap tbody in it
using reactive forms (not very sure if i did it correctly)
Steps to reproduce:
click on any checkbox but the first one.
click on the first checkbox checkAll, uncheckAll... It doesn't work on the checkbox clicked in the first step.
The checked attribute describes the default state of the field. Removing it will have no effect if the field has been interacted with (or if its checked property has already been modified). сhecked property can be modified by user interaction(click on checkbox)
You should be manipulating checked property instead since it represents the current state.
checkAll() {
const inputs = document.querySelectorAll<HTMLInputElement>('input[type=checkbox]');
inputs.forEach(input => input.checked = true)
}
uncheckAll() {
const inputs = document.querySelectorAll<HTMLInputElement>('input[type=checkbox]');
inputs.forEach(input => input.checked = false)
}
Forked Stackblitz
Note: this is not quite Angular way to work with form controls. You shouldn't be touching DOM directly in order to update control value
I'm trying to tweak the WordPress plugin https://github.com/algolia/algoliasearch-wordpress to suit our needs. What we want to be able to do is have a search result that will load the data up in the same page.
I have my WordPress posts and its data being indexed successfully. I have added a search box to the page, and autocomplete is being fired.
Out of the box, the WordPress plugin template wraps the result in an anchor tag and assigns it the URL of the found result. When clicked, this navigates you to that post. However, what I want to do is intercept that click and load the result in the same page without navigating away.
I have removed the href from the anchor. I have also edited the supplied autocomplete.php template where the call to autocomplete:selected occurs. In there I have removed the call to navigate away by removing window.location.href.
Now I have two main issues.
1 - When the user clicks the search result I would like the input to be populate with the title of the item they clicked on. I added this in the autocomplete:selected callback by adding $searchInput[0].value = suggestion.post_title. Which seems to change the value of the input correctly, but as soon as I click away from the input, it is re-set back to the original typed value. So if I type 'may' and click the result 'mayonnaise', the result data can be accessed but the input returns back to 'may'. My function looks this:
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
console.log(suggestion);
autocomplete.autocomplete.close();
});
2 - It seems that the autocomplete dropdown does not hide when the user clicks away. To resolve this i've had to use what I think is a bit of a nasty hack with jQuery. I was wondering if this is really required? My code just below the autocomplete:selected call looks like this:
jQuery('body').on("click", function(event){
if (!jQuery(event.target).closest($searchInput[0]).length) {
autocomplete.autocomplete.close();
}
});
Found some answers to my questions.
1 - In order to populate the input with the title of the selected search result I added a call to the setVal method of the autocomplete object. I'[m still not sure why this is required.
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
autocomplete.autocomplete.setVal(suggestion.post_title);
});
2 - It looks like the config of the autocomplete object uses the value of WP_DEBUG in order to set the debug value. The options available for the autocomplete component can be found here https://github.com/algolia/autocomplete.js#options. This lead me to find that when debug is set to true, the autocomplete box does not hide on selection. This is to allow for easier debugging and styling of the component.
Say that when I have 5 links on the toolbar and there's a table in the middle of the page.
As of right now I plan on making this a single page application. When I click a link on the left (Say from Entertainment to All) I would like it to be highlighted such as the All link on the left. The contents of the table will then change based on the link highlighted on the left.
Ex: If I click entertainment, only the categories with entertainment will be showed.
The highlighted status is due to having the "active" class for that particular div.
How would you implement that in MeteorJS? I can only figure out how to implement it with JQuery
One of the nice things that Meteor offers is session variables, changed and accessed via something like:
Session.set('activeLink', 'All')
Session.get('activeLink')
Meteor is automatically set to listen to Session variables and update your template helper functions when they change, so all you'd have to do is set your HTML to have a class equal to a helper function:
<a class={{isActive}}>
Then the helper would be something like:
Template.navLink.helpers({
"isActive": function() {
if (Session.get('activeLink') === Template.currentData().linkText) {
return "activeLink"
}
}
})
(Or however it is that you are storing the link information in the data context of each link).
I'm trying to use the Buttonset widget in JQuery UI. I've got the package loaded and my template renders the radio buttons fine. I have a "rendered" function to call the JQ UI routine to setup the buttonset:
Template.teamList.rendered = function () {
$("#buttonsetID").buttonset();
}
But it looks like the rendered function is being called before the template is rendered! I stick a console.log in the function and it prints out to the console before there's anything on the screen. So none of the radio buttons are set up, therefore the .buttonset() call does nothing. If I make that call in the console after the page is rendered, JQuery UI does the right thing and my button set appears.
Isn't the .rendered function supposed to be called after everything's set up? Am I doing something wrong?
Thanks!
edit:
As an example, the same thing is seen in the leaderboard example.
If you add:
Template.leaderboard.rendered = function() {
alert($('.player').length);
}
When the page is displayed, it will show 0. This makes it difficult to access the DOM items if you need to add some JQuery events or, in this case, a JQuery UI element.
rendered only works for elements which will appear in the DOM the very first time the template is added to the page. Assume that subscription data takes infinitely long to arrive, then look at the template and see which elements would appear in the default state.
Using the leaderboard example, we can't assume that players are available when the leaderboard template renders (it depends on a subscription). To target a player, you should use the rendered callback on the player template.
It's hard to generalize a strategy for when to apply jQuery plugins, but here are some ideas:
Use the rendered callback if the element will always be added in the default state (e.g. the element is hard-coded and doesn't depend on a conditional).
Use the rendered callback of the most specific child template to target that child (e.g. the player template from above).
Consider using an event handler callback to target the element if it's appearance depends on an event (e.g. a button click).
Consider using a template autorun callback to target the element if it's appearance depends on reactive state. See this question for an example.
I've got an asp.net page containing a Textbox with an Autocomplete extender on it.
It's setup so the user can type a short reference code into the textbox and then choose from the list of matching codes returned by the autocomplete.
On the "select", I then call the server using JQuery. I'm currently using $.get here....
The callback function from $.get checks for "success" and then displays a simple-modal dialog containing info about the item they've just selected.
if (sStatus == "success") {
$.modal(sText, {
overlayClose: true,
appendTo:'form',
onShow: function(dialog) {
$("#ccTargets_tabContainer").tabs();
},
onClose: function(dialog) {
$("#<%=TextBox1.ClientID%>").val("");
$.modal.close();
}
});
$.ready();
}
One of the bits of info being loaded here is a JQuery TABS setup, so the onShow function of the simplemodal is used to initiate the tabs which are within the simplemodal.
Now to the crux of my problem.
If I do multiple consecutive "autocompletes" on the same page it all works fine Unless I have selected a different tab on the tabs in the simplemodal ....If I select a different tab, close the simplemodal and then do another autocomplete I get a JQuery error which seems to relate to a selector doing something with the "old" selected tab that was on the "closed" modal.
I'm clearly missing some sort of cleardown / initialisation somewhere, but can't find what it is. Help?
I've tried "tabs.destroy" before the modal call in the code above and I've tried a $.ready() call as indicated too....
UPDATE: Is it something to do with JQuery Tabs appending my addressbar URL with the selected tab's ID?
I've found the problem.
It's with the "history" script that the tabs plugin normally uses. Obviously as I am continually creating and destroying popups there is no history to speak of - it's all done outside of the normal app navigation.
I've removed the jquery.history_remote script and now it works just great!
Dave