I have a popup <div> which clones a hidden form and inserts this into the popup. Due to this being dynamically inserted I am not able to get the validate plugin to work.
Example: http://jsfiddle.net/MbNCh/1/
You will see that the inline form is validating perfectly altough if you click the popup link this form is not validating.
You can see that I am calling the plugin like this:
$page.find("form.validate").simpleValidate(simple_validate_options);
$popup.find("form.validate").simpleValidate(simple_validate_options);
Also is there anyway I can merge both the cached $page and $popup together?.
Since you are appending the cloned form on open popup link click event you should call simpleValidate plugin inside the click event after appending the html into popup content.
Here is the working demo - http://jsfiddle.net/MbNCh/2/
Related
I have a single HTML page app, that contains a text input bound to a jQuery datepicker. It is initialised/bound on startup, and it functions just fine.
The page has an inner container DIV, beneath the datepicker text input field, on the same page.
I am inlcuding an image, because I need to obscure some info:
When I dynamically insert a popup FORM into this inner container, it becomes visible, centered, floating over the container DIV.
<div id="CLC_Form">...</div>
var e = document.getElementById("contentDIV");
e.innerHTML += clc_div;
However, it also destroys the datepicker, clearing out the selected date, and making the datepicker field dead/unbound and unresponsive when I remove the added FORM (when the user clicks "Save" button on the popup FORM).
var e = document.getElementById("CLC_Form");
e.parentElement.removeChild(e);
Any ideas? Please feel free to ask for additional info if I have not been thorough enough.
Thanks
Instead of using:
e.innerHTML += clc_div;
I used:
e.insertAdjacentHTML("beforeend", clc_div);
Problem solved.
I have an Editable Pdf form in my application. In that form, I had added a checkbox. On the checkbox mouse up event, I had added a javascript to set the read-only property of a button to false when the checkbox is checked and the read-only to true when the checkbox is unchecked. My issue is When I load the pdf form in the Adobe reader, the javascript that I had added to the checkbox mouse up event not working. Is there any other event that we can be used for adding script while loading the pdf form.
Which is the event that can be used to invoke a javascript method in pdf form loading??
you need to add the code within the .checked function of checkbox
if(document.getElementById('IdOfTheCheckBox').checked) {
//your code goes here
}
I have a hidden iframe (via style display:none), which contains input fields to enter username/password combination that must be checked on other resource. Is it possible to automatically focus input field in the iframe when the iframe is shown?
Sample:
http://0x49d1.azurewebsites.net/logintest.php
You could try binding to the attribute with a library like this:
http://meetselva.github.io/attrchange/
or as these posts suggest: jquery bind change css
Or as others have suggested just add the handler in whatever shows it.
Jquery has the concept of custom events. You can write an extender for Jquery and then interface with it using the .show/.hide methods.
For further info check this out.
http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/
$('#myIframe').on('show', function() {
$("#usernameFieldID").focus();
});
http://jsfiddle.net/rfnslyr/xcqa5/
The goal of this little "app", is to type in a filename, paste in an HTML document, and when you click submit, a little orange block below the Submit button appears stating the filename you entered, and the extracted CSS classes and ID's.
Right now it returns the correct response in console when you paste in HTML code, but I want to display it in little code blocks below the submit button like in my example.
Every time you paste in new code + new file name and hit submit, a second block like the first appears after the first block with the new filename and extract classes.
This is the code that I want duplicated + populated with the filename/classes inserted on submit:
<div id="classes">
<div class="pageTitle">%filename%</div>
<div class="cssClassesIDs">
%classes%
</div>
</div>
I'm not sure how to duplicate and append this code structure repeatedly on submit.
Here's a modified JSFiddle:
http://jsfiddle.net/xcqa5/1/
var codeNameVal = $('input#codeName').val();
var newClone = $('#classes').clone();
$(newClone).find('div.pageTitle').html(codeNameVal);
$(newClone).find('div.cssClassesIDs').html(uniqueNames.join(','));
$('#container').append(newClone);
$(newClone).show();
Basically you have a hidden div that's built the way you want it. When they click submit you clone that hidden div, set the values inside to what you need, then append that div to the end of the container div. Once you do that you show your newly cloned div with show().
Jquery clone()
http://api.jquery.com/clone/
and append()
https://api.jquery.com/append/
I have a form and after submiting it I have a review page. If user wants to edit something in the form I use
Edit
By this way I don't have to repopulate datas from somewhere. It basically goes backward.
The problem is when I turn back to page, If I have form validation errors from previous page, It still remains there.
Therefore, what I want to do is to hide the div id/class when I click Edit button.
Form validation error are in a div so probably solution with hiding it will be better.
Thanks
$(document).ready(function() {
$("#yourDivId").hide();
});
call a javascript function on EDIT button instead of calling history.go(-1), and inside that javascript function first toggle the divs that you want to hide, and then do history.back