I have an Ajax call that is run when a div is clicked. This displays a dynamic drop down menu. Below is the ajax call.
The drop down menu contains a list of other items that can be clicked to launch an "editor". The issue is that when I close the editor I request the user confirm they want to navigate away from the page, based on the answer the div will either close or remain open for further editing. Below is the code that launches the editor:
jQuery(function($){
var launchEditor = "#launch-editor-<?php echo $this->section_num; ?>";
var contentEditor = jQuery("#<?php echo $this->section_num; ?>-editor");
var closeEditor = "#<?php echo $this->section_num; ?>-editor-close";
var closeMessage = "Your changes will not be saved, are you sure you want to close without saving?";
jQuery(document).on("click", launchEditor, function(){
contentEditor.unbind();
contentEditor.show("fade", 1000);
contentEditor.draggable();
});
jQuery(document).on("click", closeEditor, function(){
if(confirm(closeMessage)){
contentEditor.fadeOut(1000);
//contentEditor.die("click");
} else {
}
});
});
The issue is as follows... If I click on the initial div more than once which launches the AJAX call, the "jQuery(document).on("click", closeEditor...)" function bubbles up in the DOM which poses a problem when the user decides to close the editor. Effectively the "confirm" message displays equal to the amount of times the original div is clicked. hope this makes sense... let me know if further info is required... cheers.
Following seemed to fix it.. thanks SCRAGAR for your suggestion:
closeEditor.one().bind("click", function(){
if(confirm(closeMessage)){
contentEditor.fadeOut(1000);
} else {
//do something
}
});
Related
I make verification page that have a button verify, when click that button will be show image "Yes/tick" mark on other page. Verification rules : when meet the condition which is if have selected 3 checkbox, the verification is accepted, user will click button verify, and image yes mark will be showing in other page (the main page)
I've tried to send image to main page but just only showing image in current page and showing all div main page, not only image that I need. The checkbox rules already working with some show alert function
This is for the verification rules checkbox :
function check(){
var checked=0;
$( "input:checkbox" ).each(function() {
if($(this).is(':checked')){
checked++;
}
});
if(checked>2){
alert('Ok!');
}
else{
alert('At least 3 checkboxes need to be selected!');
}
}
and the function for image that I'm trying :
function getImage(){
localStorage.setItem('/biz/eKYC/EK01.html','../../sampleData/dummyImages/verifOK.jpeg');
}
var image = "../../sampleData/dummyImages/verifOK.jpeg";
//location.href = '/biz/eKYC/EK01.html';
//var page = '/biz/eKYC/EK01.html';
function toggle_visibility(id) {
$(".verif").click(function(){
$(location).attr('href',image);
$("#image").show();
$("#custInfo").hide();
return getImage()
});
}
// // document.getElementById('imgVerifOK').src = icon.replace('30x30', '125x125');
// // document.getElementById('imgVerifOK').style.display='block';
I expect just image that showing but it shows all div in main page
It's a little difficult to tell exactly what you're asking, or even what the intended code is supposed to accomplish, but in looking at your toggle_visibility function this line seems suspect:
$(location).attr('href',image)
This will change the URL of the page to be the URL of your verification image, and you do it whenever a user clicks on any element with the class verif. If that's actually what you intended you need to explain better about the structure of the DOM of your page (is every one of these images in an iframe?) and maybe show how things are going wrong.
we r having functionality, when we edit the draft for specific job role.. It is redirecting to that edit draft page. This page has cancel button, on click of which we get confirmation box.. having msg ("Directing back to the previous page, changes made will not be saved.") also "OK" & "Cancel" button.
My Problem
In current code when I click on "OK" It is redirecting to parent page (which is correct) but when I click on "Cancel" button or cross mark of confirmation box, still its redirecting to the parent page (which is wrong) it should remain on the same edit page when I click on cancel button(or cross mark). I need help for this. Thanks.
****JS code for cancel button:****
jq("[data-dom-id=sdd-ejrp-btn-cancel]").click(function ()
{
var sdd_ejrp_btn_cancel = jq(this);
if (confirm("Directing back to the previous page, changes made will not be saved."))
{
}
});
UI code in soy template:
<button data-dom-id="sdd-ejrp-btn-cancel" onclick="{if $pageId > 0}javascript: event.preventDefault(); window.location.href='{$baseUrl}/pages/viewpage.action?pageId={$pageId}'{/if}{if $pageId <= 0}javascript: event.preventDefault(); window.location.href='{$baseUrl}/pages/viewpage.action?pageId={$parentPageId}'{/if}" class="aui-button aui-button-link">Cancel</button>
You need to return false; if OK is not clicked. Below is the code:
jq("[data-dom-id=sdd-ejrp-btn-cancel]").click(function() {
var sdd_ejrp_btn_cancel = jq(this);
if (confirm("Directing back to the previous page, changes made will not be saved.")) {
console.log("Clicked Yes!!.. It will redirect.");
} else {
console.log("It will stay here... ");
return false;
}
});
I think the issue is using <button> inside a form. Whenever a click happened, the form will submit. Try changing <button> tag with <span> or other elements
Is there a way to know if the user just opened the page? I got a textbox in my app that will retain its value even if the page was refreshed or submitted. What I want to do is to remove the content of the box when the user just accessed the page because what's happening right now is that whenever I close and rerun the page, the value of the textbox before I closed it is still there. Can you help me out?
localStorage does it for you:
var element = $("input[type='text']");
var message = "This is the first time !";
if (localStorage.getItem("onlyOnce")) {
element.val(""); // clear value
}
else {
localStorage.setItem("onlyOnce", true);
element.val(message);
alert(message);
}
You can use together with the above:
$(window).on("beforeunload", function() {
localStorage.removeItem("onlyOnce");
});
Hope it helps.
You can add this script in document.ready function.
<script>
$(document).ready(function(){
$("input[type=text]").val("");
});
</script>
I have a table in my page, for which I get the data from database. In some cells I have an edit icon.I want when users clicks on it, they see a pop up window.
In the pop up window, I want to show three option(check boxes), that user can select only one of them, and then click on OK button, and return the value of the selected option to the data variable.(as you see in the code below)
I have to mention, that right now when the user clicks on the edit icon, some information are sent to another file. Because I need to update database.
$(".SSO").click(function () {
var id = $(this).attr("data-id");
var data= HERE I NEED TO GET THE VALUE OF THE SELECTED OPTION IN THE POP UP WINDOW
}
So SSO is the value of class attribute for the image icon. data-id value helps to update the correct record in the database.
Right now this is the code in one file:
$(".SSO").click(function()
{
var id = $(this).attr("data-id");
// open popup window and pass field id
window.open('sku.php?id=' + encodeURIComponent(id),
'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}
and this is the code in sku.php
<script type="text/javascript">
function sendValue (s){
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, s);
window.close();
window.close();
}
</script>
<form name="selectform">
<input type=button value="OK" onClick="sendValue(document.querySelector('.messageCheckbox:checked').value);"
</form>
Mu form right now has only OK button, when when I click on teh edit button, nothing happens. Should not I see a pop up window, with OK button inside it?
Typically a popup windows is shown with alert() or something similar, which causes the browser to make an actual popup window. That kind of popup window cannot have HTML elements added to it. You could do something like this http://www.codeproject.com/Tips/170049/Pure-HTML-CSS-Modal-Dialog-Box-no-JavaScript
I used those in a website and I liked them a lot, but I am not a fan of the css :target selector, so I opened it with Javascript instead, but it is pretty much the same thing.
In my page there is a list of buttons. Depending on the clicked button the same .php file is loaded with a different content for the <textarea>. Then TinyMCE is initialised and after that the content of TinyMCE is set.
However, this only works on the first click. When a user clicks a different button, the <textarea> is loaded, but TinyMCE is not initialised. I don't know why it's doing that, because it's the same script that is executed.
$("ul").on("click", "a.click-menu", function() {
var id = $(this).attr("id");
$(".inject").load("Including/modules/Pages/index.php?page="+id, function () {
tinymce.init({selector:"textarea"});
});
});
And this is index.php in a nutshell:
<?php
echo '<textarea>'.$_GET['page'].'</textarea>';
?>
You should remove old TinyMCE and add new one to new controls...
Heres how it should be made