Prevent navigating after link click in tinymce - javascript

I want to use tinymce to show and edit html code. I also want to let the user edit hyperlinks. But I want a special handling: I want to know if a link is clicked but I don't want to navigate.
I tried this code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="tinymce/tinymce.min.js"></script>
<script>
$(document).ready(function() {
tinymce.init({
selector: 'textarea',
menubar: false,
toolbar: false,
plugins: 'link',
setup: function(editor) {
editor.on('init', function() {
editor.setContent('<h1>My heading</h1>This is a link');
editor.onClick.add(function(ed, e) {
if (e.currentTarget.nodeName == 'a') {
alert('clicked');
e.preventDefault();
return false;
}
});
});
}
});
});
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>
The editor is loaded correctly but if I click the link then I will get a "File not found".

Related

Izimodal iframe isn't displaying

My code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js" integrity="sha512-8aOKv+WECF2OZvOoJWZQMx7+VYNxqokDKTGJqkEYlqpsSuKXoocijXQNip3oT4OEkFfafyluI6Bm6oWZjFXR0A==" crossorigin="anonymous"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css" integrity="sha512-pH06JFjxM84j7iRF99/Cw7d9R9m2mVmEVr8oI0kK8gVkr461DI+8OYpQctHUrbmdOH7oaRyDRkkCVlQIQCFEiQ==" crossorigin="anonymous" />
Modal
<script>
$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal-iframe').iziModal('open', event); // Use "event" to get URL href
});
$("#modal-iframe").iziModal({
    iframe: true,
    iframeHeight: 800,
iframeURL: 'http://izimodal.marcelodolza.com'
});
</script>
Tried
switching from using iframe, button
enabling, disabling iframeURL
changing event to event.this, this (i'm a js noob)

clicking a link in jqueryui dialog

I'm using jquery dialog for displaying html files in a modal dialog:
main site calling test.html:
<body>
<div id="layer" style="display: none;">
</div>
</body>
<script type="text/javascript">
$("#layer").dialog({
dialogClass: 'noTitleStuff',
autoOpen: false,
position : ['center',20],
/*draggable: false, */
resizable : true,
modal : true,
show : 'fade',
hide : /*'drop'*/'fade',
width: 'auto',
heigth: 'auto',
open: function() {
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
},
});
$( function() {
$("#layer").load('test.php', function() {
$("#layer").dialog("open");
});
});
</script>
This works fine and the content of test.php is displayed well. But when i'm clicking a link in test.php the link is opened in the whole browser windows. How i can display the new site in the dialog too?
Thanks for your help
Load the content of new url to the dialog.
$(function(){
$(document).on("click", ".yourLinkCssClassName", function (e) {
e.preventDefault();
$.get($(this).attr("href"), function (data) {
$("#layer").html(data);
});
});
});

lightbox_me - open different popups on same page

I am trying to create a page with multiple popups on the same page. I want the first popup to open on page load which I can get to work with
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lightbox_me.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#sign_up").lightbox_me({centered: true, onLoad: function() { $('#sign_up').find ('input:first').focus()}});
}); // document ready
</script>
<body onload="$('#sign_up').trigger('click');">
But then I want the user to be able to click a link in that popup that will stay on the same page but open up a different popup. And again from the second popup I want the user to be able to click a link to open a 3rd popup.
Using this code I can click a link in the first popup (sign_up) Click here which does open the second popup (sign1) but the first popup is still behind (I can see it because the second popup is smaller)
<script type="text/javascript" charset="utf-8">
$(function() {
function launch() {
$('#sign_up').lightbox_me({centered: true, onLoad: function() { $('#sign_up').find('input:first').focus()}});
}
$('#try-1').click(function(e) {
$("#sign_up").lightbox_me({centered: true, onLoad: function() {
$("#sign_up").find("input:first").focus();
}});
e.preventDefault();
});
$('table tr:nth-child(even)').addClass('stripe');
});
</script>
<script type="text/javascript" charset="utf-8">
$(function() {
function launch() {
$('#sign1').lightbox_me({centered: true, onLoad: function() { $('#sign1').find('input:first').focus()}});
}
$('#try-2').click(function(e) {
$("#sign1").lightbox_me({centered: true, onLoad: function() {
$("#sign1").find("input:first").focus();
}});
e.preventDefault();
});
$('table tr:nth-child(even)').addClass('stripe');
});
</script>
I am very new to jquery and have basically been trying to copy and tweak current code but to no joy.

jQuery UI dialog issue

I'm trying to create jquery dialog, but there is no use :(
here is my jQuery code:
$(document).ready(function() {
createDialog();
});
function createDialog() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-form").dialog(
{
autoOpen : false,
height : 475,
width : 350,
modal : true,
buttons : {
"submit" : function() {
var bValid = true;
allFields.removeClass("ui-state-error");
postText();
$(this).dialog("close");
}
},
cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$(".add-org").click(function() {
$("#dialog-form").dialog("open");
});
}
here is html code:
<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/myScript.js'/>"></script>
New
<div id="dialog-form" title="Add New ">
<p class="validateTips">All form fields are required.</p>
<form>
..................
</form>
</div>
and firebug says:
TypeError: $("#dialog:ui-dialog").dialog is not a function
$("#dialog:ui-dialog").dialog("destroy");
and on my page I see all the fields from the form.
so what is my problem?
Try this: Working demo http://jsfiddle.net/kEZkh/
Not sure if your source path are correct please include following scripts.
rest please feel free to play around with demo & hope it helps the cause :)
scripts
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
code
$("#forgot").click(function(e){
$("#dialog-form").dialog("open");
e.preventDefault();
});
$("#dialog-form").dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Retrieve": function() {
document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
​
Check in Firebug/DevTools if the script file was loaded successfully. If it is, type this into the console (Firebug, DevTools) or better, put that line where your other code is executed:
console.debug(jQuery.ui)
If it shows undefined, then jQuery UI was not loaded (yet). Check if your code runs before everything was loaded, put it inside jQuery's $(document).ready();. If it is an object, inspect it and check for the dialog property.
If you configured a custom build on jqueryui.com, doublecheck if you included the dialog widget.
The destroy call should be on the same element as you already used when you created the dialog, not the .ui-dialog container that gets wrapped around your content:
$("#dialog-form").dialog('destroy');
Since your current code is throwing an exception, the subsequent lines which are supposed to create the dialog never get called.
If you want to destroy every dialog that might already be open, jQuery UI handily puts a .ui-dialog-content class on each content div:
$('.ui-dialog-content').dialog('destroy');

why my jquery codes doesn't run?

I want to toggle element that id's pg when click link.
header:
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
</script>
Elements:
<p id="pg">deneme deneme 123 deneme</p>
toggle
close click function by adding });:
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
});
You're missing the final }); for the statement
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
)}; //<-- Missing close bracket
</script>
Also, if you're using Firefox, check out Firebug. Its an invaluable debugger tool and will show you where errors are happening.
Chrome has a Developer Tools enabled, not sure about IE.

Categories

Resources