Please guys is there a way i can make a value of the submit button to be loaded automatically from another page using the jquery .load function:
<input type="submit" id="submit" value="(JQUERY LOADED PAGE VALUE HERE)" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#submit').load('page.php')
}, 500);
});
<script>
Change it to a .get() and use the call back
$.get('page.php', function(data) { $('#submit').val(data); });
You can use normal ajax for this. .load() is supposed to load HTML content.
<input type="submit" id="submit" value="(JQUERY LOADED PAGE VALUE HERE)" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$.ajax({
url : 'page.php',
success : function(data){
$('#submit').val($.trim(data));
}
});
}, 500);
});
<script>
Related
I have index.php in which I would like when the user clicks the button "Click" it to redirect to "newpage.php" but also for another page "Click.php" to be loaded into the div "content" within the newly loaded "newpage.php".
Similarly I would like for when "Click Also" is clicked for the user to be redirected to the same page "newpage.php" but a different page "ClickAlso.php" to be loaded into the same div "content".
index.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location.replace("newpage.php");
});
$(document).on('click', '.clickmealso', function() {
window.location.replace("newpage.php");
});
});
</script>
</head>
<body>
<div>
<button class="clickme">Click</button>
<button class="clickmealso">Click Also</button>
</div>
</body>
</html>
newpage.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {});
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
Try this solution:
index.php
change your document ready event to redirect to newpage.php using url params. For this example I used a parameter named 'page'.
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location = ("newpage.php?page=click");
});
$(document).on('click', '.clickmealso', function() {
window.location = ("newpage.php?page=clickAlso");
});
});
newpage.php
Define what happens once the page is accessed. This is where things get a bit more interesting. Each time this page (newpage.php) loads, it looks for the parameter 'page' in the URL and extracts its value. The parameter's value is then assigned to a variable I called $pageToGet.
After that we check whether the value is equal to 'click' or 'clickAlso' and we display the content accordingly using require.
<?php
$pageToGet = $_GET['page'];
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="content">
<?php
if ($pageToGet == 'click') {
require('Click.php');
} elseif($pageToGet == 'clickAlso') {
require('ClickAlso.php');
}
?>
</div>
</body>
</html>
Be sure to have your files: Click.php and ClickAlso.php in the same directory for this to work.
Good Luck
I want to test a simple JavaScript function in ASP.NET.
Movies/Index.cshtml
<!-- My local JavaScript File -->
<script src="~/Scripts/JavaScript.js" type="text/javascript"></script>
<input type="button" id="getPeople" value="Get People"/>
<ul id="people_list"/>
Views/Shared/_Layout.cshtml
<script src="~/Scripts/jquery-2.2.3.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/JavaScript.js" type="text/javascript"></script>
/Scripts/JavaScript.js
$(document).ready(function ()
{
});
$('#getPeople').click(function ()
{
alert("getPeople");
}
I press the button but no alert appears. Why?
The click handler of '#getPeople' should be inside $(document).ready
$(document).ready(function ()
{
$('#getPeople').click(function ()
{
alert("getPeople");
}
});
Make sure
to import jQuery first (before importing /Scripts/JavaScript.js)
to add click handler inside document's ready event.
Check the output of your composed page (for example Developer tools in the browser), if you are uncertain.
$(document).ready(function () {
$('#getPeople').click(function () {
alert("getPeople");
});
});
I have this code .. I am not able to call the function on button click. Please help.
[ I don't wish to use onclick method in the input tag ]
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$("btn").on("click",function(){
console.log("Clicked_btn");
});
// Also tried :
$("btn").click(function(){
console.log("Clicked_btn");
});
</script>
</head>
<body>
<input type="button" id="btn" value="Click to Submit" />
</body>
Both methods do not invoke the function.. where am I going wrong ?
Try to use the id selector properly and wrap the code inside of the document ready handler,
$(function(){
$("#btn").on("click",function(){
console.log("Clicked_btn");
});
});
Check that the document has loaded before running your javascript, otherwise jQuery won't be able to find the input element:
$(function(){
$("#btn").click(function(){
console.log("Clicked_btn");
});
});
You can also have
$(document).on('click','#btn',function(){
console.log("Clicked_btn");
});
Working Fiddle
Try below code, it should work:
$(document).on('click', '#btn', function(){
console.log("Clicked_btn");
});
You can do this to,this is more preferred.
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#btn").on("click",function(){
console.log("Clicked_btn");
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="Click to Submit" />
</body>``
Sample code:
<html>
<head>
.....
</head>
<body>
<div id="content">
<form>
....
<input type="submit" onclick="loadAnotherPage()"/>
</form>
</div>
</body>
</html>
I want to load another page say edit_profile.php in the content div. How can it be achieved without refreshing the page?
I tried to use jQuery load() method. But looks like I missed something. Any help would be highly appreciated.
When you click submit button it's submit form and page refresh that's why its not working.
Instead of type submit set button and then set function onclick.
function loadAnotherPage(){
$("#content").load('edit_profile.php');
}
$(document).ready(
function() {
$('#load_file').click(
$.post('edit_profile.php',
{},
function(data){
$("#content").html(data);
},''
)
);
}
);
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<button id="loadpage">load new page</button>
<script>
$(document).ready(function () {
$("#loadpage").click(function() {
$.get("edit_profile.php", function(response){
$("#content").html(response);
});
})
});
</script>
</body>
</html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$.get("invite_friends_session.php", function(){
});
});
});
</script>
</head>
<body>
<form >
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</form>
</body>
the $.get("invite_friends_session.php") part does not work. But it works if i keep it outside the callback function.
But i need to call the invite_friends_session.php whenever there is a click on the #submit.
how to do that?
Since the submit button is inside a form, clicking the submit button bubbles up and submits the form. You need to add a return false to the end of the handler:
$("#submit").click(function(){
$.get("invite_friends_session.php", function(){
});
return false;
});
[Edit] You should prevent the default form submit action upon click.
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault(); //edit
$.get({ url: "invite_friends_session.php",
success: function() {
alert('success');
},
error: function() {
alert('error');
},
complete: function() {
alert('complete');
}
});
});
});
Remove the <form> tags around the submit button. Since you're using jQuery's .get method, you don't need that form tag (technically, it doesn't even need to be a submit input button). Right now, it's trying to post using the form instead of getting the page via jquery.
Example: http://jsfiddle.net/R3CWp/
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
alert("i got clicked");
$.get("invite_friends_session.php", function(){
});
});
});
</script>
</head>
<body>
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</body>