Develop Reference

How to submit a value by clicking on a div?

I'm working on Asp.net Mvc news website like (yahoo, BBC ...).
I have loads of divs that contains the feed title,text and image.What I want to achieve is to make these divs that contains these 3 elements clickable no matter where I clicked (title,text or feed image)and to post the value of the feed ID to my controller method.
I've done this already like this:
In my feed table I have : FeedID-FeedText-FeedPath
View:
#foreach (Feeds item in Model.FeedViewModel)
{
<div class="col-4">
#using (Html.BeginForm("goToFeed", "Home"))
{
<h3>#item.title</h3>>
<button type ="submit" name="FeedID" value="#item.FeedID"
style="background:none; border:none" href="#">#item.FeedText</button>
<img src="#Url.Content(#item.FeedPath)">
}
</div>
}
And in my controller I'm taking the "FeedID"
Controller:
[HttpPost]
public ActionResult goToFeed(int FeedID)
{
//some code here
}
I guess there should be a way to post the FeedID inside this div without making it a button.
I've checked these posts already but none of them helped me.
Form submit by click on a div element without JS
submiting form on div click with js
Thanks for any help...

You should not use a POST request to read data. The correct HTTP verb in this case would be GET. POST should mainly be used to create new entries. See Using HTTP Methods for RESTful Services.
This has not only academic reasons. If you use POST, and your users use the backwards/forwards buttons of the browser to navigate, they would see "Are you sure you want to resubmit the form?" messages.
To use GET, your CSHTML could look like this. Use CSS marker classes js-feed and js-feedId so you can later access these elements using jQuery.
#foreach (Feeds item in Model.FeedViewModel) {
<div class="col-4 js-feed">
<h3>#item.title</h3>>
<span>#item.FeedText</span>
#Html.HiddenFor(m => item.FeedID, new { #class = "js-feedId" })
</div>
}
The URL to the GET action is configured in the JS part. Extract the FeedId from the clicked div, replace the placeholder in the configured URL with this FeedId, and then redirect to this action by setting window.location.href, which will reload the page.
If you do not want to reload the entire page, use $.ajax instead.
<script type="text/javascript">
$(document).ready(function() {
var getUrl = '#Url.Action("goToFeed", "Home", new { FeedID = "To_Be_Replaced_By_JS" })';
$('.js-feed').on('click', function() {
var feedId = $('.js-feedId', $(this)).val(); // search only inside clicked element
var feedUrl = getUrl.replace('To_Be_Replaced_By_JS', feedId);
window.location.href = feedUrl;
});
});
</script>
The target controller action should be attributed with [HttpGet].
[HttpGet]
public ActionResult goToFeed(int FeedID) {
//some code here
}

Change this:
#foreach (Feeds item in Model.FeedViewModel)
{
<div class="col-4">
#using (Html.BeginForm("goToFeed", "Home"))
{
<h3>#item.title</h3>>
<button type ="submit" name="FeedID" value="#item.FeedID"
style="background:none; border:none" href="#">#item.FeedText</button>
<img src="#Url.Content(#item.FeedPath)">
}
</div>
}
To this:
#foreach (Feeds item in Model.FeedViewModel)
{
<div class="feed col-4">
#using (Html.BeginForm("goToFeed", "Home"))
{
#Html.HiddenFor(m => item.FeedID)
<h3>#item.title</h3>>
<button type ="submit" name="FeedID" value="#item.FeedID"
style="background:none; border:none" href="#">#item.FeedText</button>
<img src="#Url.Content(#item.FeedPath)">
}
</div>
}
Then add this to your page:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
$('.feed').click(function() {
return $(this).closest("form").submit();
});
});
</script>

Having a field is required when posting a razor form to the server so having the FieldID hidden will allow this to be sent. Having a div surrounding the area adding the onclick attribute with a submit function to post the above form document.forms[0].submit() can also be used.
#foreach (Feeds item in Model.FeedViewModel)
{
<div class="col-4">
#using (Html.BeginForm("goToFeed", "Home"))
{
<div onclick="this.parentNode.submit()">
#Html.HiddenFor(m => item.FeedID)
<h3>#item.title</h3>>
<button type ="submit" name="FeedID" value="#item.FeedID"
style="background:none; border:none" href="#">#item.FeedText</button>
<img src="#Url.Content(#item.FeedPath)">
</div>
}
</div>
}

Semantic ui dropdown, prevent auto select with input element

I added an option to the dropdown that allows user to add item if it doesn't exist.
For that matter, I added an input field to the dropdown but when the user enters something, the dropdown tries to match the entered text with items that are already in the list.
I find it quite annoying in that specific case. I have noticed in the docs that input elements are bound to the search function. Nevertheless, I couldn't find how to disable this behaviour.
Here's the HTML:
<div class="ui fluid selection dropdown playlist">
<input name="playlist" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">playlist</div>
<div class="menu">
<div class="item create" data-value="0">
<span class="create-placeholder">+ new playlist</span>
<div class="ui action input add-playlist">
<input placeholder="new playlist">
<button class="ui button">Add</button>
</div>
</div>
<div class="item" data-value="1">foo</div>
<div class="item" data-value="2">bar</div>
<div class="item" data-value="3">baz</div>
</div>
</div>
The .add-playlist div and its content are not shown but I'm willing to spare you with the CSS here.
And the js:
$dropdown = $('.ui.dropdown');
$dropdown.dropdown({
action: (text, val) => {
if (val == 0) { // eslint-disable-line
$('.create-placeholder').hide(100);
$('.add-playlist').css('display', 'inline-flex');
$('.add-playlist input, .add-playlist button').show(200);
}
else $dropdown.dropdown('set selected', val).dropdown('hide');
},
onHide: () => {
// do that after dropdown has been hidden
setTimeout(() => {
$('.add-playlist, .add-playlist input, .add-playlist button').hide();
$('.create-placeholder').show();
}, 400);
}
});
I've set up a fiddle to have a clear exemple. Just type "foo" and you'll see what I mean in case it's not crystal clear.

To allow user to add new items just add allowAdditions: True To dropdown options, for more informtions see semantic-ui dropdown settings
Example:
$('dropdownSelector').dropdown({
allowAdditions: True
}).dropdown();

I have a 100 button, click each button to display its corresponding bomb box, With javascript and angular

a button corresponding to a prompt box,each box is different shells;Although implements the desired function, but my code is too complicated, and that there is no simple way. how can I do? This is my code
<--html button-->
button1
button2
...
button100
<--html pop box-->
<div class="note1" style="display:none;">
<img class="title-css" src="note1.png">
<p class="one">note1</p>
</div>
...
<div class="note100" style="display:none;">
<img class="title-css" src="note100.png">
<p class="one">note100</p>
</div>
<--angular js-->
$scope.showRulePop = function(index) {
for(var i=1;i<=8;i++) {
$('.note'+i).hide();
}
$('.note'+index).show();
};

Well first of all, don't use jQuery, unless your in the directive level of angular jQuery have nothing to do there.
First let's get rid of the links part using a simple ng-repeat :
<--html button-->
<div ng-repeat="button in buttons">
{{button.label[i]}}
</div>
// JS in the controller
$scope.buttons = [{
label:'button1'
},{label:'button2'}];
As you can see i declare in the javascript all your buttons and i just loop over it.
Now the "bombox" or whatever it is let's make it a simple template :
<div class="{{currentnote.class}}" ng-if="currentNote">
<img class="title-css" src="{{currentNote.img}}">
<p class="one">{{currentNote.content}}</p>
</div>
// and use ng-repeat for the eight first when there is no button selected
<!-- show 1 to 8 if note current note selected -->
<div ng-repeat="button in buttons1To8" ng-if="!currentNote">
<div class="{{button.note.class}}">
<img class="title-css" src="{{button.note.img}}">
<p class="one">{{button.note.content}}</p>
</div>
</div>
// JS
$scope.buttons = [{
label:'button1'
note:{class:'note1', img:'note1.png', content:'note1'//assuming no HTML or you' ll need something more
}},{label:'button2', note:{...}}, ...];
$scope.showRulePop = function(index){
$scope.currentNote = $scope.buttons[index].note;
}
$scope.buttons1To8 = $scope.buttons.slice(0, 8);//0 to 7 in fact
That's all, no need of jQuery.

in meteor how to stop functionalities to work at a time?

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';
}

Update dropdown selection with JQuery in Java Play Framework

I want to dynamically add field inputs to a form as the user completes it. However, if the user changes a value for a previous field that others depended on, then I want to hide those later fields again and reset their values back to the default. I can show and hide the input fields without a problem. However, no matter what I do, I cannot change the value of the selection dropdown menu.
Here is my script:
$(function() {
$('#type_selection').change(function() {
var case_type = $('#type_selection :selected').val();
if(case_type !== "") { //the default value is an empty string
$('.subtype-panel').slideDown('slow');
}
else {
$('.subtype-panel').slideUp('slow');
$('#subytype_selection').val("").change();
}
});
});
Play template:
#(caseForm: play.data.Form[Case])
#import views.html.common._
#import models._
#implicitFieldConstructor = #{
b3.vertical.fieldConstructor
}
#main("New Case Info") {
<div class="page-header">
<h3>New Case Information<span class="pull-right label label-primary">Open</span></h3>
</div>
<fieldset>
#b3.form(action = routes.CaseController.save()) {
<div class="panel panel-primary">
<div class="panel-heading">Case Type</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
#b3.select(caseForm("caseType"),
options = options(Case.typeOptions),
'_id -> "type_selection",
'_label -> "Case Type",
'_default -> "-- Select a Type --")
</div>
<div class="col-md-3">
#datePicker(caseForm("date"), '_label -> "Date", 'placeholder -> "mm/dd/yyyy")
</div>
</div>
</div>
</div>
<div class="panel panel-primary subtype-panel">
<div class="panel-heading">Case Subtype</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
#b3.select(caseForm("caseSubType"),
options = options(Case.subTypeOptions),
'_id -> "subtype_selection",
'_label -> "Subtype",
'_default -> "-- Select a Subtype --")
</div>
</div>
</div>
</div>
}
</fieldset>
}
The b3 syntax may look a bit odd to you. It comes from a play bootstrap library: http://adrianhurt.github.io/play-bootstrap/
For b3 select fields, the default option is automatically assigned a value of an empty string. This is what I want to change my selection choice back to using JQuery.

The solution is as adis said in his comment. Using _id -> foo changes the id of the entire form-group (the label and the dropdown), but it does not change the id of the selection box specifically. You have to use id -> foo to do that.