JQuery button click function not working - javascript

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>

Related

how to open fancybox from 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.

function on javascript can't remove

how to remove ALL DOM in specific id, we know http://jsfiddle.net can test javascript for all condition.
directory file:
\root
\root\index.php
\root\load.php
index.php have script tag id='index' and this index.php using .load() (jQuery) for load.php, in load.php have script tag id='load',
i try use this method (in load.php for clean DOM from index.php):
$(document).ready(function(){
$("#index").remove();
});
but this not remove DOM Function, why??
EDIT :
This trouble is DOM cant be remove
i needed is delete a < script id='index' > and DOM Function (ALL FROM THIS TAG) if i loaded "load.php"
You can't use multiple elements with same id if you want to do so you need to use classes instead:
$(document).ready(function(){
$(".index").remove();
});
UPDATE
if what you want to hide your script when you load another file you could do so by surrounding your script between a div to hide for example:
<div class="divtohide">
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").load("load.php");
});
});
</script>
</div>
and in your load.php you could create a script to remove the .divtohide div:
<script>
$(document).ready(function(){
$(".divtohide").remove();
});
</script>
Your JavaScript will be run at .load(). So, we need to remove the string before loading the content into the webpage. I decided to use $.get, which will fetch the information as text. Then I run the data through a regex that will remove script#index. From there, I then append it to the page (for testing). If you notice there is no console.log's despite it being in the source of removeIndex.html, that's because we have successfully removed the JavaScript at script#index.
$.get("http://neil.computer/stack/removeIndex.html", function (data) {
data = data.replace(/<script.+?id=["']index["'](.|[\r\n])*?<\/script>/gi,"");
$("#container").html(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
removeIndex.html
This file has some sample input:
<div>
Testing stuff
</div>
<script id="index">
console.log("ignore me");
</script>
<div>
Testing more stuff
</div>

jQuery tooltip is not working

I want a tooltip to show when I rollover on particular links. It's not working. The commented out alert is working, so event is not the issue. This is my javascript code:
$(window).load( function() {
$("a").each(function() {
if(this.text==" View image") {
$(this).mouseover(function() {
// alert("blabla");
$(this).tooltip();
});
}
});
});
on my html file the includes are:
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript" src="jquery.tooltip.min.js"></script>
<script type="text/javascript" language="javascript" src="mainscript.js"></script>
I'd appreciate some help.
UPDATE: removing mouseover doesn't help
Remove the mouseover function. The plugin doesn't require you to add a custom mouseover function. It's done from the plugin for you.
if(this.text==" View image") {
$(this).tooltip();
}
Hope this helps ^^
Change the main jQuery function to $(document).ready(function(){});
This will probably work now~
Try this:
$("a").each(function() {
if(this.innerHTML == " View image") {
$(this).tooltip();
}
}
Also, there's a space before the View in "View image". I'm not sure if that's intentional or not.
I used jQuery tipsy on my recent projects. Quite easy to understand and integrate.

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