how to open fancybox from javascript. - javascript

I have the following code in my cshtml file.
<div style="display:none">
<div id="EditFancy" class="fancybox-infobar">
//Some not relevant input fields.
</div>
</div>
I'm trying to activate/show that fancybox from a javascript which is included at the top of the cshtml file.
However I'm able to activate/show it from a link within the same cshtml file. With the following code:
asd
<script type="text/javascript">
$("#btnForm").fancybox();
</script>
Help will be greatly appreciated.

You could create your own click handler using event-delegation that opens fancybox, for example:
$( "body" ).on( "click", "btnForm", function() {
$.fancybox.open({ src: $(this).attr('href'), type : 'inline' });
});

function viewproperty(){
$.fancybox.open({
src : '#propertyInfo'
});
}
This code is for the latest version of facncybox.

If you use jquery try to wrap the code with $(document).ready() function or use window.onload() javascript function

Used jQuery.fancybox.open(jQuery('#btnForm')); to open the fancybox from the javascript.

Related

jQuery .load function not working

I'm using a simple .load() function from Jquery and I can't seem to make it work. Nothing happens when I click my DIV. My alert TEST does work.
<div class="ing">CLICK HERE</div>
<div id="overlay3-content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('click', '.ing', function(e){
$("#overlay3-content").load('content.html');
// window.alert("test"); THIS WORKS
});
</script>
the page content.html just has the following:
<html>TEST TEST TEST</html>
JS FIDDLE: https://jsfiddle.net/37ukdrLf/
Any ideas
you are loading the model using either file:// or C:/, which stays true to the error message as they are not http://
So you can either install a webserver in your local PC or upload the model somewhere else and use jsonp and change the url to http://example.com/path/to/model
Answer taken from
HERE
try this:
$(document).on('click', '.ing', function(e){
$( "#overlay3-content" ).load( "content.html", function() {
alert( "Load was performed." );
});
});

Tinymce 4.2.0 got Cannot read property 'setContent' of null

I got Cannot read property 'setContent' of null, when i want to using setContent function. Intended for set value in text editor generated by Tinymce library. Is am wrong to implemented it?Below is my snippet code:
<textarea name="content"></textarea>
<script src="assets/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector:'textarea'
});
tinymce.activeEditor.setContent('custom');
</script>
Does anyone knows about this problem?
Thanks! any effort would be appreciated
You have to wait until the editor is initialized:
tinymce.init({
selector:'textarea',
init_instance_callback : function(editor) {
editor.setContent('custom');
}
});
Real late to the party, but tinyMCE.init also has setup configuration option which allows to add any event handlers to the specific editor being initialised:
tinymce.init({
setup: editor => {
editor.on('init', () => {
editor.setContent('custom');
});
}
});
There is other turn around for your solution:
Call setContent within $( window ).load(function(){}) but you have initialize jquery first.
Modified code will look like below:
<textarea name="content"></textarea>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector:'textarea'
});
$( window ).load(function(){
tinymce.activeEditor.setContent('custom');
});
</script>

JQuery button click function not working

I'm new to JQuery and my problem is that I have a button in a modal such that when I click it, a JQuery script is run. Pieces of code so far:
<a id="submitMe" class="btn btn-default btn-primary">Submit</a>
$(document).ready(function (){
$("#submitMe").click(function(){
alert("Something to alert");
});
});
Thanks for all your help!
Firstly, make sure you've included jQuery properly. You should download jQuery and place it in you folder and import it at you html source or use below inline query src definition to access the library online.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Secondly, if your anchor has been added dynamically to the DOM, you need to use event delegation:
<script>
$(function() {
$(document).on('click','#submitMe',function() {
alert("Something to alert");
});
});
</script>

Run javascript after page load

setup_account ui-mobile-viewport ui-overlay-c
When a page i make loads like this:
var location = location.href+"&rndm="+2*Math.random()+" #updatecomment0>*"
$("#updatecomment0").load(location, function(){});
I have multiple scripts running on the updatecomment0 div:
<div id="updatecomment0">
<div id="javascript1">hi</div>
<div style="float:right;" class="javascript2">delete</div>
</div>
I don't know how to make this other JavaScripts run after page load.
Can someone please tell me how to with this.
Thank you
Use $(document).ready().
Use jQuery, you can do this very easily.
jQuery(document).ready(function(){
alert('Your DOM is ready.Now below this u can run all ur javascript');
});
Here is a sample layout for you
<script type="text/javascript">
$(document).ready(function(){
/// here you can put all the code that you want to run after page load
function Javascript1(){
//code here
}
function Javascript2(){
// code here
}
$("#btnOK").live('click',function(){
// some codes here
Javascript1();
Javascript2();
});
});
</script>
<div id="MyDiv">
<input type="button" id="btnOK" value="OK"/>
</div>
write code inside ready
jQuery(document).ready(function(){
// write here
});
suggestion : use live or bind
Unless you need javascript to do something before the page is loaded, add your scripts to the bottom om the html document, just before the body end tag.
The page will load faster, and you can do whatever you need to, right in the js file, without the document ready functions.
If the scripts is the last to load, the DOM is already guaranteed to be "ready".
$(window).load(function() {
// code here
});
$(document).ready() is all you needed.
You can make JavaScript wait for a specified time using the setTimeout method:
.setTimeout("name_of_function()",time_in_millis);
I hope this can help you too, I had a similar issue and I fixed it by calling the following just after loading the content in the page (like after an AJAX request for a page to be shown inside a div):
(function($) {
$(document).ready(function() {
// your pretty function call, or generic code
});
}(jQuery));
Remember to not call this in the document you load, but in the function that load it, after it as been loaded.
Using vanilla Javascript, this can done thusly:
<html>
<head>
<script type="text/javascript">
// other javascript here
function onAfterLoad() { /*...*/ }
// other javascript here
</script>
</head>
<body>
<!-- HTML content here -->
<!-- onAfterLoad event handling -->
<div style="display:none;"><iframe onload="onAfterLoad();"></iframe></div>
</body>
</html>

Call an anchor tag via javascript

I am using thick box 3.1 to load a pop up. It working well by using in the following way:
TEST
If we click on the TEST now then the popup is working well and good.
Now my prob is: I need to call this popup in form load using JavaScript.
I do something like below:
<script type="text/javascript">
window.location.href = "filename.php"
</script>
it's just redirecting to that particular file. But not showing in the pop up.
What is the possible way?
thanks in advance
Try this:
Test
<script type="text/javascript">
$(function(){ // On DOM ready
$('#openOnLoad').click();
});
</script>
You can do this without changing your markup, like this:
$(function() {
$('a[href=filename.php]').click();
});
TEST
<script type="text/javascript">
$("#UniqueIdForThisLink").click();
</script>

Categories