I need to call bootstrap modals from Dart code and this is what I've tried (using the js library):
#JS('jQuery')
class jQuery {
#JS()
jQuery(obj);
#JS('modal')
external dynamic modal(func);
}
class Modal extends jQuery {
Modal(obj) : super(obj);
dynamic toggle() => super.modal('toggle');
dynamic show() => super.modal('show');
dynamic hide() => super.modal('hide');
dynamic handleUpdate() => super.modal('handleUpdate');
dynamic dispose() => super.modal('dispose');
}
in that code if I use the jQuery class directly I get no issues (jQuery.modal('show')) but if I use the Modal methods i.e.:
Modal modal = Modal('#myModal');
modal.toggle();
I will get a TypeError: Cannot read property 'call' of undefined (NullError) .
The javascript the code is jQuery('#myModal').modal(func)
My second issue is how to hook a custom event for example: show.bs.modal in jQuery I would use .on(...) but in Dart I have no clue, I've used element.addEventListener('show.bs.modal', onModalShown) but it isn't triggered and I don't get any errors.
you defined the jquery class but you need to get it from the window and you also need to defined you modal using #JS annotation, I don't think you can extend the jQuery class
I would have done like that
#JS('\$')
external dynamic jQuery(query);
#JS()
#anonymous
class ModalElement {
external modal(String call);
external on(String event, Function callback);
...
}
final modal = jQuery('#myModal') as ModalElement;
modal.modal('toggle');
modal.on('event', allowInterop((event) {}));
Related
I've read numerous articles on creating and using Custom Hooks in React but can't figure out why my code is not working.
Here is the heart of the problem code:
cont MyContextProvider = (props) => {
const useCompleteWizard = () => {
// Define `body` object
useEffect(() => {
// const { loading, data } = useFetchPost(`${API_ROOT()}account_management/fleets`, body, app.awsConfig);
useFetchPost(`${API_ROOT()}user_management/users`, body, app.awsConfig);
}, []);
}
}
Within my context provider, I've created the custom hook you see, which in turn calls another custom hook that posts the data.
But I'm getting this error:
React Hook "useFetchPost" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.
I don't see that useFetchPost is being called inside a callback. Which callback? This just doesn't make any sense to me and I'm hoping someone can enlighten me.
Hey you are calling a custom hook inside useEffect callback.you know useEffect take
a callback function.please call your custom hook outside of this effect
please checkout this Invalid Hook Call Warning
https://reactjs.org/warnings/invalid-hook-call-warning.html
I have written a JQuery plugin for some content which is tabbed content on desktop devices and an accordion on mobile devices. I've used the JQuery Boilerplate (https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.js) as a start point pattern for the plugin file.
I now need to use this plugin on the site within an ajax-loaded modal window. The HTML for the plugin is loading into the modal window fine but the javascript for the plugin is not running.
I believe I need to trigger the init function of my plugin from within the jQuery .load() function which loads the content of the modal window. The function for the ajax overlay looks like this:
menuOverlays = (function(){
var toggleMenuOverlay = function(){
//Toggle a class on the body which triggers styles for the overlay's appearance
$("body").toggleClass('overlay');
//Set the overlay expected to active
var $activeOverlay = $("#"+$(this).data("overlay-element"));
$activeOverlay.toggleClass('active');
//If there is a href on the link that the user clicked on, grab the URL from the link and load the content from that URL into the modal
if($(this).attr("href")){
var urlToLoad = $(this).attr("href") + " #ajaxContent";
$activeOverlay.find(".ajax-content").empty().load(urlToLoad);
}
return false;
};
return{
init: function(){
$("[data-overlay-element]").on("click", toggleMenuOverlay);
}
};
}()),
I have read the following on how to trigger JQuery Boilerplate plugin methods:
Call methods using jQuery Plugin design pattern
and thus tried this:
$activeOverlay.find(".ajax-content").empty().load(urlToLoad, function({
var $t2a = $('.tabs2accordion').tabs2Accordion().data('plugin_tabs2Accordion');
$t2a.init();
});
But I get:
Uncaught TypeError: Cannot read property 'data' of undefined
Any ideas?
I'm using Laravel 4 for my website, and would like to check on every page load if user has seen a popup, and if not - show the popup to the user.
I don't want to do that in every controller, is there a place where can I put the code, so it's checked before every page is loaded?
You can create a filter to check if the popup is shown.
// app/filters.php
Route::filter('popup.shown', function()
{
// Your check logic here
});
Then, you could use that filter in your routes, controllers or a base controller which you could extend to have this functionality:
class PopupController extends BaseController {
public function __construct()
{
$this->beforeFilter('popup.shown');
}
}
Then, extend this controller:
class MyController extends PopupController {
public funcion getIndex()
{
// this will run the `popup.shown` filter
}
}
You can read more about beforeFilter() here:
http://laravel.com/docs/controllers#controller-filters
Another approach would be to use the App::before() event, so the check would be done on every request. However, I don't recommend this one as it's not flexible and you will have to modify it soon or later.
I would approach this via a view/template style. Although if you use a lot of templates that don't show this popup then maybe the filter method suggested by Manuel Pedrera is best.
In global.php or some bootstrap file you can set a view variable that is injected automatically. http://laravel.com/docs/responses#views
// Perform popup logic
View::share('showPopup', $logicResult);
And then in the various layouts you want to include this popup you can check for the variable within the view. http://laravel.com/docs/templates
#if ($showPopup)
<div class="popup">Popup</div>
#endif
The advantage of this is that you do not have to include the variable to show/hide the popup for every View::make() call.
I'm using fancybox plugin to load a page and execute some code. The problem is that at times theres always the chance that someone would click on a link thats meant to be opened in a fancybox window before the page loads completely and the fancybox plugin is set up opening the page looking messed up in an complete browser window. Is there a way to tell whether an HTTP request is via ajax or not so I can set up my layouts accordingly.
I'm using the zend framework and have defined two layouts one for pages opened with fancybox and one is the regular page layout.
In you actions you can use isXmlHttpRequest() method to detect ajax request. For example, you could do:
public function onlyajaxAction() {
if ($this->getRequest()->isXmlHttpRequest()) {
// handel ajax request.
} else {
// if not an ajax request, e.g. throw an exception or whatever
}
}
You can check the X-Requested-With header, which is set to XMLHttpRequest by many Javascript libraries.
If you need to use a same action in different context to provide the according result, you may use the contextSwitcher() action helper (or ajaxContext())
<?php
class YourController extends Zend_Controller_Action
{
public function init ()
{
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('do-something', 'json')
->initContext();
}
public function doSomethingAction ()
{
// some logic here
$this->view->data = $data;
}
}
Use the ?format=json parameter to switch context, in case of JSON ZF will take care to convert $this->view->data to JSON for you, it will also disable layout, etc.
I have page that creates a table: http://gupii.co.uk/rap/weekTable.php and I'm using a plugin to add a filter functionality: _http://gupii.co.uk/rap/js/mylibs/tablefilter.js
In weekTable.php:
var theTable = $('#weekTable')
$("#filter").keyup(function() {
$.uiTableFilter( theTable, this.value );
})
This works fine when your directly on the weekTable page, but when I load the page into a JQueryUI tab and try and use the filter I get this error:
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
} has no method 'uiTableFilter'
Whats going on here, why am I getting this error?
The page I'm trying to load into is _http://gupii.co.uk/rap/guilda.php (tab:This Week) if it helps
(apologies for posting more links than I should but I thought it would be helpful in diagnosing the problem)
Try this:
$("#filter").live("keyup", function() {
...
http://api.jquery.com/live/