jquery .load Function - javascript

I'm learning how to load and modify web content on client side without page load and postbacks.
I want to load the content of Controls/content.html into the div just like i saw on multiple exemples :
here's the div and button :
<input type="button" id="btnHtm" onclick="Content()" name="Menu" value="HtmAppear" />
<div id="htmlCont"></div>
here's the content :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h4> HELO </h4>
</body>
</html>
Here's the file path :
,
Edit : deleted other trys
Here's my fourth try :
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />
<script language="javascript" type="text/javascript" >
$(document).ready(function content() {
$('#htmlCont').load("Controls/content.html");
});
</script>


Your selector need a #. Try this:
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#htmlCont').load("Controls/content.html");
});
</script>

Related

window.open() opening a tab instead of a window in Chrome using user input as url source

Not matter what I try, this code is still opening in a new tab. Any ideas on how to modify this to make a new window open?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cast Challonge</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.open("http://challonge.com/"+inputvalue+"/module?theme=5928&show_final_results=0&multiplier=0.3&show_tournament_name=1&scale_to_fit=1"),"_blank","width=1323,height=816";
});
});
</script>
</head>
<body>
<input type="text" value="" id="input">
<button type="button" id="button">Submit Tournament ID</button>
</body>
</html>

Sharing the correct answer in case anyone ever needs this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cast Challonge</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.open(("http://challonge.com/"+inputvalue+"/module?theme=5928&show_final_results=0&multiplier=0.3&show_tournament_name=1&scale_to_fit=1"),"_blank","width=1323,height=816";)
});
});
</script>
</head>
<body>
<input type="text" value="" id="input">
<button type="button" id="button">Submit Tournament ID</button>
</body>
</html>

Change '_blank' with your new window name. Example: 'New Window Test'

$(document).ready(function()) is not working in jsp

$(document).ready(function()) is not working in my jsp.I have tried in many forms.
My code is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="scripts/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Success</title>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquerymin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hiiii");
});
</script>
</head>
<body>
</body>
</html>

Try This... I have Tested, working fine....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Success</title>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hiiiiii.........");
});
</script>
</head>
<body>
</body>
</html>

$(Document).ready is works when loaded JQuery library.
For example:
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hello World!!!");
});
</script>

Changing JWPlayer video onClick

This is what I have so far below. If I hard code the file: media/video2.mp4 in the function it works but when I make it a variable its not passing it through correctly because I keep get this error:
Error loading player: No playable sources found
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My JWPlayer</title>
<script type="text/javascript" src="jwplayer/jwplayer.js" ></script>
<script type="text/javascript">
function changeVideo(filename) {
jwplayer("video").setup({
file: " + filename + ",
height: 360,
width: 640,
});
jwplayer('video').load();
}
</script>
</head>
<body>
<div id="video">Loading the player ...</div>
<script type="text/javascript">
jwplayer("video").setup({
file: "media/video1.mp4",
height: 360,
width: 640
});
</script>
<p>Play Video 2</p>
</body>
</html>

It is because you are placing variable filename in the script as a string literal.
just change this line
file: " + filename + ",
to
file: filename,
and it will work fine!

$.tojson not returning form values (but it creates a JSON with form fields )

Not returning form field values
var formJSON = $.toJSON($('#form1'));
JSP is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/ebs.js"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.json-2.4.min.js" type="text/javascript"></script>
<script src="js/jquery.json-2.4.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" onclick="validateField()" method="post">
Text Field 1 : <input id="txt1" name="txt1" type="text" />
<br />
<input type="submit" value="SUBMIT" />
</form>
</body>
</html>
My JavaScript is:
function validateField() {
alert('fn called');
var formJSON = $.toJSON($('#form1'));
alert('after');
alert('formJSON' + formJSON);
alert("method ends here.");
}
I am getting:
form JSON{"length":1,"0":{"txt1":{},"1":{}},"context":{"location":{}},"selector":"#form1"}
(There is no content for txt1 field even if we type something there.)

$.toJSON() converts an ordinary Javascript object to JSON.
It does not get values of DOM elements or jQUery objects.
You want .serializeArray().

Using MouseUp instead of AutoFocus as a solution for iPad or iPhone

Here is my script. I'm trying to get the one field to auto focus on all browsers, mobile borwsers, and iPad browser, but I cannot get it to work. Can someone help me please? This is what I'm trying: o
On http://boxoffice.jokerzcomedyclub.com/scanner/ , the object is to get the field to automatically start the cursor in it. It works on computers, but it doesn't work on iPad or iPhone, so I'm looking for other alternatives. Please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validate Ticket</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="js/jquery.autofocus-min.js"></script>
<script>
$('.label').mouseup(function(){
$('[autofocus=""]').autofocus();
});
/*$('.label').mouseup(function(){ $('input').focus(); });*/
</script>
<script type="text/javascript">
/* window.onload = function() {
document.forms[0].barcode.focus();
}*/
</script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<br />
<div style="width:200px; border:1px #999 solid; text-align:center;">
<form action="" method="get">
<select name="Events" class="listclass">

Did you try with
$(document).ready(function(){
$('.label').focus();
});

Categories