We Keep Coding

Button within modal's table not firing [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
Attempted to put a delete button that works in a table into a modal, with a table and it's like the click event is not firing at all. Hit's not back end code, no console.log(s), or js break points. Am I missing something?
Modal's Table
<table class="table table-hover table-md ">
<thead>
<tr>
<td class="text-left TableHead">Role</td>
<td class="text-right TableHead">Delete</td>
</tr>
</thead>
#*--Table Body For Each to pull DB records--*#
<tbody>
#foreach (var role in Model.Roles)
{
<tr>
<td>#role</td>
<td>
<button class="sqButton btnRed float-right zIndex"
title="Delete" data-toggle="ajax-modal" data-target="#deleteRoleUser"
data-url="#Url.Action("Delete", "Administration",
new {Id = Model.Id , Type = "roleUser"})" >
<i class="glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
}
</tbody>
</table>
Controller that it's supposed to call
[HttpGet]
public async Task<IActionResult> Delete(string id, string type)
{
if (type == "user") {
ViewBag.Type = "user";
var user = await userManager.FindByIdAsync(id);
if (user == null)
{
ViewBag.ErrorMessage = $"User with Id = {id} cannot be found";
return View("NotFound");
}
var model = new EditUserViewModel
{
Id = user.Id,
UserName = user.UserName,
};
ViewBag.UN = user.UserName;
return PartialView("~/Views/Modals/_DeleteModalPartial.cshtml", model);
}
if (type == "roleUser")
{
ViewBag.Type = "roleUser";
var role = await roleManager.FindByIdAsync(id);
if (role == null)
{
ViewBag.ErrorMessage = $"Role with Id = {id} cannot be found";
return View("NotFound");
}
var model = new EditRoleViewModel
{
Id = role.Id,
RoleName = role.Name,
};
ViewBag.Role = role.Name;
return PartialView("~/Views/Modals/_DeleteModalPartial.cshtml", model);
}
else
{
ViewBag.ErrorMessage = $"cannot be found";
return View("NotFound");
}
}
I am not sure why the click event on the button is not working at all. I have tried removing random code and literally nothing is making it go over to the controller at the least.
EDIT added javascript
$(function () {
var placeholderElement = $('#modal-placeholder');
$('[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});
});
$('.sqButton').click( function (event) {
event.stopPropagation();
});

Since the button doesn't exist on page load you will have to create a event delegate to something that does exist on page load that will attach the event to the right element when it finally does appear in the DOM
In this case we will use the document (because it always exists on page load, some people use 'body') to delegate the event to the [data-toggle="ajax-modal"], like this:
$(document).on('click', '[data-toggle="ajax-modal"]', function (event) {
// code here
});
This will attach the event to the [data-toggle="ajax-modal"] elements on page load AND after page load if the element gets added later.

Try replacing your javascript code
$('.sqButton').click( function (event) {
event.stopPropagation();
});
With the following code
$('.sqButton').click(function(event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});

if you manually force click, does it hit your controller?
document.querySelector('.btnRed').click();
is there any other element(s) "hijacking" click event?

how to hide and show image and text tags according to values returned from array loop

I am trying to create a questionnaire here. The questions and options are being fetched from a database via API. Some of the options to choose from will be images. I inserted the image link to my database. I am looking for a way to hide text and show image if the option is an image and also show text and hide image if the option is a text
What i have tried so far;
my image link looks like something like this: "../../folder/img.jpg" so i recognize an image link by the first two parts of the string.
I already tried iterating over the options with a for each loop like this:
imgOption: boolean = false;
textOption: boolean = false;
this.opts.forEach(element => {
if ( element.slice(0, 2) == ".." ) {
this.imgOption = true;
this.textOption = false;
} else {
this.imgOption = false;
this.textOption = true;
}
});
But then, the whole value comes out as text
display result
Here is my template file:
<ul *ngFor = "let o of opts; let i = index">
<li (click)='onSelect(o, i)' id="{{i}}">
<span *ngIf='textOption'>{{o}}</span>
<img *ngIf='imgOption' src="{{o}}" alt="img" class="imgOption">
</li>
</ul>
I want the loop to return true or false to only the index that matches the condition stated and not display everything as an image or text. Please how do I go about this. Thanks in advance.

You should use a method to check whether it is a img option or text option inside your for loop. For example,
<ul *ngFor = "let o of opts; let i = index">
<li (click)='onSelect(o, i)' id="{{i}}">
<span *ngIf="checkOption('text',o)">{{o}}</span>
<img *ngIf="checkOption('img',o)" src="{{o}}" alt="img" class="imgOption"/>
</li>
</ul>
Then you can use that method to return true or false.
checkOption(type,o) {
if(type="img"){
if ( o.slice(0, 2) == ".." ) {
return true;
}else { return false;}
} else {
if ( o.slice(0, 2) == ".." ) {
return false;
}else { return true;}
}
}

Try something like this. Your array needs to store the show/hide state for each value, rather than having one variable set for all.
opts = [{imageOption: true, value: '../mylink.jpg'}, {imageOption: false, value: 'another value'}];
this.opts.forEach(element => {
if ( element.slice(0, 2) == ".." ) {
element.imageOption = true;
} else {
element.imageOption = false;
}
});
HTML
<ul *ngFor = "let o of opts; let i = index">
<li (click)='onSelect(o, i)' id="{{i}}">
<span *ngIf='!o.imageOption'>{{o.value}}</span>
<img *ngIf='o.imageOption' src="{{o.value}}" alt="img" class="imgOption">
</li>
</ul>

You have to manage imgOption and textOption for every opts elements, in your case variable is element.
You can follow below code where "element.value" is equivalent to your previous variable "element" and fix html code accordingly.
this.opts.forEach(element => {
if ( element.value.slice(0, 2) == ".." ) {
element.imgOption = true;
element.textOption = false;
} else {
element.imgOption = false;
element.textOption = true;
}
});

I had the similar requirement in my old project easiest way to go about this is to add two new properties imgOption and textOption to your Options model in UI and for each option value returned update imgOption and textOption according to your condition
once you make this changes your code should look something like below
this.opts.forEach(element => {
if ( element.value.slice(0, 2) == ".." ) {
element.imgOption = true;
element.textOption = false;
} else {
element.imgOption = false;
element.textOption = true;
}
});
HTML should be
<ul *ngFor = "let o of opts; let i = index">
<li (click)='onSelect(o, i)' id="{{i}}">
<span *ngIf='o.textOption'>{{o}}</span>
<img *ngIf='o.imgOption' src="{{o}}" alt="img" class="imgOption">
</li>
</ul>

how to get exact text value inside a tag in jquery when entities are used

I have a list inside a anchor tag like this
<a href="#" class = "set_priority" data-value = "{{$candidate->id}}" style="text-decoration: none;">
#if($candidate->priority == "")
<li> Prioritize</li></a><br>
#elseif($candidate->priority == "yes")
<li> Deprioritize</li></a><br>
#endif
I have used entity &nbsp for styling purpose. The above code generate html tag according to the response from the server. So it might look either one of these
<li> Prioritize</li>
<li> Deprioritize</li>
I want to alert something when the list item is clicked. I don't know how to compare when &nbsp is used
$('.set_priority').on('click',function(){
var priority_value = $(this).first().text();
if (priority_value = "Prioritize") {
alert('he Prioritised');
}
else if (priority_value = "Deprioritize") {
alert('Prioritised');
}
});
It always alerts alert('he Prioritised'); whatever may be the condition.

You should use comparison operator instead assignment operator and use trim method to remove spaces.
$('.set_priority').on('click',function(){
var priority_value = $(this).first().text().trim();
if (priority_value == "Prioritize") {
alert('he Prioritised');
}
else if (priority_value == "Deprioritize") {
alert('Prioritised');
}
});

replace &nbsp with empty in temporary variable, then compare it. like:-
var priority_value = $(this).first().text();
var temp = priority_value.replace(/ /gi,'');
if (temp == "DePrioritize") {
alert('he Prioritised');
}
else if (temp == "Deprioritize") {
alert('Prioritised');
}

I think you should set the click handler like this
$('set_property li').on('click', function(){
var priority = $(this).first().text(); // This will give you the actual clicked element
// .... rest is same
});

How to group all product of single brand together - angular JS

Please see this JS fiddle link.
http://jsfiddle.net/4Dpzj/174/
This is the logic for group by
app.filter('groupBy', ['$parse', function ($parse) {
return function (list, group_by) {
var filtered = [];
var prev_item = null;
var group_changed = false;
// this is a new field which is added to each item where we append "_CHANGED"
// to indicate a field change in the list
//was var new_field = group_by + '_CHANGED'; - JB 12/17/2013
var new_field = 'group_by_CHANGED';
// loop through each item in the list
angular.forEach(list, function (item) {
group_changed = false;
// if not the first item
if (prev_item !== null) {
// check if any of the group by field changed
//force group_by into Array
group_by = angular.isArray(group_by) ? group_by : [group_by];
//check each group by parameter
for (var i = 0, len = group_by.length; i < len; i++) {
if ($parse(group_by[i])(prev_item) !== $parse(group_by[i])(item)) {
group_changed = true;
}
}
}// otherwise we have the first item in the list which is new
else {
group_changed = true;
}
// if the group changed, then add a new field to the item
// to indicate this
if (group_changed) {
item[new_field] = true;
} else {
item[new_field] = false;
}
filtered.push(item);
prev_item = item;
});
return filtered;
};
I want to group all the products together.
what changes i need to do ?

I come up with this in my mind. Without using any custom filters.
I simply use this ng-repeat syntax :
ng-repeat="(key,item) in MyList | orderBy:orderKey"
Thanks to it i can get the key to compare the value with the previous object.
Here is my ng-show attribute. It can be improved by sorting the list somewhere else (like in the controller)
<h2 ng-show="(MyList | orderBy:orderKey)[key-1][orderKey] !== (MyList | orderBy:orderKey)[key][orderKey]"
Thanks to this you can populate your var "orderKey" with any of your attribute name and this will works.
See it working in this JSFiddle
Hope it helped.
EDIT :
I think it would be a bit cleaner to use a temporary list to manage the visual order (see it in this JSFiddle):
JS :
$scope.orderList = function(){
$scope.orderedList = $filter('orderBy')($scope.MyList,$scope.orderKey);
}
HTML :
ng-change="orderList()" To trigger the list sort
The cleaner ng-repeat / ng-show
<div ng-repeat="(key,item) in orderedList">
<h2 ng-show="orderedList[key-1][orderKey] !== orderedList[key][orderKey]">{{item[orderKey]}} </h2>
<ul>
<li>{{item.ProductName}}</li>
</ul>
</div>

Have a look at this:
http://jsfiddle.net/4Dpzj/176/
<div ng-repeat="item in MyList | orderBy:['SubCategoryName','BrandName'] | groupBy:['SubCategoryName']" >
<h2 ng-show="item.group_by_CHANGED">{{item.SubCategoryName}} </h2>
<ul>
<li>{{item.ProductName}} --- {{item.BrandName}}</li>
</ul>
</div>

HTML.Action Loop results in wrong model on page (variable scope pollution?)

I have a view (cshtml) that has a tab strip on it. The contents of each tab is of course different. The individual tabs have the correct data/information on them. There is some javascript that is intended to fire when a selection is made from the control on the individual tab. As it stands right now the first tab rendered the javascript fires. All other tabs do not fire. Further on the tab that does fire (first one) it obtains the correct value but then when trying to find the matching item in the model it doesn't find a match. Debugging shows that only the data for the last tab is available in the model. Well that explains why no match but begs the question of where did the data the first page was populated with go?
I have snipped the code for brevity. If, in my ignorance I left something out just say so and I'll post whatever is needed.
So to start here is the parent cshtml:
foreach (var extbrd in Model.ExternalBoards)
{
tabstrip.Add()
.Text(extbrd.ExtForumName)
.ImageUrl("~/.../ForumTabIcon.png")
.Content(#<text>
<div>
#Html.Action("ActionName", "Controller", new { id = extbrd.BoardId });
</div>
</text>);
}
Well as you can see above as we loop we call an action in the controller for each tab. Here is that action:
public ActionResult ActionName(int extforumid)
{
//get url for selected forum (tab) and pull feed
ExternalForums ExtFrm = _forumService.GetExternalForumById(extforumid);
reader.Url = ExtFrm.ForumUrl;
return View(reader.GetFeed());
}
That's actually it. As above I can post the reader code but I don't think it is the source of the trouble.
Well this action of course has a view and this is where I think things get wacky:
#model ExternalThreadsModel
<script type="text/javascript">
var model = #Html.Raw(Json.Encode(Model.RssThreads))
</script>
<script type="text/javascript">
$(function() {
$("##Html.FieldIdFor(model => model.ExtForumIds)").click(function () {
var selectedItem = $(this).val();
var matchingObj = getObjects(model, 'ThreadValue', selectedItem);
if(matchingObj > 0)
{
var $iframe = $('#ForumFrame');
if ( $iframe.length ) {
$iframe.attr('src', matchingObj[0].Link);
}
var $prevfram = $('#ForumPreview');
if ( $prevfram.length ) {
$prevfram.val(matchingObj[0].Description);
}
}
});
});
function getObjects(obj, key, val) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getObjects(obj[i], key, val));
} else if (i == key && obj[key] == val) {
objects.push(obj);
}
}
return objects;
}
</script>
<div>
<table>
<tr>
<td>
#Html.DropDownListFor(model => model.ExtForumIds, Model.SelectThreads, new {style = "...", #size = 30})
</td>
<td style="width:25px;"> </td>
<td>
#{ Html.Telerik().TabStrip()
.Name("ForumView")
.Items(tabstrip =>
{
tabstrip.Add()
.Text("Preview")
.Content(#<text>
<div>
<textarea style="background-color:#979797; text-decoration: none;" id="ForumPreview" name="ForumPreview" rows="26" cols="200" readonly></textarea>
</div>
</text>);
tabstrip.Add()
.Text("Interactive")
.Content(#<text>
<div>
<iframe id="ForumFrame" name="ForumFrame" src="" style="width:800px;height:350px;"></iframe>
</div>
</text>);
})
.SelectedIndex(0)
.Render();
}
</td>
</tr>
</table>
</div>
So as I mentioned each tab does have the correct data / information on it. The problem comes when a user selects an item from the drop down list.
The click handler only fires on the first tab. It doesn't fire for any other tabs???
Further on the first tab the click handler does fire and it pulls the correct selectedItem but when it runs through the helper function getobjects it doesn't find a match.
When I break and examine "model" as it is being passed into getObjects it only contains data for the last tab...so yeah nothing is going to be matched.
What is even stranger for me to understand is the line:
<script type="text/javascript">
var model = #Html.Raw(Json.Encode(Model.RssThreads))
</script>
In HTML it does render a json object with ALL the data from ALL the tabs...so...somewhere I must be running into variable scope pollution????
Your support and assistance is..as always..greatly appreciated.