I m using a dialog on which jquery validation is performed like required,email etc.
On click of a button my dialog appears as a popup and error messages are shown,
but when i close my dialog and open it once again the previous error messages are shown until i interact with my controls.
So i want, is to refresh the dialog or reset the validation messages so whenever i open my dialog it comes as without the previous error messages.
Thanks in advance.
<div id="divAddUpdateAct" runat="server" clientidmode="Static" style="padding-left: 0">
<fieldset class="popupFieldset">
<table>
<tr>
<td> Remarks : </td>
<td colspan="3"> <textarea id="txtRemarks" runat="server" clientidmode="Static" rows="4" cols="10" class="textArea"></textarea> </td>
</tr>
</table>
</fieldset>
</div>
I'm writing following code on document.ready() or validate the content of textbox.
$('#formMaster').validate({ onsubmit: false });
$('#txtRemarks').rules("add",
{ required: true,
messages: { required: "Please enter remarks." } });
So when I click on button which validates the textarea, it gives me error. But when I click on some link which fills text in that textarea and open the dialog again the error message remains still there. So text is there in that textarea upon loading but still error message is there until I click on button or textarea cotrol.
I imagine your error message are in a particular div.
You just need to set the html content of that div to nothing and then you can display your dialog.
If you post some code, I could be more precise.
Related
I have a modal that is triggered when the button is clicked in the main page. It works and the success modal is displayed and the url modal is closed. But my problem is that if I click the button again, url modal cannot be displayed. Here's my code.
<button class="btn pink apply_btn" type="submit" name="button">Apply</button> //my apply button in the page
<form class="search_form" action="" method="">
#csrf
<label>
<input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)">
<p>
<span class="alert"></span>
</p>
</label>
<div class="flex_box">
<button class="btn pink" type="button" id="save">Apply</button>
</div>
</form>
<script src="{{ url('/assets/js/modal.js') }}"></script>
And this is my ajax code in closing the url modal.
success: function(store) {
$(".apply_modal").hide();
$(".applyfnsh_modal").toggleClass("open");
$('.alert').html('');
},
error: function() {
$('.alert').html('Error occured while applying. Please try again.');
}
In my modal.js
//apply pop up
$(".apply_btn").on("click", function(){
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
});
$(".modal_close").on("click", function(){
var modal = $(this).parent("div").parent("div");
modal.toggleClass("open");
$("body").toggleClass("open");
});
$(".apply_modal").on('click touchend', function(event) {
if (!$(event.target).closest('.apply_box').length) {
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
}
});
So when the url is valid, save to db and display the success modal, which works, but clicking again the apply button in the page, is not displaying the url modal again. I have tried the answers here but nothing is working.
Ok, so here's what I'm thinking is happening... $(".apply_modal").hide(); is setting your modal's style to "display: none;" directly onto the DOM element. In order to display your modal, your code is simply applying a class of "open" to the modal. Any local styles to a DOM element override any styles from CSS. What this means is that the CSS styles applied to the class "open" don't matter because the div itself has a style attribute in it, and that style attribute contains "display: none". To fix this, wherever there is an instance of .toggleClass("open");, add a "show" declaration (.toggleClass("open").show();). You should do some serious refactoring if this works, but it'll at least let you know if we're on the right track.
here is the xpath I am using
//tr[#id = 'inputSavePaymentAccounts']/descendant::input[#type = 'checkbox' and #name = 'payAck' and #tabindex = '10'
here is how I can get it to check the checkbox
jQuery('.payAck').prop('checked', true)
here is the checking account html that is inside an iframe
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px;">Save this Payment Method</td>
<td style="padding-top: 15px;">
<input class="payAck" type="checkbox" onchange="friendlyNameShow()" name="payAck" tabindex="10">
</td>
</tr>
here is the credit card html that is inside the same iframe
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px;">Save this Payment Method</td>
<td style="padding-top: 15px;">
<input class="payAck" type="checkbox" onchange="friendlyNameShow()" name="payAck" tabindex="25">
</td>
</tr>
The main issue is that when i use:
jQuery('.payAck').prop('checked', true)
it checkmarks the checkbox however, at the time the checkbox is checked I am suppose to see a text box display, which is not happening with the above jquery. I was hoping the execution of xpath would solve this
see these for a more clearer picture
image of checkbox http://prnt.sc/c12b1p
image of checkbox when it is checked with text box displaying (need this to happen) http://prnt.sc/c12b7q
First of all, I would recommend you remove the inline javascript. Your primary selector in this case is a class and the class is assigned to 2 elements (at least from what I see in your example). When you check the checkbox using jQuery with the class selector, it is going to trigger all the elements that belong to that class and I don't think that is what you intend to do. Also, using click() will work, but that will cause friendlyNameShow() to be called twice and you will need to check the state of the checkbox since you are not explicitly checking/un-checking it. Try using and Id instead.
I applied jquery switch checkbox plugginhttps://github.com/olance/jQuery-switchButton) on my checkbox , but i am unable to get the change or click event on it. Here is the html page.
<script>
$(document).ready(function ()
{
$("#check").CheckboxSwitch();
$("#second").hide();
$("#first").hide(3000);
$("#second").show(5000);
$('#check').click(function () { $("#second").hide(); $("#first").show(3000); });
$('#check').change(function () { $("#second").show(); $("#first").hide(3000); });
});
</script>
<input id="check" type="checkbox" value="" />
<div id="first">
Some textSome text
Some text
Some textSome text
Some textSome textSome text
Some text
Some textSome text
Some textSome textSome text
Some text
Some textSome text
Some textSome textSome text
Some text
Some textSome text
Some textSome textSome text
Some text
</div>
<div id="second">
Second div tagaSecond div tagaSecond div
</div>
How to get the click or change event on checkbox which is enabled with checkbox-switch pluggin.
With that plugin you are not clicking the inpunt and also the value is not changing.
look the documentation of the pluging and check if your are able to handle the event onChenge.
Other option is do it manually.
Handler the onClick event of $('.switch-button-background').click(.... and $('.switch-button-button').click(.... Thats the real items your clicking.
You can check the state of the control checking the att style of .switch-button-button if left = -1 the OFF el ON, or you can create a new varible and set the value in the functions onclick describes above.
Hope this helps you.
I have a view which displays a list of items (as below). I would like to use the KendoUI window as a popup editor, which would appear after the user clicks on a button or link. I already have a partial view which would be the content of the button. So if I could somehow inject this in.
#foreach (var item in Model) {
<tr>
<td>
<div></div>
<input type="button" id="btnReject" value="Edit" onclick="ConfirmReject(item.id);" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
</tr>
}
Use delegate event attached to the table with filter set to 'tr' element (more info here). And open the window programatically by specifying its content. To create the content easily you can templates.
SHORT DESCRIPTION:
For example we have two pages. The second page contain block which filled via AJAX. This is a big block and contain tabs(5 pieces) and each tab have handler(click event). On the first page we have a link which open the second page. I want to do the following: when user clicks on link on the first page then open second page and execute handler attached to a specific tab.
How can I do this?
MORE DETAILS:
I have page which contain schedules of event:
<div id="content">
<div class="section">
<div id="listInfoBlock" class="list_infoBlock">
</div>
<!-- .list_infoBlock-->
</div>
<!-- .section-->
</div>
The listInfoBlock filled via AJAX:
function loadEventList(id, tab) {
$('#listInfoBlock').load('/BaseEvent/EventList?period=' + id+"&tab="+tab, function () {
//the some actions
});
}
When listInfoBlock is filled it contain info about event and schedules:
<table class="time_table" cellspacing="0">
<tbody>
<tr>
<td>
PlaceName
</td>
<td class="time_list">
<ul>
<li>
19:00
</li>
</ul>
</td>
</tr>
</tbody>
</table>
When a user click on a time(a tag) then loads a second page. This is the second page contain details info about event and block called Publication. This is a big block which contain tabs(5) load via AJAX. When user click on tab called "Schedule" then via AJAX loads schedule of event. The user selects time and the hall plan is shown to him. The user has to do a lot of unnecessary actions.
I want to do the following: when user clicks on time on the first page then load second page, make the Schedule tab as active and load hall plan.
How to do such things?
Thanks and sorry for my english.
You can look at the anchors. That is, on the first page append some anchor to the url (e.g. $('#listInfoBlock').load('/BaseEvent/EventList?period=' + id+"&tab="+tab+"#ScheduleTab"), and on the second page in the onLoad event check for anchor (location.hash) and make the required tab active if it is equals to ScheduleTab.