Reuse a Jquery Script - javascript

I'm trying to reuse a function i made, but with any help yet.
Here is my index.html.
<html>
<head>
<script src="jquery-1.5.1.js")" type="text/javascript"></script>
<script src="JqueryScript.js")" type="text/javascript"></script>
<script type="text/javascript">
//MYLIBRARY.init(['#button1']);
execute(['#button1']);
execute(['#button2']);
</script>
</head>
<body>
<button type="button" id="button1">Click Me!</button>
<button type="button" id="button2">Click Me!</button>
</body>
</html>
And here is my script.
function execute (Args){
_args = Args;
$(function() {
$(_args[0]).click(function() {
alert("hello " + _args[0]);
return false;
});
});
}
The problem is always triggers the second alert windows (#button2). How can i make it work with both alert windows?

My guess is that you are wondering why both buttons alert the same output.
Because _args is global. Thus the second invokation will overwrite _args.
Use var to make it local:
var _args = Args;
Your code could still be improved (see #Town's answer), but this should get you started.
You also have errors in your HTML
<script src="jquery-1.5.1.js")" type="text/javascript"></script>
<!-- ^^ -->
<script src="JqueryScript.js")" type="text/javascript"></script>
<!-- ^^ -->

What exactly are you trying to do?
From what I can see, you could achieve the same functionality as what you have with simply:
$(function() {
$('button').click(function() {
alert("hello #" + this.id);
});
});
Example

Looks like C to me :)
You'd be better off with
<script type="text/javascript">
$(function () {
execute('#button1');
execute('#button2');
}
function execute(buttonId)
{
$(buttonId).click(function () { alert('Hello ' + this.id); });
}
</script>

Related

Run function if specific word is found in array

I am looking for a way to run a function if my array contains the word 'AGE'. I am rather terrible at coding but have pieced together this code:
HTML:
<div class="finish" >?</div>
Script:
var co = ["AGE"]
$(document).ready(function(){
$(".finish").click(function(){
if (co.contains("AGE")) {
alert($.unique(co));
return false;
}
});
});
What could be missing? I am sure it should be very easy, but I am not getting anywhere.
I ended up with this version:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var co = ["AGE"];
$(document).ready(function(){
$(".finish").click(function(){
if ($.inArray("AGE", co) >= 0) {
alert($.unique(co));
return false;
}
});
});
</script>
</head>
<body>
<div class="finish" >?</div>
</body>
</html>
Here is the link to the documentation of that helper method from jQuery:
jQuery.inArray().

How to use namespace JavaScript?

Hi I am trying to call the namespace JavaScript which is given in the internal JavaScript in below HTML representation.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function() {
ns.message(var );
}
message :function(var ) {
alert('msg');
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
</body>
Is that possible? I am not able to call that namespace JavaScript function in the body.
Call it like this:
ns.sampleAlert();
Read this link to have more understanding on JavaScript Namespace
You probably need to do something like the following.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function(messageText) {
ns.message(messageText);
},
message : function(text) {
alert('msg ' + text);
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
<script type="text/javascript">
ns.sampleAlert("this text will be displayed in the alert");
</script>
</body>

Uncaught ReferenceError: jQuery is not defined

I don't see why I would get this, code below:
<head>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" type="text/javascript"></script>
<script>
var json1 = {
text: "After first paragraph"
};
var first_content_added = false;
$(function() {
$(".learn-more").on("click", function() {
$.getJSON("json_info.json", function(data) {
appendContentToFirstP(data.reviews[0].about.moreinfo);
});
});
});
function appendContentToFirstP(content) {
if (first_content_added) {
return;
}
var after_first_p = $('<p class="more-info" />');
after_first_p.text(content);
$(".first").append(after_first_p);
first_content_added = true;
}
</script>
</head>
What would be causing the error?
My initial thought is the error is because I have not imported JQuery, but I have. It's inside the script tag at the top.
You haven't included jQuery, you've only included the plugin jQuery.color.
Reference it before jQuery.color:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
write before that color js like this
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" type="text/javascript"></script>

Jquery UI Datepicker doesn't show again when link is clicked

I seem to have this working except for the fact that once the link is clicked, the datepicker opens, then I select a date and all is good and well, then once I try to click the link again, the date picker does not open again.
What am I doing wrong?
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
function test() {
var datePickerValue = null;
$("#d1").datepicker().datepicker("show").change(function ()
{
$('#d1').datepicker({onSelect: datePickerValue = $(this).val() }).hide();
alert("You picked: " + datePickerValue);
});
}
</script>
</head>
<body>
<div id="d1"></div>
test
</body>
</html>
Just add the show method before the datepicker() as like below:
$("#d1").show().unbind().datepicker().datepicker("show").change(function () {
$('#d1').datepicker({onSelect: datePickerValue = $(this).val() }).hide();
alert("You picked: " + datePickerValue);
});
This will fix your issue.
function test() {
$('#d1').datepicker({onSelect: function(){alert("You picked: " + $(this).val())})} );
}
Sorry if i am completely off the mark here but you might have more success if you use, jquery .on - http://api.jquery.com/on/
so add a id or class to your link:
<a class="clicky" href="#">test</a>
then call your function like this:
$("body").on("click", ".clicky", test);
I think this will solve your issue but I may be wrong

JavaScript is not running in Mozila Firefox, only runs in IE

<script language="JavaScript">
function del_rcd(param)
{
if(confirm("Do you really want to delete it"))
{
window.location = 'controller/del_task_ctl.php?param='+param;
}
}
</script>
<script language="javascript">
function popup(id)
{
window.open("detail.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
<script language="javascript">
function popupcomp(id)
{
window.open("edit_task.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
<script language="javascript">
function popupclose(id)
{
window.open("close.php?qid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
Is JavaScript disabled in Firefox?
Just as a side-note. The "language" attribute is quite obsolete (See point 7). Instead write
<script type="text/javascript">
</script>
I just made this quick test under OSX Firefox and it just works:
<html>
<head>
<script type="text/javascript">
function del_rcd(param){
if(confirm("Do you really want to delete it"))
{
window.location = 'controller/del_task_ctl.php?param='+param;
}
}
function popup(id)
{
window.open("detail.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
function popupcomp(id)
{
window.open("edit_task.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
function popupclose(id)
{
window.open("close.php?qid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
</head>
<body>
<input type="submit" Text="Click me" onclick="del_rcd('test')"/>
</body>
</html>
Additionally what I always recommend web devs is to install Firebug and optionally PageSpeed. This is a must especially when you deal with JavaScript. Firebug automatically shows you syntax or JavaScript runtime errors.
I am submitting a form to this script by calling these js function
but submit button only works in IE and on all other browsers Submit button is not working

Categories