using ng repeat mouseover ng show - javascript

Hi i am displaying a user list using ng repeat.
what i want is when i hover over the user buttons will appear.. and after i leave it will disappear i tried this pls ..
with this code after i hoveer it show icons for whole list
HTML
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons" ng-mouseover="showHover()" ng-mouseleave="hideHover()">
<a class="userlist" href="#" ng-click="getProfile(person)">
<div class="hoverText">
<div class="col-md-1 col-xs-1 text-medium text-center">
<img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
</div>
</a>
<div class="col-md-2 col-xs-2 no-padding"><button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'" ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div ng-show="hoverIcons">
<div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
<i class="md-message"></i>
</div>
<div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
<i class="md-email"></i>
</div>
<div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
<i class="md-add-circle-outline"></i>
</div>
</div>
js
$scope.showHover = function (){
$scope.hoverIcons = true;
}
$scope.hideHover = function (){
$scope.hoverIcons = false;
}

The issue your facing is caused by the missing of an index on your $scope.hoverIcons variable.
You should add and index to your variable name to get a boolean for each person.
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons track by $index" ng-mouseover="showHover($index)" ng-mouseleave="hideHover($index)">
<!-- more code here -->
<div ng-show="hoverIcons{{$index}}">
<!-- more code here -->
</div>
</div>
in addition you should use this index in js :
$scope.showHover = function (index){
$scope['hoverIcons' + index] = true;
}
$scope.hideHover = function (index){
$scope['hoverIcons' + index] = false;
}
I hope it may helps

You can do this as follows;
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons" ng-mouseover="showHover(person)" ng-mouseleave="hideHover(person)">
<a class="userlist" href="#" ng-click="getProfile(person)">
<div class="hoverText">
<div class="col-md-1 col-xs-1 text-medium text-center">
<img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
</div>
</a>
<div class="col-md-2 col-xs-2 no-padding">
<button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'" ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div ng-show="person.hoverIcons">
<div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
<i class="md-message"></i>
</div>
<div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
<i class="md-email"></i>
</div>
<div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
<i class="md-add-circle-outline"></i>
</div>
</div>
</div>
.
$scope.showHover = function (person) {
person.hoverIcons = true;
}
$scope.hideHover = function (person) {
person.hoverIcons = false;
}

try this if using of CSS is not an issue.
You can then remove ng-mouseover directives
<style>
.hoverText .hoverIcons {
display:none;
}
.hoverText:hover .hoverIcons {
display:block;
}
</style>
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons">
<a class="userlist" href="#" ng-click="getProfile(person)">
<div class="hoverText">
<div class="col-md-1 col-xs-1 text-medium text-center">
<img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
</div>
</a>
<div class="col-md-2 col-xs-2 no-padding"><button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'"
ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div class="hoverIcons">
<div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
<i class="md-message"></i>
</div>
<div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
<i class="md-email"></i>
</div>
<div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
<i class="md-add-circle-outline"></i>
</div>
</div>
</div>

Related

modal show event is not firing

I have one view in asp.net MVC application, in which i have one table. on each row i have one anchor tag which will open modal window. I have written some code on modal show event. but the event is not firing. my view's layout is coming from custom layout page.following is the code for my view.
#Model
#Imports System.Data
#Code
ViewBag.Title = ViewBag.Title
Layout = "~/Views/Shared/_MyLayout.vbhtml"
End Code
#Section js
<script src="#Session("baseurl")/Scripts/bootstrap.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery.min.js"></script>
End Section
#section css
End Section
<script src="#Session("baseurl")/Scripts/jquery-1.12.4.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-ui.js"></script>
<link href="#Session("baseurl")/Styles/jquery-ui.css" rel="stylesheet" />
<link href="#Session("baseurl")/Styles/jquery.dataTables.min.css" rel="stylesheet" />
<script src="#Session("baseurl")/Scripts/jquery.dataTables.min.js"></script>
<form action="#Session("baseurl")/ContainerList/List" method="post">
<div class="row pl-md-1 pb-0">
<div class="col-md-12 pl-1">
<p class="lead" id="heading">#ViewBag.Heading</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="alert alert-info form-control" id="infomsg">
<label id="lblInfo" class="fa fa-info-circle">#Session("InfoMsg")</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 border border-primary pt-2 pb-2">
<div class="row pb-3">
<!--<div class="col-md-2 pt-1">
<label Class="col-form-label">#Session("ContainerNo")</label>
</div>
<div class="col-md-3">
<input type="text" name="containerno" id="containerno" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
<div class="col-md-2"></div>-->
<div class="col-md-2">
<label Class="col-form-label">#Session("BOLNumber")</label>
</div>
<div class="col-md-5">
<input type="text" name="bolnumber" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
</div>
<div class="row">
#If Session("Lang") = "E" Then
#:<div Class="col-md-2 pr-0">
Else
#:<div Class="col-md-2 pl-0">
End If
<Label Class="col-form-label">#Session("FromRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input class="form-control form-control-sm font-weight-bold readonly" type="text" placeholder="dd/mm/yyyy"
name="fromrecvdate" id="fromrecvdate" style="width:100%" maxlength="12" />
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<label Class="col-form-label">#Session("UptoRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input type="text" class="form-control form-control-sm font-weight-bold readonly" placeholder="dd/mm/yyyy"
name="uptorecvdate" id="uptorecvdate" style="width:100%" maxlength="12" />
</div>
</div>
</div>
<div class="row pt-3">
#If Session("Lang") = "E" Then
#:<div Class="col-md-12 text-right">
Else
#:<div Class="col-md-12 text-left">
End If
<button type="submit" name="BtnCntList" class="btn btn-info">
<i class="fa fa-search"></i>
#Session("BtnCntList")
</button>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row pt-3">
<div class="col-md-12">
#If ViewBag.RowCount > 0 Then
#:<table id="cntlist" class="table-responsive table table-bordered table-hover table-lightfont table-condensed">
#:<thead class="thead-light">
#:<th>#Session("tdcontainerno")</th>
#:<th>#Session("tdbolnumber")</th>
#:<th>#Session("tdarrivaldate")</th>
#:<th>#Session("tdrecvddate")</th>
#:<th>#Session("tdsku")</th>
#:<th>#Session("tdagent")</th>
#:<th>#Session("tdlot")</th>
#:<th>#Session("tdstatus")</th>
#:<th></th>
#:</thead>
#:<tbody>
#For Each row As System.Data.DataRow In Model.Rows
#:<tr>
For Each cell In row.ItemArray
#:<td>#cell.ToString</td>
Next
#:<td><i class="fa fa-file-text-o"></i></td>
#:</tr>
Next
#:</tbody>
#:</table>
End If
</div>
</div>
following is the HTML code for modal
<div id="cntdetail" class="modal show fade" data-backdrop="static" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6>#Session("CntDetails")</h6>
</div>
<div class="modal-body">
<input type="text" name="containerno" />
<input type="text" name="lot" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
Close
</button>
</div>
</div>
</div>
</div>
following is the JavaScript for event firing for modal show
<script>
$(function () {
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});
});
</script>
Try activating the modal via javascript using class instead of data-target.
$(".yourModalClassHere").click(() => {
$('#cntdetail').modal('show');
})
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});

Order HTML divs to their corresponding div with JavaScript

In this image
,
you can see a side menu. There is an offline, online and construction panel. Also there are a few locations, each location is a block(the two buttons are attached to its div). These are hardcoded, I'm trying to automate them instead. based on some values in my code "OFF", "ON" or "construction" the blocks should be ordered to their corresponding panel. What's the best way to do this? I want to see the blocks reposition without having to refresh.
This is a basic Jsfiddle of the menu above:
https://jsfiddle.net/3zq4Lpxb/
Entire HTML for the site menu: https://pastebin.com/e8VKmLZH
FYI: I'm creating a webapplication, using MVC5, ASP.net.
Basic snippet of HTML:
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Isfanbul</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Monolith</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">New Haven</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">JejuIsland</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
This works as specified if the item-group gets one of the 3 classes matching the ID of the panel
const reorderDivs = () => {
[...document.querySelectorAll(".panel")].forEach(panel => {
const id = panel.id;
[...document.querySelectorAll("." + id)].forEach(item => {
const parentContainer = panel.querySelector(".panel-body");
// console.log(item.querySelector(".item-title").textContent,"moved to",id);
parentContainer.appendChild(item);
})
})
};
// example toggle code
const classes = ['offline', 'construction', 'online'];
window.addEventListener("load", () => {
reorderDivs(); // initialise
document.getElementById("rightMenu").addEventListener("click", function(e) { // example of a toggle
const tgt = e.target;
if (tgt.classList.contains("toggle")) {
const item = tgt.closest(".item-group");
const classList = item.classList;
for (let cl of classList) {
const idx = classes.indexOf(cl);
if (idx !== -1) { // found
classList.remove(cl);
newClass = classes[(idx + 1) % classes.length];
}
}
classList.add(newClass)
reorderDivs();
}
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger" id="offline">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">Isfanbul <button class="toggle" type="button">Switch state</button></div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group construction">
<div class="col-lg-6 item-title">Monolith CONSTRUCTION</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="construction">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group online">
<div class="col-lg-6 item-title">New Haven ONLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success" id="online">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">JejuIsland OFFLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>

onclick with same class

I have Div1 and Div2 inside this divs i have multiple inputs.
The goal is when i click on div 1 btn edit it shows the inputs inside div 1 and the same to div2
My html
My 1º Div
<div class="col-lg-6 col-md-6 xxx">
<div class="row form-group ">
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 1</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My 2º div
<div class="row form-group " >
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 2</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My jquery code:
$("body").on("click", ".xxx",function(){
$(this).parent().find(".edit_xxx").toggle();
});
The final goal is when click inside .xxx it opens the input id click again closes the input from DIV1 the same if click on div2
Thanks for the help, i realy suck with jquery.
The answer!
$("body").on("click", "#edit",function(){
$(this).parents(".xxx").children("#edit_xxx").toggle();
});

How to take the particular details in one division in jquery

Here I have two property details.
If I click first property contact button myFunction() it means I want to take property name 3BHK Individual House for SELL in Jayanagar and property id 1.
If I click second property contact button myFunction() it means I want to take property name 10BHK Individual House for SELL in Jayanagar and property id 2.
How can I do this?
var htmlString='';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=1"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name""="">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button></div></div></div></div></div>';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=5852408f05dd7b0320e3473d"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name""="">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button></div></div></div></div></div>';
$('#prop_listing').empty().append(htmlString);
function myFunction(that) {
name = $(that).closest('.prptylstt').find('.property_name').html();
console.log(name);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="prop_listing"></div>
move the code out of the HTML
use a class to access all buttons
use UNIQUE IDs or no IDs
a div does not have a value but has text() or html()
use type=button to not submit the form/page
$(function() {
$(".prlstbtn").on("click", function(e) {
var $list = $(this).closest(".prptylstt"),
name = $list.find(".property_name").text(),
id = $list.find(".p_id").attr("href").split("id=")[1];
console.log(id, name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=1"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">3BHK Individual House for SALE in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button type="button" class="btn btn-default prlstbtn">Contact</button>
</div>
</div>
</div>
</div>
</div>
<div class="row prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=2"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">10BHK Individual House for SALE in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 25.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button type="button" class="btn btn-default prlstbtn">Contact</button>
</div>
</div>
</div>
</div>
</div>
$(this) refer which button clicked.In onclick function without declaration this not performed.so apply with in the function like this myfuntion(this) .Then this declare in a variable that in DOM.
And then apply with jquery function of closest() and find() method
closest() to match the parent of the div and find() to match the inner element respected with clicked button.
function myFunction(that) {
var name = $(that).closest('.prptylstt').find('.property_name').html();
var id =/(id=)(\w+)/g.exec($(that).closest('.prptylstt').find('.p_id').attr('href'))
console.log(name);
console.log(id[2])
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row prptylstt" id="prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=1"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">3BHK Individual House for SELL in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button>
</div>
</div>
</div>
</div>
</div>
<div class="row prptylstt" id="prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=2"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">10BHK Individual House for SELL in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 25.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button>
</div>
</div>
</div>
</div>
</div>
or
Try with jquery script like this.It's easy to solve your problem.you can use $(this)
$(document).ready(function(){
$('.btn-default').click(function(){
var name = $(this).closest('.prptylstt').find('.property_name').html();
var id =/(id=)(\w+)/g.exec($(this).closest('.prptylstt').find('.p_id').attr('href'))
console.log(name);
console.log(id[2])
})
})
Updated answer for upadated Question
class name of the property_name is spell mistake "=" and both html content are 3BHK .i was corrected with that. see the below snippet.Its work out with query
var htmlString='';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=1"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class="property_name">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" >Contact</button></div></div></div></div></div>';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=5852408f05dd7b0320e3473d"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name">10BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" >Contact</button></div></div></div></div></div>';
$('#prop_listing').empty().append(htmlString);
$(document).on('click','.btn',function(){
name = $(this).closest('.prptylstt').find('h4').eq(0).html();
console.log(name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="prop_listing"></div>

how to get values from field which is out of form

I have a form
<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Title</label>
<form:input path="title" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Company</label>
<form:input path="company" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label" >Location</label>
<form:input path="location" cssClass="form-control"/>
</div>
</div>
</div>
<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal">Toggle Modal</a>
<div class="form-group">
<div class="row">
<div class="col-md-10 col-md-push-1">
<button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
</div>
</div>
</div>
</form:form>
when I click on the link in form which is
<a class="btn btn-block waves-button waves-effect" data-toggle="cat" href="#modal">Show cat</a>
I want to show the following
<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Seclect Categories</h2>
</div>
<div class="modal-inner">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="modal-footer">
<p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p>
</div>
</div>
</div>
</div>
I want to get values selected from select and submit them when I submit the form using Javascript, I'm unable to place the select field in form for some reason.
You will need to use a javascript function. You can either have the cat div loaded from the beginning and hidden using javascript to show/hide it or you can call it via Ajax.
I included the div in your form and set the style to hidden with javascript either revealing it or hiding it on click. You can remove the if and just set to to display block when clicked if you don't want to hide it again. It's worth noting that this will not clear the values. If you want to clear values when closing it then you should call it with AJax and clear the div when closing.
<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Title</label>
<form:input path="title" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Company</label>
<form:input path="company" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label" >Location</label>
<form:input path="location" cssClass="form-control"/>
</div>
</div>
</div>
<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal" onClick="swap(); return false">Toggle</a>
<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1" style="display: none;" >
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Seclect Categories</h2>
</div>
<div class="modal-inner">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="modal-footer">
<p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-10 col-md-push-1">
<button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
</div>
</div>
</div>
<script type="text/javascript">
var counter = 1
function swap() {
if (counter%2 == 0) {
document.getElementById('cat').style.display = 'none';
}
if (counter%2 != 0) {
document.getElementById('cat').style.display = 'block';
}
counter += 1;
}
</script>
</form:form>

Categories