I am doing an AJAX call that returns some HTML and jQuery:
<div id='selected'>Here is my Selection Text
<a id='trashSelected' href=\"javascript:void(0);\">Remove</a>
</div>
<script>
$('#trashSelected').live('click',function delete()
{
// remove the container
$('#selected').remove();
substractSelectionCount();
return false;
});
</script>
The jQuery removes the container that was added if the user clicks on the link "Remove".
It does the job removing the container, but the call to substractSelectionCount(); never occurs. should I be doing the call to this function in a different way?
This is a function that was already in the document. Tested in FF, IE 8 and Safari
I might be missing something, but have you tried it this way?
$('#trash{$roleId}').live('click',function delete()
{
// remove the container
substractSelectionCount();
$('#selected').remove();
return false;
});
There seems to be a syntax error in your function callback remove the word delete
$('#trash{$roleId}').live('click',function(e) {
e.preventDefault();
alert('trash clicked');
// ...
return false;
});
A work around for this problem is: instead of returning script from the ajax call, I use classes in my main file. All the response returns is this string
<div id='selected'>Here is my Selection Text
<a class='trashSelected' href=\"javascript:void(0);\">Remove</a>
</div>
and in my file I have a function like this
$('.trashSelected').live('click',function(){
$(this).parent().remove();
subtractSelectionCount();
return false;
});
Is your currentSelectionCount a global variable? Maybe the function is being called and it's not working because of this?
And did you try adding an alert into the function to make sure it's not being called?
function substractSelectionCount(){
alert("I'm working!");
currentSelectionCount--;
}
I put together a test file in this pastebin and it appeared to be working perfectly with IDs... but since I added three divs to test it I had to replace the IDs with classes. So, I'm not sure where your code is having problems - maybe your substractSelectionCount function is outside of the document.ready function?
Related
I am trying to make jsfiddle , my onclick is not working in jsfiddle. what is wrong in my code
<input value="press" type="button" onclick="myclick()">
function myclick(){
alert("myclick")
}
http://jsfiddle.net/hiteshbhilai2010/gs6rehnx/11/
EDIT
I tried No wrap - In head and tried again with document.ready it is not working in jsfiddle again
ERROR - Uncaught ReferenceError: myclick is not defined
http://jsfiddle.net/hiteshbhilai2010/33wLs160/6/
I have checked with already existing question here but my problem is happening when I am trying it in jsfiddle
Can some one please help me ....thanks
You need to select No library (pure JS) and No wrap - in head. Then it will work as a simple HTML with javascript page.
This will be inserted in a <script> element in the <head>:
function myclick(){
alert("myclick")
}
See demo
As others said, for first case you have to set No wrap - in <head> or No wrap - in <body> as javascript panel settings (the blue link at js panel top-right).
For the second (your Edit) question, your code inside a function and the js will run it (within a new context), but it will do nothing as you just define a function and ignore it without any call or assignment.
if you call alert(myclick) you will see all the code is executed and its defined at that point. see this fiddle
$(document).ready(function() {
//alert("ready is executed");
function myclick(){
alert("myclick is called")
window.location.reload(true);
}
alert(myclick); //this will show the myclick is a defined function!
//document.getElementsByTagName("input")[0].onclick = myclick;
})
if you call this:
document.getElementsByTagName("input")[0].onclick = myclick;
in that $(document).ready({...}) scope, it will be assigned to the button and works as you wish.
<input value="press" id='a' type="button">
document.getElementById('a').onclick = function() { alert(1); }
http://jsfiddle.net/gs6rehnx/12/
This one is working. Just remove it from document ready event. Also semicolons are optional in javascript but i advice to use them.
function myclick() {
alert("myclick");
window.location.reload(true);
}
<input value="press" type="button" onclick="myclick();">
<script>
alert("home");
</script>
Here is the fiddle.
Select "No wrap - bottom of " in "Load Type" of the scripting panel.
This is the solution for Jsfiddle (till 17 december 2019).
Okay basically I have a post:
<div class=post>
<div class=content></div>
<div class=content-meta></div>
</div>
thats the prototype of it to help explain
so what I want to do is use some JS to basically delete or hide the div 'content-meta'
Using JQuery I have:
$('.content-meta').remove();
however when I am using CasperJS I am a little puzzled as how I should implement this code.
I am looking to manipulate a post prior to screen capturing it (the screencapture part works fine)
Heres the code (URL's OMITTED) I have been testing with, It picks up the class just fine, but I have no idea where/how to execute the Jquery to remove the detected element prior to screen capture:
casper.start('http://pageurl.com/XYZ', function() {
if (this.exists('.content-meta')) {
this.echo('found .content-meta', 'INFO');
} else {
this.echo('.content-meta not found', 'ERROR');
}
this.captureSelector('resultingcapture.png', '.post');
});
casper.run();
TL;DR How do you execute JS/Jquery from within a CasperJS function?
For execute javascript code from CasperJS, You have to use evaluate() method
The evaluate() method as a gate between the CasperJS environment and the one of the page you have opened; everytime you pass a closure to evaluate(), you're entering the page and execute code as if you were using the browser console.
Your code should be something like this:
var casper = require('casper').create();
casper.start('http://pageurl.com/XYZ', function() {
if (this.exists('.content-meta')) {
this.echo('found .content-meta', 'INFO');
//evaluates an expression in the current page DOM context.
this.evaluate(function(){
//delete div 'content-meta'
$('.content-meta').remove();
});
this.then(function(){
this.captureSelector('resultingcapture.png', '.post');
});
} else {
this.echo('.content-meta not found', 'ERROR');
}
});
casper.run();
Note: This code is going to run only if the webcontext includes jQuery, otherwise you have to remove the div using just javascript.
I have the following javascript -
function onLoad() {
if (!(document.applets && document.VLVChart && document.VLVChart.isActive())) {
setTimeout('onLoad()', 200);
return;
}
objChart = document.VLVChart;
PollEvent();
}
function fan() {
objChart.reorganize();
}
And then when the HTML page is loaded -
<body onLoad="onLoad()">
and have a button within the HTML that execute the fan() function -
<input type='button' value='Fan' onClick='fan();'>
Is it possible for me to activate the fan() function within the onload event so that a user does ont have to click the button?
EDIT
After trying the provided answers, on debugging the code breaks on the line -
objChart.reorganize();
Within the fan() function with the error -
SCRIPT5007: Unable to get value of the property 'reorganize': object is null or undefined
This is odd as when I manually click the button on the page, the function works fine.
Solution
After much head scratching I have realised that I was trying to load the fan() function before the page (and more specifically the objChart) had fully loaded. Hence why adding the function in the onLoad event was not working. I added a setTimeout -
function Fan()
{
setTimeout(function(){objChart.reorganize();},3000);
}
<body onload='onLoad(); fan();'>...
However inline JS is best avoided and you would do well to begin looking into centralised event management. There are various advantages to this.
An answer I wrote yesterday to another question outlines why this is. Something like jQuery makes this trivial if it's new for you.
$(function() {
$('body').on('load', function() {
onLoad();
fan();
});
});
Reading your question I assume you didn't even have tried. Just call that function from within your onLoad()-function:
function onLoad()
{
fan();
/* … */
}
Yes.
You can use <body onload='onLoad(); fan();'> as Utkanos suggests.
If you use jQuery, you can also stick a script in the head containing:
$(function(){
...
});
The jQuery function actually fires earlier, as is explained here.
I need to write a user defined function using jQuery to swap two div tags within the page. I created the function but it is not swapping them as desired. In fact, when I move the same code inline it works fine. Is there something I am missing?
It is impossible to debug something that I cannot see, but I wrote a "swapper function" for you:
function swapem($el1, $el2) {
var $t=$el2.clone().insertAfter($el1);
$el1.insertAfter($el2);
$el2.remove();
}
$('#swapper').click(function () {
swapem($('#div1'), $('#div2'));
});
jsFiddle Demo
Please see the the following http://valogiannis.com/recent/ .I have a webpage and when user click XHTML code a div with id result loads the contents of a webpage (in this case codes/advocasys.html). In fact what I wish to do is to highlight the html code. I have link the necessary css/js. I use the SyntaxHighlighter 3.0.83. This highlighter needs to call the SyntaxHighlighter.all() after the <pre> tag (more info here). If I have the html code in the same page which I want to highlight works nice, but I cannot make it to work, when the script loads the external page advocasys.html. I tried to put the
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
in the bottom of the advocasys.html, but It didn't work. How can I make it work?
Thanks in advance.
The .all() call attaches an event handler to window.load which already happened, instead use .highlight(), like this:
SyntaxHighlighter.highlight();
You need to call SyntaxHiglighter in the callback function after the data is returned:
$('#myLink').click(function(){
$('#result').load('codes/advocasys.html', function() {
$('#result').show();
$('.scroll-pane').jScrollPane();
SyntaxHighlighter.highlight();
});
return false;
});