We Keep Coding

Record Clicks on Modal Toggle

I have a page that catalogues media (think similar to an instagram page). The media is viewable on modals, and I'd like to record a "view count" for each piece of media. So whenever the modal containing that media is toggled open, it records a view.
This is a simplified version of my code:
<button data-toggle="modal" data-target="media-number-999">Click to view Media 999!</button>
<div class="modal" id="media-number-999">Media #999 viewable here!</div>
I also have a page set up where visiting that page automatically increases the viewcount by 1, and then redirects elsewhere (using django)
urls.py:
path('views/<id>/', views.media_views, name="mediaviews"),
views.py:
def media_views(request,id):
Media.objects.filter(id=id).update(views=F('views') + 1)
return redirect('media_detail', id=id)
The reason I'm doing this is so that I can then reference the viewcount in the database to use for sorting/filtering/etc.
How can I make a button that both opens the modal, and also records a visit to /views/999/ ? Also open to alternative approaches if there are better ways! I've tried to figure out how to use Ajax to do this but haven't had any luck.
Thanks!

Add an onclick function to
</button data-toggle="modal" data-target="media-number-999" onclick="recordview(999)">Click to view Media 999!<//button>
Create a new endpoint on your app that has the following format: /record/{id}
Make a function recordview() that makes a simple HTTP request (No need for AJAX) to your new endpoint
Remove the Media.objects.filter(id=id).update(views=F('views') + 1)in media_views to avoid double recording (From when they clicked vs when they opened) or change the model in media_views
(There is no / at the start of but i had to add it otherwise StackOverflow wouldn't format it properly. Make sure to remove it (And let me know if you know how to format it without the damn slash!)

Can I dynamically create / destroy Vue components?

So, I'm creating a fairly complex Vue application that fetches data from our backend API and displays it on the front-end, depending on filters the person selects. Its default is to display everything at once, then once the user selects filters, it will pull out the "card" components that don't have those attributes. Everything has been going great until today, which I tried to add Google Maps into it, via their API (I'm using the vue2-google-maps package to make this easier on myself, since we plan to implement Polylines in the future).
The problem is that I'm utilizing Foundation as my CSS framework and initializing the map within a Reveal modal. The only way I've been able to get the modal working without any warnings in the console is by using an example I found online which utilizes the mounted() property:
mounted() {
$(this.$el).foundation();
},
unmounted() {
$(this.$el).foundation.destroy();
}
This works great, until I try to call a Google Map inside the modal, because instead of creating the map when the modal fires, it creates everything on page load. Not a big deal if I was only creating a few maps... but on-load I'm rendering 92 maps. As you can imagine, this is incredibly slow.
In its simplest form, the structure of my app is:
<app>
<filters-component></filters-component>
<div class="off-canvas-content">
<nav-component></nav-component>
<div class="row card-grid">
<card-component>
<modal-component></modal-component>
</card-component>
</div>
</div>
</app>
Currently, the modal component is the only nested component, mostly just so it's easier to keep track of what modal belongs to which card.
Before, I was using a method to fire each modal, which looked like this, with a #click event on the open modal button, however, this still renders all maps on load and also gives a console error that reads "VM215130:180 Tried to initialize reveal on an element that already has a Foundation plugin." If you click the button more than once.
<a :data-toggle="'modal-' + school.id" #click="openModal(school.id)" class="float-right" tabindex="0" aria-label="Open More window" title="Open More window">
More <icon name="info-circle" label="More information icon"></icon>
</a>
<script>
export default {
methods: {
openModal: function($schoolid) {
$('#modal-' + $schoolid).foundation();
console.log('modal-' + $schoolid + ' launched')
}
}
</script>
Is there a way to only create the modal component when this button is clicked, or somehow lazy load it only when the modal is opened?

jquery back button to previous category in sortable gallery

I have a jquery portfolio gallery with 4 categories which are sortable. When you click on a category the portfolio is rearranged on the same page through jquery showing only those project in that category. Upon clicking a specific project the user can then see the project page/details. I want to add a back button on this page so that when a user is viweing a project they can return to category they were at before.
I tired the following which creates the back button but it take me back to the main portfolio page, not the category which I was browsing before.
function goBack() {
window.history.back();
}
This is one of the gallery page just in case: http://goo.gl/JeSNjD

Not knowing any of your application's code, this is a bit of a shot in the dark but I think I know what you're probably missing.
Using the history.back() will take you to the last page you visited (a page visit is only recorded if the URL is updated). If you are updating content in your website with jQuery and not loading a new page, your browser's history doesn't record this so back takes you back to the top page still.
What you will need to do is change your back button code to hide the current project, and redisplay the category page. You cannot use history.back().
Edit:
If you need more data to correctly rebuild the previous page, you can either change the url for the category page (not necessarily simple to implement but perhaps the most robust thing to do), or to store information about what page they came from. If you are using cookies, you could save navigation there, but you could also add a ref value to the query string when you navigate to a project page.
Category page:
Link to project
Project page:
Back button
Then use that information to reopen or resort your categories.

One problem is knowing which category a back button should return to.
For example, /portfolio/foothill-pasadena-2 should route back to the office category and /portfolio/131house should route back to the Residential category. If I emailed you a link to one of those and you clicked it to go straight to the project page, should there be a back button on the page when you go to it and would it take you back to all categories or to the category related to the project?
One thing you could do is to change your permalink structure to include the category, such as /portfolio/office/foothill-pasadena-2 and /portfolio/residential/131house. Then your could hard-code your back button to go to /projects. You have some jquery running there (wp-content/themes/yourtheme/js/jquery.custom.js):
var isotopeContainer = jQuery('.portfolio-wrapper, .gallery-wrapper'),
isotopeFilter = jQuery('#filter'),
isotopeLink = isotopeFilter.find('a');
isotopeContainer.isotope({
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
filter : '.food-service'
});
isotopeLink.click(function () {
var selector = jQuery(this).attr('data-category');
isotopeContainer.isotope({
filter : '.' + selector,
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
animationEngine : 'best-available'
});
isotopeLink.removeClass('active');
jQuery(this).addClass('active');
return false;
});
That is finding the four category links inside your filter div and adding a click function.
Maybe you can add some extra code that would get the document.referrer, checks it for a match against yoursite.com/new/projects/{category}/{project}, and pulls out the value of {category}. If the category matches one of your four values (food-service, office, residential, other), then call the click function on that element.

Joomla Buttons Conflicting Each Other

I have two modules which each contain a button code as follows:
First Button
<div onclick="parent.location='first-link'" data-mce-onclick=""><button class="button">First Button</button>
Second Button
<div onclick="parent.location='second-link'" data-mce-onclick=""><button class="button">Second Button</button>
When I show these buttons in the same template position on at the same time in the article, the First Button loses it’s functionality. What do I need to change in order to have them both be able to function properly within the same page?

try to use 1 module only for your links and
use css place your buttons
check this site for how to it uses 1 module for placing that links
http://soroushabtahi.com

How do I allow users to close a slide using this JQuery example?

I would like to get users to sign up to my email newsletter without using annoying popups.
I discovered a scroll-activated JQuery slide that I think will work well.
Here is the test example I created: (scroll down to activate it)
http://buckinvestor.com/test/jquerytest.html
Now here is the problem: I don't want to annoy users by constantly having this slide down on each page.
How do I add a "Close" button to the slide?
How do I ensure that the user doesn't see the slide again after they click close? (perhaps a cookie that stays active for 7 days or something?, not sure how that works, but if you provide me some guidance, I'll figure it out).
Thank you everyone - StackOverflow has been such a lifesaver!

Easy
you just need to hide the DIV
in this example add a button or image and use the live('click',function(){})
$('#closediv').live('click',function(){
$('#headerSlideContainer').hide();})
as for the second part of the question yes cookie

For #1, just add a button and
$("button.hide").click(function(event){ $("div.hidethis").hide() });
onclick to hide the div that is the slide thing.

Add a <a> or <button> or something for the close button inside of the #headerSlideContent <div>
Add a on click or similar to the button inside your load function:
$('#closeButton').click(function(){
$('#headerSlideContainer').hide();
});
http://api.jquery.com/hide/
For part 2, yes a cookie is good, I found the jQuery cookie plugin to be helpful: http://plugins.jquery.com/project/Cookie
Set the cookie: $.cookie("name", "value");
Read the cookie: var value = $.cookie("name");