I have a small bit of JavaScript which is not firing after navigating through paged results in a BigCommerce Cornerstone theme (using Cornerstone 6.7.0).
I've added the following to the onReady() method in the category.js file:
$('.mm-button').on('click', (e) => alert("clicked"));
This will execute on an initial page load but not after clicking on pagination links (next, prev, page number).
I've also tried moving the JavaScript into its own .js file and including it into the theme. The same behavior happens where it executes on the initial page load but not after paging through records.
The issue here is that pagination actually works by editing the content via JavaScript, so it does not run the category onReady() again. You could add the JavaScript into the page content function, but a simpler method is to simply delegate the click event. Change your code like this:
$('body').on('click', '.mm-button' (e) => alert("clicked"));
Related
I have Magento 2.3.4.
I want to edit Products behavior of Page Builder.
I changed the template of carousel using my child theme:
app\design\frontend\MyVendor\luma_child_theme\Magento_PageBuilder\templates\catalog\product\widget\content\carousel.phtml
Now can't edit preview.js file to change code
I tried to override the preview.js file but not work:
app\design\frontend\MyVendor\luma_child_theme\Magento_PageBuilder\view\adminhtml\web\products\preview.js
Also it is possible to edit javascript for frontend?
I want to use a different library to show carousel.
Does anyone know how to expand this theme ( https://github.com/gilbitron/wp-rest-theme ) in order to theme specific pages? For example, I would like to create a page called "Menu" which has a unique navigation to click through to child pages Breakfast, Lunch, Dinner, etc without reload. I'm used to creating individual .php files to theme specific pages to my liking via page-{slug}.php - Is there an equivalent workflow using vue.js and wp rest api?
Instead of using page-menu.php to customize the /menu page, I would imagine I'd need to create something like a menu-page.vue file and add a custom method to specifically call that page in order to template it.
I can't find any examples of this process. Any help would be greatly appreciated.
What I did was add a field using Advanced Custom Fields that determined which template the page should use. I wrapped the display in a component called PageContent that looks like this:
<div :is="page.template"
:page="page"
v-if="!$loadingRouteData"
transition="fade"
transition-mode="out-in">
</div>
router:
'/:slug': {
component: PageContent,
name: 'Page'
}
So when someone navigates to that route, I fetch the page based on the slug param. The page variable then has a template attribute through ACF, which determines the component to display and defaults to a generic page:
if(pages[0].acf.template){
return pages[0].acf.template;
}
return 'page'
You need the WP JSON API plugin as well as the ACF plugin that adds ACF data to the json
My site uses this setup, happy to share more code if you have more questions.
in a ASP.NET MVC application that I am currently working there are multiple places in a single page that the user can click. So there is a main menu that's in _layout and for each inidividual page there can be links associated with that page.
I am trying to use a loader which will be shown on every click, mainly where the response takes time but for now it's for every click.
For example in the home page, from the main menu the user can click Students and the loader should come up and hide when the page loads completely. On the students page there can be an ajax call that gets data and binds it to the grid.
So from the time the user clicks on a menu link and the page loads the loader is active/shown. It's hidden once the page loads completely.
The grid can have editing functionality and when the user clicks on any of the CRUD links the loader should show and hide.
I am looking at suggestions on implementing this requirement.
If I can hookup any of the MVC events, that would be cool as I want less of Javascript/jQuery stuff but if Javascript/jQuery is the way then that's fine too.
Currently I don't have anything so anypointers are appreciated.
Assuming AJAX is being used
I don't see a way to keep this server-side without a middle page with a redirect being used (which would just be unnecessary bloat). And, since you're not opposed, you can implement this fairly easily using jQuery and something like blockUI.
I'll let you play with refining the binding to only links you care about, but for now we'll assume all links. Also, MVC should be using jQuery for things like Ajax.Actionlink so we can hijack events like $.ajaxStart and $.ajaxStop:
function showLoadingScreen(enabled){
return enabled ? $.blockUI() : $.unblockUI();
}
$(document).ajaxStart(function(){
showLoadingScreen(true);
}).ajaxStop(function(){
showLoadingScreen(false);
});
Later on you can maybe apply classes to the links you care about and just bind to them (instead of $.ajaxStart) but I'll leave that up to you.
if append to page the CGridView ('myGridViewID') by ajax, I can't reload it.
$.fn.yiiGridView.update('myGridViewID');
TypeError: settings is undefined
$grid.addClass(settings.loadingClass);
Use renderPartial in controller action:
$cs = Yii::app()->clientScript;
$cs->reset();
$cs->scriptMap = array(
'jquery.js' => false, // prevent produce jquery.js in additional javascript data
);
// Look at 4th parameter: with TRUE value, your view will have additional javascript data.
$this->renderPartial('_partialViewWithGrid', array(), false, true);
Here is a wiki for dynamic CgridViews in the same view. That should work.
The problem with dynamically loaded CGridViews (and everything containing ajax) is that CController::renderPartial() does not render the required javascript code for them to work properly, unlike CController::render(), which includes the required layout and JS.
There is an extension called ZController which offers a workaround for this problem, but due to the way CGridviews are reloaded (by making an ajax call to the same URL)... when you try to filter/sort/page a CGridView loaded via AJAX, the subsequent Ajax call will replace the whole contents of your browser window, but I honestly think that maybe (only maybe) this workaround could help, but I haven't had the time to try it out.
That is why I currently avoid loading CGridViews using AJAX.
i have done 'everything' that manual says.
included all files, adding it properly to html structure, loaded images,..
please, you can view live problem here
You are using ajaxpage to load the div with id=slider for certain categories for page.php. However, Nivo slider is looking for a div after the primary page has loaded (the $(window).load function).
Somehow, you need to attach the .load function call to the page being loaded by ajaxpage.
You might try adding the $(window).load call to the bottom of each page whenever you are setting up a Nivo slideshow.
If you were using jQuery's ajax library/module calls, you might be able to attach the load action to fire when the ajax has loaded.
I looked at the source of one of your page.php pages with Nivo and I think that you set up the HTML correctly, but the Nivo module just has not been started, partly because of the way the page is pulling in the content using ajax.
This is a clever way of doing things, but just needs a different trick to starting Nivo.