I have 2 button one will open Dialog box and make some changes with its <div> and the will not open any dialog box, it will just make some styling changes within its <DIV>
I will have multiple instances of the <DIV>s which contains these 2 buttons these <DIV>s will be generating at runtime so there can be "N" number of buttons.
I have created the FIDDLE to give a demo of my code: http://jsfiddle.net/aasthatuteja/ZtLEq/
Now, for the button which "DOES NOT" generate Dialog Box, I am able to make changes using jquery by catching its ".closest ('parent div')" and then on click of this particular button, it make changes for its parent <DIV> only.
BUt the ISSUE IS: with the button which generates Dialog Box, I am not sure on click of which button the dialog box have been generated, so on submit I am not sure which particular parent <Div> should be impacted.
Below is my code:
HTML
<div id="content-1" class="content">
<div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>
<br>
<br> <span title="Reject" class="Rejected">Reject</span>
<div class="rx-statusMessage">
<br>
<br>
<p class="rx-statusAccepted nodisplay">Accepted</p>
<p class="rx-statusRejected nodisplay">Rejected</p>
<div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>
</div>
</div>
</div>
</div>
<div id="content-2" class="content">
<div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>
<br>
<br> <span title="Reject" class="Rejected">Reject</span>
<div class="rx-statusMessage">
<br>
<br>
<p class="rx-statusAccepted nodisplay">Accepted</p>
<p class="rx-statusRejected nodisplay">Rejected</p>
<div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>
</div>
</div>
</div>
</div>
<div id="content-3" class="content">
<div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>
<br>
<br> <span title="Reject" class="Rejected">Reject</span>
<div class="rx-statusMessage">
<br>
<br>
<p class="rx-statusAccepted nodisplay">Accepted</p>
<p class="rx-statusRejected nodisplay">Rejected</p>
<div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>
</div>
</div>
</div>
</div>
<div id="rejectReason" title="Reason">
<p>Please provide the reason for cancelling the session.</p>
<div class="inputRow">
<textarea id="rejectReasonBox" class="reasonBox">Incorrect Label Applied</textarea>
</div>
</div>
JQUERY
$(document).ready(function () {
function aceeptMethod() {
var $parent = $(this).closest('.rx-container');
$('.rx-statusRejected', $parent).hide();
$('.rx-statusAccepted', $parent).show();
$('.rejectReasonBox', $parent).hide();
$('.k-tabstrip-items .k-state-default .k-link', $parent).css('color', '#7ea700');
$('.k-tabstrip .k-state-active', $parent).css('border-color', '#7ea700');
$('.k-tabstrip-items .k-state-active, .k-tabstrip .k-content.k-state-active', $parent).css('background-color', '#f5f5e9');
$(this).attr("title", "Accepted");
$(this).next().attr("title", "Reject");
$(this).removeClass('Accepted');
$(this).addClass('disableAccepted');
$(this).next().removeClass('disableRejected');
$(this).next().addClass('Rejected');
checkIfAccepted();
}
function rejectMethod() {
$('.k-tabstrip-items .k-state-default .k-link').css('color', '#ff0000');
$('.k-tabstrip .k-state-active').css('border-color', '#ff0000');
$('.k-tabstrip-items .k-state-active,#content-1 .k-tabstrip .k-content.k-state-active').css('background-color', '#f5e9e9');
$('.rx-statusRejected').show();
$(".rx-statusAccepted").hide();
$(".rejectReasonBox").show();
$('.Rejected').attr("title", "Rejected");
$('.Rejected').prev().attr("title", "Accept");
$('.Rejected').addClass('disableRejected');
$('.disableRejected').prev().addClass('Accepted');
$('.disableRejected').prev().removeClass('disableAccepted');
$('.disableRejected').removeClass('Rejected');
checkIfRejected();
}
$("#rejectReason").dialog({
autoOpen: false,
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
rejectMethod();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".Accepted").click(aceeptMethod);
$(".Rejected").click(function () {
$("#rejectReason").dialog("open");
});
function checkIfAccepted() {
if ($(".rx-statusAccepted:visible").length == $(".rx-statusAccepted").length) {
$('#authorizeOrderButton').prop('disabled', false);
$('#authorizeOrderButton').removeAttr("disabled");
$('#authorizeOrderButton').removeClass("greyButton");
}
}
function checkIfRejected() {
if ($(".rx-statusAccepted:visible").length <= $(".rx-statusAccepted").length) {
$('#authorizeOrderButton').attr("disabled", "disabled");
$('#authorizeOrderButton').addClass("greyButton");
}
}
});
Please suggest!
Let me know if you need some more informatuion or if the situation is not clear.
Thanks!
Probably the easiest way is to take advantage of closures and the click event's target parameter.
Instead of defining the dialog and calling "open" on it later, you should call it when you actually need the dialog box to open within the click event like so:
$(".accept").click(function(e){
$("#rejectReason").dialog({
autoOpen: true,
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
myUi._rejectMethod(e.target);
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
This allows you to pass the button that was click through so you know which one you are working with.
Fiddler Example
As per "charlietfl Nov 15 at 23:06" suggestion I was able to fix my issue:
"here's a good start....what you have is far far too complicated. I only got some basics working to have proper rejection shown jsfiddle.net/ZtLEq/6 – charlietfl Nov 15 at 23:06"
Related
I'm looking to replicate the decision flow found here: https://codepen.io/jason-monaghan/pen/bGbQVwM
I'd like there to be two buttons, When one is clicked, a section expands with two more buttons. some sections will have text instead of buttons.
I've attached a user flow I created.
User flow
I tried to use toggle buttons but found an issue when both buttons were clicked:
$(document).ready(function() {
$('.button').click(function() {
$(this).siblings(".item").toggle();
});
});
$(document).ready(function() {
$('.button-1').click(function() {
$(this).siblings(".item-1").toggle();
});
});
.item,
.item-1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="button">Yes</button>
<button class="button-1">No</button>
<div class="item-1">
Not eligible
</div>
<div class="item">
<div class="item-2">
<p>Eligible</p>
<button class="button-3">Click</button> <button class="button-4">Click</button>
</div>
</div>
</div>
Thanks
You are not toggling the previously selected item. You should do something like:
$(this).siblings(".item-1").hide();
$(this).siblings(".item").show();
when you click a single button. Or disable the other button so that it cannot be clicked.
Im working on a project and on my .ejs file I have a popup:
<div id="just-claimed-popup2" class="popup">
<h6>You just claimed:</h6>
<h2 id="card-just-claimed"></h2>
<p class="show-message">Show this Screen!</p>
<button id="deletePromoFromHome" class="close-button">Close</button>
</div>
On my javascript file I have a code that creates cards on a loop:
$('#promotion-container footer').before(`
<div class="promo card promo${i}">
<div class="promo-wrapper">
<div class="promo-header">
<h2 class="promo-title">${eventName}</h2>
<span class="close-promo-wrapper"><span class="close-promo"></span></span>
</div>
<div class="promo-info">
<span class="promo-details">
<p class="promo-detail promo-location">${eventLocation}</p>
<p class="promo-detail promo-date">${eventDate}</p>
<p class="promo-detail promo-time">${eventTime}
<span class="promo-description"></span>
<span class="buttonRedemp${i}">
<button class="redddButt load-button2" data="Reedem Card">Reedem Card</button>
</span>
</div>
</div>
</div>
`)
I want the card to disappear when people click 'redddButt', this is my code:
$(`#promotion-container .promo${i} .redddButt`).on('click', function(e){
e.stopPropagation();
$(`div.promo${i}`).addClass('toDelete')
var esc = $.Event("keyup", { keyCode: 27 });
$(document).trigger(esc);
$('#just-claimed-popup2').addClass('reveal');
$('#card-just-claimed').text(eventName);
$('#deletePromoFromHome').click(function(){
$('div.toDelete').fadeOut("slow")
})
})
PROBLEM: it always removes just the first card clicked and if you click the button in another one it stops working, so it only works once. If I console.log something the click event is happening, it's just not running the code inside of it.
Try changing your handler to:
$('body').on('click', `#promotion-container .promo${i} .redddButt`, function(e){
//function stuff here
}
The problem might be that elements are generated after the handler is attached.
Your code is missing some few closing tags. Since the cards are dynamically generated, try using (not tested):
var buttonContext;
$(document).on('click', '#promotion-container .promo .redddButt', function() {
buttonContext = $(this);
// Something
});
$('#deletePromoFromHome').click(function(){
buttonContext.closest('.promo').fadeOut("slow");
});
You can omit this line: $(div.promo${i}).addClass('toDelete');
The cards may have a single class (.promo) instead of (.promo#), unless may be you want to do further manipulation (say different styling etc).
Check this for more details on $(document): https://stackoverflow.com/a/32066793/3906884
I have written a code such that I should see the preview area change colour when I type names into the input box. I need to call the setPreviewColour in the event handler and pass the current value of the input box into it.
Below is my code:
function setPreviewColor(item){
$('.preview').css('background-color', item);
}
$(document).on('keyup', '#add-to-favorite', function() {
setPreviewColor($('#color').val());
// $('#items').append('<li>' + $('#color').val() + '</li>');
// $('.preview').css('background-color', $('#color').val());
} );
HTML code
<div id="container">
<h1>Color picker</h1>
<input id="color" type="text"/>
<button id="add-to-favorite">Add to favorites</button>
<div class="row">
<div class="column">
<div class="preview">
</div>
</div>
<div class="column">
<div id="colors">
</div>
</div>
<br/>
<div class="color-code"></div>
</div>
</div>
Screenshot of broswer
It doesn't change when i click on the Add to favourites button. It only changes when I press CTRL+ SHIFT +J to go to the console. Thanks for the help
You are trying to use onkeyup on a button with id (add-to-favorite), you need to attach the onkeyup event to your textbox:
//Change what you have to the following, now as a user types in the textbox
//with id of color, it will send the value of the textbox to setPreviewColor()
$(document).on('keyup', '#color', function() {
setPreviewColor($('#color').val());
//OR
//setPreviewColor($(this).val());
} );
Change
$(document).on('keyup', '#add-to-favorite', function() {
to
$('#add-to-favorite').on('click', function() {
i am new to jQuery, and i am trying to figure out how to create the jQuery function of the checkboxes, what i want to attain is that, when a user clicked on Yes the checkboxes(which will have a display:none) will have a checkmark. But if a user will click on No the checkmark will be removed.
This will be a selection of multiple Yes and multiple No
have a look at the page im working on http://jsfiddle.net/4x2f52ka/
I have started the script for it, but for some reason, when i started to select Yes on the first selection, another yes to the second selection, and if im gonna select No to the 3rd item, the 2 Yes will be removed. It is fine if i will select all yes and all no, but if im gonna select alternate Yes and No, it doesnt allow me to.
this is my code for the html
<div class="row marginBottom">
<div class="col-xs-6">
<label class="alignMid">Have you found a property?</label>
</div>
<div class="col-xs-6">
<span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
<span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
<input type="checkbox" name="FoundProperty"/>
</div>
</div>
<div class="row marginBottom">
<div class="col-xs-6">
<label class="alignMid">Would you like a free RP Data Property Report?</label>
</div>
<div class="col-xs-6">
<span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
<span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
<input type="checkbox" name="FreeRPData" />
</div>
</div>
and this is my code for the jQuery
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.opt_yes').click(function () {
jQuery(this).addClass('selected');
jQuery('.opt_no').removeClass('selected')
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', true);
}
});
jQuery('.opt_no').click(function () {
jQuery(this).addClass('selected');
jQuery('.opt_yes').removeClass('selected')
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', false);
}
});
});
</script>
Can anyone help me please?
You're loosing the context of your check boxes. It works for yes, because you use this, but for the no items, you just grab every 'no box' on the document using jQuery('.opt_no'). Because it's so broad, all 'no box' boxes are affected.
You can very easily narrow your selectors with this syntax: jQuery('selector', context).
In this case, I recommend this.parentNode like so :
jQuery('.opt_yes', this.parentNode).removeClass('selected')
See my demo here: http://jsfiddle.net/m5aug81a/
For more info on using contexts for your jQuery objects, see here
You have to remove selected class only from sibling of yes or no. Here's the code:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.opt_yes').click(function () {
jQuery(this).addClass('selected');
jQuery(this).siblings('.opt_no').removeClass('selected')
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', true);
}
});
jQuery('.opt_no').click(function () {
jQuery(this).addClass('selected');
jQuery(this).siblings('.opt_yes').removeClass('selected');
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', false);
}
});
});
</script>
I'm using jquery dialog popup.
I have multiple div's (dynamically created) that require the pop-up on a single page.
My current issue is when I click the .open, all (10) pop-ups are opening, how can I trigger only one?
My html is as follows:
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
My jquery is as follows:
<script type="text/javascript"> // added .dialog:disaplay:none; to desktop.css
$(document).ready(function () {
$('a.open').prop('id', function (i) {
return '' + (i + 1);
});
$(".dialog").dialog({
autoOpen: false,
draggable: false,
width: "300px",
modal: true,
buttons: {
"Close": function () {
$(this).dialog('destroy').remove()
}
}
});
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10")
.click(function () {
alert($(this).attr("id"));
$(".dialog").dialog("open");
return false;
});
});
</script>
This should work (or a variant of it).
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
alert($(this).attr("id"));
$(this).next(".dialog").dialog("open");
return false;
});
I feel the need to tell you to just use a class as your click handler
$(".open").click(function(e) {
e.preventDefault();
$(this).next(".dialog").dialog("open");
});
There's no need for the ID's if you're not using them.
If I am reading your code correctly what you are doing is
$('.dialog').dialog('open');
i.e. you are getting hold of all elements that use the dialog class. Naturally, that opens all your dialogs all at once. If you rewrite your markup along the lines
<div class="dialog" title="Gives Dialog Title" id='diaOne'><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
and then do
$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.
that should I suspect do the trick