I'm using jScroll (jscroll.com) in my Laravel 5.1 application for infinite scrolling. I'm further using some jquery which I want to be triggered on clicking the 'Like' button for each post. Jquery is working perfectly on the first page's posts i.e localhost/myproject/index but it is not triggered for the posts which are appended by jScroll from the next page(s) i.e localhost/myproject/index?page=2 etc.
Here is my code for displaying the posts:
#foreach($posts as $post)
<div class="panel panel-default">
<div class="panel-body post">
<h3>{{ $post->title }}</h3>
<hr>
<p>{{ $post->discripion }}</p>
</div>
<div class="panel-footer">
<div class="btn-group">
<button type="button" data-id="{{$post->id}}" class="btn btn-default like-btn">Like</button>
</div>
</div>
</div>
#endforeach
and the simple jquery that I want to be triggered for each posts is:
<script type="text/javascript">
$('button.like-btn').on('click',function(){
var post_id = $(this).data('id');
alert('Liked post with id = ' + post_id);
});
</script>
It's because jquery doesn't bind to those elements (they are not in the DOM initially). Bind it to document instead, like this:
$(document).on("click", 'button.like-btn', function(event) {
alert("new link clicked!");
});
Look here for a little more
Related
I am fairly new to jQuery, and even though there are a lot of tutorials on how to bind to buttons, I believe my set up is a little more complicated (beyond the scope).
What I have:
-I am using Django to populate my Makes on a view.
Here is my template:
<div class="container">
<div class="row">
<div class="btn-group" id="makesTable">
{% if makes %}
{% for make in makes %}
<button type="button" name="button" class="btn btn-default" id="{{ make.id }}">
<br />
<img class="center-block" src="[REDACTED]" />
<br />
<p>{{ make.name }}</p>
</button>
{% endfor %}
{% endif %}
</div>
</div>
</div>
I am currently having an issue with responsive design. I would like for the buttons to be arranged in a 5x7 grid, however, sometimes, I get the following issue:
This is how it looks when everything is good!
This is the problem. Notice the spacing with a ?
The Workflow:
User sees (35) different buttons to select from. As you can see name, and id are unique, where id is the Primary Key from the database (this is obviously important)
I can capture the primary key using jQuery using this function:
$(document).ready(function() {
$("button").click(function() {
var make_id = $(this).attr('id')
});
});
At the same time, jQuery is going to hide/remove the button elements (trivial)
This is done with the following code snippet (anf adding fadeout to the click listener:
function fadeOut() { $( "#makesTable" ).fadeOut( "slow", function() {}); };
Then I would like to use the id from button clicked to do an AJAX request to my API, where django URL routing is:
url(r'^makes/(?P<pk>[\d]+)/$', views.MakesDetail.as_view(), name='makes-instance'),
in other words, the AJAX request goes to mysite.com/api/makes/(this.id) and returns a JSON file (already set-up thanks to DRF.)
Sample Response:
{
"name": "BMW",
"model": [
{
"name": "2 Series",
},
{
"name": "3 Series",
}]
}
Finally, using this API response, I wish to populate a similar template of buttons (replacing makes with models.)
This is for a single page app in a sense where no page refresh is necessary with the use of JSON and AJAX.
Full disclosure: I am an entry level programmer/web developer.
code snippet:
<div class="main-content container-fluid">
<div class="container">
<div class="row">
<div class="btn-group" id="makesTable">
<button type="button" name="button" class="btn btn-default" id="200002038">
<br />
<img class="center-block" src=" " />
<br />
<p>Acura</p>
</button>
<button type="button" name="button" class="btn btn-default" id="200464140">
<br />
<img class="center-block" src="" />
<br />
<p>Alfa Romero</p>
</button>
<script>
$(document).ready(function() {
$(document).on( "click", "button", function() {
alert($(this).attr('id')); //testing functionality
});
});
</script>
<script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//initialize the javascript
App.init();
});
</script>
</div>
</div>
</div>
</div>
Since the buttons are dynamically generated. You have to make the handler like this:
$(document).on('click', 'button.btn', function(e) {
alert($(this).attr('id')); //testing functionality
});
First of all, event association to buttons should be better via classes (it's a better practice).For the javascript click code check the other answers.
For ajax requests, you can refer to this links:
https://api.jquery.com/jquery.post/
https://api.jquery.com/jquery.get/
https://api.jquery.com/jquery.when/
By example 'when' function, it allows you to know when request ended and execute any actions after.
from your replied comment I expect that you attach the handler before the button already rendered so I recommend you to use bubbling event concept like this:-
$(document).ready(function() {
$(document).on( "click", "button", function() {
alert($(this).attr('id')); //testing functionality
});
});
and the the alert will pop up and you can do whatever else you want to do.
In meteor, I have created a cards dynamically after submitting the form. and the dynamic card contains the show and hide buttons. When I click on show option button the hidden part is showing for all the cards instead of that particular card. the problem is the card is creating dynamically so I thought that is problem .. how to make the functionality to work separately to the each card.
Here I am attaching the code:
<div id="newActionCard">
{{#each newaction}}
<div class="workflowcard">
<div class="module-card">
<div class="res-border"></div>
<div class="card-img"></div>
<div class="res-content">
<div class=" assigned-team">{{team}}</div>
<div class=" newaction-name">{{action_title}}</div><hr>
<div class="description">{{description}}</div>
<div class=" due-on">Due on:{{d_date}}</div><hr>
<div class="subcontent">
{{> actioncardsubcontent}}
</div>
<div class="reqext">
{{> requestextensioncard}}
</div>
</div>
<div class="due">
Due on:
<div>
<span class="day-stamp">THU</span><br>
<div class="date-stamp">26</div>
<div class="month-stamp">AUG
</div>
</div>
</div>
</div>
<div class="btn-box newaction">
<button type="button" class="cancelsub" >New Action</button>
<button type="submit" class="createbtnsub" >Show Options</button>
</div>
<div class="btn-box showoption">
<button type="button" class="hideoption" style="display:none">Hide Options</button>
</div>
{{/each}}
</div>
In JS I have written the hide and show functionalities in the events..now how to stop functionality to all cards at a time.
Here is my JS:
Template.workflow.events({
"click .createbtnsub" : function() {
$( ".subcontent" ).show();
$('.createbtnsub').hide();
$('.cancelsub').hide();
$('.hideoption').show();
$('.requestextension').show();
},
"click .hideoption": function(){
$('.subcontent').hide();
},
"click .hideoption": function(){
$(".subcontent").hide();
$('.cancelsub').show();
$('.createbtnsub').show();
$('.requestextension').hide();
$('.hideoption').hide();
$('.reqext').hide();
},
"click #createActionBtn": function(){
$('#createAction').hide();
$('.editw').show();
$('.hidew').show();
},
});
Template.actioncardsubcontent.rendered = function(){
this.$(".subcontent").hide();
};
Template.requestextensioncard.rendered = function(){
this.$(".reqext").hide();
};
Template.workflow.helpers({
getWorkflow: function(){
return Workflow.find();
},
user: function(){
return Meteor.users.find({});
},
getNewaction: function(){
return Newaction.find();
},
});
Please see the following and adjust the selectors as needed:
"click .showoption": function(event){
$(event.currentTarget).next('button').show();
}
This will work for selecting sibling elements, however as a tip I would recommend rewriting your template.helper that returns the cards data from the database into something more specific.
Something like dynamic classes based on index or id so your class/id names would return as follows .showoption-12kjddfse4 . Then you can just get the attribute of the current target and apply it to your js selector.
Also as kind of an explination to why all buttons were showing, is you were using the class selector, which is meant for grabbing groups of elements/nodes. This is also another reason to created more specific classnames/ids to your use case.
So in your class name you could do something like
<button class="showoption" id="{{_id}}">button</button>
<button id="hiddenoption-{{_id}}" class="hiddenoption">button</button>
Then selecting your elements would be easier as follows:
'click .showoption'(event) => {
let id = event.currentTarget.getAttribute(id);
document.getElementById('hiddenoption-'+id).style.display = 'block';
}
What I am trying to do is render two Calendars on one page, each with a different data set. Currently the first Calendar loads correctly but the second calendar will not load. It doesn't appear to even try to load.
I am quite new to Angular, so I am not sure if what I am doing is allowed in the concept of a one page application, or if I should be doing it another way.
Open to all suggestions!
Calendar App Using: https://github.com/mattlewis92/angular-bootstrap-calendar
Front end (Trimmed down)
<div class="col-lg-9 panel panel-default" id="Calandars">
<button class="btn dropdown" data-toggle="collapse" data-target="#userCal" data-parent="#Calandars"><i class="icon-chevron-right"></i> User Calandar </button>
<button class="btn dropdown" data-toggle="collapse" data-target="#GlobalCal" data-parent="#Calandars"><i class="icon-chevron-right"></i> Global Calandar</button>
<div class="accordion-group">
<div id="userCal" class="collapse indent">
<!---User Calendar Configuration - Working Calendar-->
<div ng-app="UserCal" class="textfix">
<div ng-controller="Cal as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)">
</mwl-calendar>
</div>
</div>
</div>
<div id="GlobalCal" class="collapse indent">
<!---Global Calandar Configuration -- None Working Calendar-->
<div ng-app="UserCal" class="textfix">
<div ng-controller="GlobalCalCon as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)">
</mwl-calendar>
</div>
</div>
</div>
Javascript Behind
angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate'])
.controller('Cal', populateCal)
.controller('GlobalCalCon', populateGlobalCal);
function populateCal($http) {
Do Stuff
angular.copy(MyData, vm.events)
};
function populateGlobalCal($http) {
Do Diffrent Stuff
angular.copy(MyData, vm.events)
};
Well, In here you're using same module UserCal two times. This is your main SPA module so it will be only one time.
Please put ng-app="UserCal" to html/body tag and remove <div ng-app="UserCal" class="textfix"> from HTML code.
Now both the calender will work :)
cheers!
Its because you are using ng-app twice, you have to declare it only once on top of the page or best thing is declare it in ur index.html on html tag
On index.html:
<html ng-app="UserCal">
Or
On current page:
<div ng-app="UserCal">
<div ng-controller="Ctrl1">
// stuff goes herr
</div>
<div ng-controller="Ctrl1">
// stuff goes herr
</div>
</div>
I'm using VB.Net, MVC 5, razor and jQuery. I have a razor view that creates buttons I'm trying to disable on the user click. I generally accomplish this task using jQuery:
$('#id').prop("disabled", true);
My task is new to me in that my buttons are generated like this:
#For i As Integer = 0 To Model.hrmnValues.Count - 1
#<div class="col-md-3">
<a class="btn btn-primary btn-md" href="#" id="#Model.inventoryCategoryAttIDs(i)"
onclick="acceptChange('#Model.hrmnValues(i)',
#Model.inventoryCategoryAttIDs(i), #Model.uniqueItemID)">Accept Change</a>
</div>
Next
My onClick function is similar to this:
function acceptChange(newValue, categoryAttID, itemID) {
$('#categoryAttID').prop("disabled", true);
}
This obviously does not work, as it is looking for an id with the name of categoryAttID. I have also tried putting the categoryAttID into it's own variable like this:
var idToDisable = "#" + categoryAttID;
and then putting idToDisable into the jQuery call to disable the button, this did not work.
Given this situation how can I disable the button that is clicked?
There will be multiple buttons on this page making use of the function, the function actually performs an ajax call. The idea is to limit the user to performing one ajax call per button.
The html is rendered like this:
<div class="row">
<div class="col-md-3">
<font>First Name</font>
</div>
<div class="col-md-3">
<font>John</font>
</div>
<div class="col-md-3">
<font>No Record Found</font>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-md" href="#" id="2"
onclick="acceptChange('CHRISTOPHER', 2, 0)">Accept Change</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<font>Last Name</font>
</div>
<div class="col-md-3">
<font>MURRAY</font>
</div>
<div class="col-md-3">
<font>No Record Found</font>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-md" href="#" id="3"
onclick="acceptChange('MURRAY', 3, 0)">Accept Change</a>
</div>
You're already passing the button's id to your function as the second argument -
acceptChange('#Model.hrmnValues(i)',#Model.inventoryCategoryAttIDs(i), #Model.uniqueItemID)
So you can change your function to -
function acceptChange(newValue, categoryAttID, itemID) {
$('#' + categoryAttID).prop("disabled", true);
}
Also, there isn't a disabled property available for links (see - Mozilla Developer Network) if you want to disable your elements on click try using a button instead.
Since you appear to be using bootstrap after changing your links to buttons you might want to change your function to -
function acceptChange(newValue, categoryAttID, itemID) {
$('#' + categoryAttID).prop("disabled", true);
$('#' + categoryAttID).addClass("disabled");
}
I have a 2 col layout, on the left i have a button that says show code and on the right i have some html.
The above is repeat numerous time so i have a list of buttons that i want related to the "widget" next to it.
If i click on each button, i would like to show the innerHTML of the element to the right in an alert box.
My right column html widgets are a class called "mywidgets", and my buttons to the left have a class called "showcode"
how would I go about showing the code of the related box to the right on click of button to the left in javascript or jquery?
if I do something like:
var showthem = document.getElementsByClassName('mywidgets');
for (var i=0; i < widgetBits.length; i++) {
};
but I get confused on how to count each button and each class in the seperate area, then show the code on click.
I was also thinking about something similar to below but again I get confused on how to utilize "this"/each item clicked.
$(document).ready(function(){
$("button").click(function(){
$("mywidgets").clone().appendTo("myareofchoce");
});
});
HTML:
left area :
<div class="container marginBTM10">
<div class="row">
<div class="col-lg-offset-2 col-md-offset-2 col-lg-10 col-md-10 bgColor_FFF padding10">
<h2>Widget 1</h2>
<div class="highlight">
<button class="btn btn-primary btn-sm " onclick="widgets()">get code</button>
right hand area :
<div class="col-lg-4 col-md-4">
<!-- widget 1 starts-->
<div class="sortable bgColor_FFF mywidgets">
<div class="padding10">
stuff
</div>
</div>
<!-- widget 1 ends-->
</div>
</div>
http://jsfiddle.net/wne6rnda/1/
to connect buttons and widgets must be used in a single tag.
in this case: widget has id and corresponding button has data-id with same value
HTML:
buttons:
<button class="btn btn-primary btn-sm get_class" data-id="#mywidgets1">
...
<button class="btn btn-primary btn-sm get_class" data-id="#mywidgets2">
...
widgets:
div class="sortable bgColor_FFF mywidgets" id="mywidgets1">
...
div class="sortable bgColor_FFF mywidgets" id="mywidgets2">
...
JQ
$('.get_class').click(function () {
//get id of selected widget
var id = $(this).data('id');
//get selected widget
var $widget = $(id);
//clon and add selected widget
$widget.clone().appendTo(".myareofchoce");
})
UPDATE: 2
http://jsfiddle.net/wne6rnda/9/
$('.get_class').click(function () {
var id = $(this).data('id');
var $widget = $(id);
var html=$widget.html();
//solution 1 - output to the textarea
var txt=$(".myareofchoce2").val();
$(".myareofchoce2").val(txt+"\r\n"+html);
//solution 2 - use <xmp> tag
html='<xmp >'+html+'</xmp >';
$(".myareofchoce").append(html);
})