I'm attempting to run some JQuery when clicking on a List Item but the click event does not seem to fire when checking in debugger.
The Script is:
$(document.body).on('click', '.range', function (event) {
var rangeid = $(this).data('value');
var url2 = '/Home/GetMachineTypeByRange/-1';
url2 = url2.replace("-1", rangeid);
$.get(url2, function (data) {
$('#MachineTypeDropDown').html(data);
$('#MachineTypeDropDown').toggle();
});
});
And my HTML is:
<div class="button-group">
<button type="button" class="btn btn-default dropdown-toggle col-md-12" data-toggle="dropdown">Select a product category <span class="caret"></span></button>
<ul id="RangeDropDown" class="dropdown-menu col-md-12" data-url="/Home/GetRangeForCorp">
<li class="range" data-value="1">Articulated Dump Trucks</li>
...
</ul>
</div>
<div class="button-group" style="display: none;">
<button type="button" class="btn btn-default dropdown-toggle col-md-12" data-toggle="dropdown">Select a machine type <span class="caret"></span></button>
<ul style="display: none;" id="MachineTypeDropDown" class="dropdown-menu col-md-12"></ul>
</div>
it should work
with test code
$(document.body).on('click', '.range', function (event) {
alert("test");
});
look at this fiddle
https://jsfiddle.net/d15czyt3/
i suspect your get is failing
Your code work "fine", the problem should be that the event is propagating to it's parent...
This solve it:
$(document.body).on('click', '.range', function (event) {
event.stopPropagation();//-> the event execute 1 time the code!
var rangeid = $(this).data('value');
var url2 = '/Home/GetMachineTypeByRange/-1';
url2 = url2.replace("-1", rangeid);
console.log(url2 + " | " +rangeid);
$.get(url2, function (data) {
$('#MachineTypeDropDown').html(data);
$('#MachineTypeDropDown').toggle();
});
});
event.stopPropagation()
, check also if url2 is getting the url you really want (if it's correct) and you may want to use post instead of get, because get to increase performance uses "web cache information"
Related
I am having trouble with a very simple thing. I have two buttons inside a dropdown, and I can't detect when the user click on them. The rest of the buttons works well, less this two.
The buttons are:
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Nodes</button>
<ul class="dropdown-menu" id="NodeFilters">
<button type='button' class='btn btn-secondary btn-sm' id='allFilter'>All</button>
<button type='button' class='btn btn-secondary btn-sm' id='cleanFilter'>Clean</button>
</ul>
</div>
My function is:
//This function controls if some button is clicked
function btnController(){
$('.btn').click(function(){
let id_btn = $(this).attr("id");
console.log(id_btn);
if(id_btn == 'allFilter' | id_btn == 'cleanFilter'){
alert('sss')
}
});
}
$(document).ready(function() {
btnController();
} );
When I click the rest of the buttons, the console.log(id_btn); prints the id of the button. But when I click these two buttons inside the dropdown, nothing happens. Why is this happening?
Note: When I click these buttons, the dropdown always gets closed.
Can somebody help me? Thank you very much!
Use event delegation like this:
$(function(){
$(document).on('click', '.btn', function(){
let id_btn = $(this).attr("id");
console.log(id_btn);
if(id_btn === 'allFilter' || id_btn === 'cleanFilter'){
alert('sss')
}
})
})
I am trying to trigger a click on the following element, and then get the innertext of it.
<a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">Show result</a>
After "onClick" has been triggered, it should look like this:
<a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">1 : 2</a>
This is the code I've tried:
$winner = $this->data->find('.btn-sm', 0)->onclick->innertext;
I am trying to get the 1 : 2 from "innertext".
It is not working, and I don't know if it even does. But any help is appreciated.
You can try it using textContent() and jQuery on event handler:
<?php
//php code
?>
<script>
$('.btn-sm').on('click', function() {
var txt = $(this).textContent();
})
</script>
I want to add an dynamic input element onClick with jQuery and make the link disable. On deleting the input element that I just added I want to make the link clickable again.
I did the first part of adding element and making the link disable but the problem is when I add multiple elements and try to delete only one element all other links become clickable. I know, because I have given class to dropdown links. Not sure what to do to get this working right.
Here is my code:
$(document).ready(function() {
$(".list").on('click', function() {
$("#blockFeild").append(
'<div class="row parent">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<button class="btn btn-info" id="editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'<br><br>' +
'</div>'
).show();
});
});
$(document).on('click', 'a.list ', function() {
$(this).addClass('no-click');
});
$(document).on('click', 'li.block', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", "#removebtn", function() {
$(this).closest('.parent').remove();
$(".block").removeClass("not-allowed");
$(".list").removeClass("no-click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<?php $users_fields=$ this->db->list_fields('users'); for ($i=0; $i
<count($users_fields); $i++){ ?>
<li class="block">
<a class="list" href="#">
<?php echo $users_fields[$i]?>
</a>
</li>
<?php } ?>
</ul>
</div>
Your problem stems from duplicate ids (#removebtn, remember ids must be unique) and also this section of your code:
$(".block").removeClass("not-allowed");
$(".list").removeClass("no-click");
These two lines grab all elements on the page with the classes "not-allowed", and "no-click" respectively and then remove those classes. This is why the removal of one of your rows enables all your dropdown links again.
You need to create a way to associate a generated row with ONLY the link used to generate it, perhaps through the addition of an identifying class on both the row and link. That way when the row is destroyed you can use jQuery to grab that specific link element and re-activate it.
UPDATE
Now that I understand the OP better I updated this Snippet with .index() and .eq() in order to associate the correct .block .list with a matched .removebtn. Also replaced .remove() with .hide(). Works perfect.
Change all ids to classes. ex. from #removebtn to .removebtn. You can only have unique ids. When elements are generated, they have the same id, so that's why they are all affected. I don't quite fully understand OP's objective, but I bet having duplicate ids is the root of the problem.
In order to remove a .parent.row on it's own .removebtn replace the last 4 lines with these lines:
$('.list').on('click', function() {
$(this).addClass('no-click');
});
$('.block').on('click', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", '.removebtn', function(e) {
var tgt = $(this);
idx = tgt.closest('.row').index()
$('.block').eq(idx).removeClass('not-allowed').find('.list').removeClass('no-click');
tgt.closest('.row').hide();
});
SNIPPET
$(document).ready(function() {
$(".list").on('click', function() {
$(".blockfield").append(
'<div class="row parent">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'<button class="btn btn-info editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'<br><br>' +
'</div>' +
'</div>'
).show();
});
});
$('.list').on('click', function() {
$(this).addClass('no-click');
});
$('.block').on('click', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", '.removebtn', function(e) {
var tgt = $(this);
idx = tgt.closest('.row').index()
$('.block').eq(idx).removeClass('not-allowed').find('.list').removeClass('no-click');
tgt.closest('.row').hide();
});
.no-click {
pointer-events: none;
}
.not-allowed {
cursor: not-allowed;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="block">
<a class="list" href="#">1</a>
</li>
<li class="block">
<a class="list" href="#">2</a>
</li>
<li class="block">
<a class="list" href="#">3</a>
</li>
</ul>
</div>
<section class='blockfield'>
</section>
I faced this problem previously that my code does not work with
$(document).on.....
So firstly you change the duplication of ids as foxinatardis said and test this:
$(document).delegate('.class_off_button', 'click', function (){
//what you want to do
});
var stringhtml = $('<div class="row" id="ao-clonedata">' + '<div class="col-lg-12 form-inline ao-content-padding">' + '<div class="col-xs-1 pull-left ao-from-triggers">'+'<a class="add-link ao-minus-color" title="Remove">'+'<i class="fa fa-minus fa-lg"></i></a>'+'<a class="add-link ao-plus-color ao-spacing-icon" title="Add"><i class="fa fa-plus fa-lg"></i></a>'+'</div> '+'<div class="col-xs-5 dropdown pull-left ao-padding-zero">'+'<button class="btn dropdown-toggle ao-substitute-dropdown ao-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'+'<span class="pull-left" id="ao-substitute-from">Select Value</span><i class="caret pull-right custom-dropdown-caret"></i>'+'</button>'+'<ul class="dropdown-menu ao-substitute-ul-dropdown" aria-labelledby="substituteFrom">'+'<li onclick="ChangeSubstituteStatus(1,'+' "Select Value",'+' this)">Select Value</li>'+'</ul>'+'</div>'+'<div class="col-xs-1">'+'<i class="fa fa-arrow-right fa-lg ao-substitute-arrow" id="ao-arrowbutton"></i>'+'</div>'+'<div class="col-xs-5">'+'<div class="form-inline" id="ao-clonetodata">'+'<div class="dropdown ao-substitute-dropdown pull-left">'+'<button class="btn dropdown-toggle ao-substitute-dropdown ao-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'+'<span class="pull-left" id="ao-substitute-to">Select Value</span><i class="caret pull-right custom-dropdown-caret"></i>'+'</button>'+' <ul class="dropdown-menu ao-substitute-ul-dropdown" aria-labelledby="substituteTo">'+'<li onclick="ChangeSubstituteToStatus(1, "Select Value", this)">Select Value</li>'+'<li onclick="ChangeSubstituteToStatus(2, "About Time", this)">About Time'+'</li>'+'</ul>'+'</div>'+'</div>'+'</div>'+'</div>'+'</div>');
Creating this HTML on click of an initial(X) button, after creating this html,need to clone this html on click of ".ao-plus-color" (which is there in above HTML). so whatever method i wrote for ".ao-plus-color" is not working.
method for ".ao-plus-color" is :
$(".ao-plus-color").on('click', function () {
CCounter = $("#ao-clonewrapper > .row").length + 1;
var clonedata = $("#ao-clonedata").clone(true).attr("id", "ao-clonedata" + CCounter).appendTo("#ao-clonewrapper");
CCounter++;
var clonedatalength = $("#ao-clonewrapper > .row").length;
if (clonedatalength > 0) {
$("#ao-remove-all").show();
} });
can any one help me out to solve this? thanks in advance!
You should bind the event to already created element ao-plus-color is also dynamically created.Use document like
$(document).on('click','.ao-plus-color', function () {
You need to use event delegation for attaching events to dynamically added elemens:
$("body").on('click',".ao-plus-color", function () {
CCounter = $("#ao-clonewrapper > .row").length + 1;
var clonedata = $("#ao-clonedata").clone(true).attr("id", "ao-clonedata" + CCounter).appendTo("#ao-clonewrapper");
CCounter++;
var clonedatalength = $("#ao-clonewrapper > .row").length;
if (clonedatalength > 0) {
$("#ao-remove-all").show();
}
});
Maybe is my question trivial, but I could not found a answer. Maybe I have been to much hours in front of the monitor :)
I have this situation:
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list" id="protokol"> List Studens</a>
</div>
This represent a button and with the click event, using MVC, the controller Student is called and the function list executed. But I need to send a parameter to this function that is the value of a HTML component.
<input type='text' id='parm' value=''>
How I can do this using the same structure? I tryed this, but is not correct
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list&v=<script>$('param').val();</script>" id="protokol"> List Studens</a>
</div>
If you're using jQuery you can attach a click handler to that element which appends the current value of the input. Try this:
$(function() {
$('#protokol').click(function(e) {
e.preventDefault(); // prevent the browser going to the default URL
var url = $(this).attr('href') + '&v=' + $('#param').val();
window.location.assign(url);
});
});
try this instead
<div class="col-xs-3" style='margin-left: -50px;'>
<a id="targetLink" class="btn btn-primary" href="?c=Student&a=list&v=<script></script>" id="protokol"> List Studens</a>
</div>
//document ready
$(function(){
var parameter = $('param').val();
$('#targetLink').attr('href', '?c=Student&a=list&v=' + parameter);
});