<div id='mydiv'>
update
</div>
<script>
function openWindowReload(link) {
setTimeout(function(){
var href = link.href;
window.open(href,'_blank');
document.location.reload(true)
}, 5000);
return false;
}
</script>
so i have this code that force to refresh (after 5 secs) the current page after clicking the button 'update' (target = "_blank")...
but i want to reload only a particular div....
explanation:
update button is only visible when field in table updating = false ... so when it is true update button is not visible..but when u click the button update it will 1st update the table and set updating = true
update.php
<?php
mysqli_query($con, 'UPDATE TABLE sET updating = TRUE');
(long code in here)
?>
so can u pls help me guys to achieve my goal.....
Using jquery $.post shorthand ( http://api.jquery.com/jquery.post/ ), for example:
$(document).ready(function(){
$.post( "update.php", function( data ) {
// wrap this with the timeout, if you need
// but the method post is asynchronous already and takes time
$( ".update" ).hide();
});
});
The html:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button class="update">Update!</button>
</body>
</html>
That's all! Hope this helps!
Related
In my code I have
<script>
$(document).on('click', 'a#coin', function(){
// get month
var val = $(this).attr('data-id');
$.post('alert.php', {coin: val}, function(data){
console.log(data);
});
});
</script>
This is the data toggle link for the modal
<a id="coin" href="#" data-id="BTC" data-toggle="modal" data-target="#alertmodal"><i class="fa fa-bell fa-lg" title="Set Alert for BTC" style="color:orangered"></i></a>
And in alert.php I simply have
$coin = $_POST['coin'];
echo $coin;
The modal is popping up fine its just not passing the data-id value
Unsure as to what Im doing wrong
More code added
<?php
require('alert.php');
?>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function(){
$("#liveprices").load("liveprices.php");
setInterval(function() {
$("#liveprices").load("liveprices.php");
}, 5000);
});
</script>
</head><body>
The function discussed here is loaded at the end of the document
Says bootstrap.min.js requires Jquery although jquery is loaded right
above it
By default bootstrap uses jQuery slim version. Slim version do not have $.ajax and related functions. Use the jQuery full version.
Use this jQuery
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Below is the comment from the slim version with the features removed
/*! jQuery v3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */
After a discussion over the chat regarding the requirements, we came to a conclusion that PHP is not at all required in this case and simple jQuery does the trick:
Requirements:
If you look at this screenshot
you will see a list of coin names with an alarm icon ..
When the relevant alarm icon is clicked I want it to pop up a modal and just assign and echo a variable value ( which will be the coin ) BTC etc
Later on a form will be added which ideally will have that data added to a hidden field ready for submission
Solution (one approach):
JS FIDDLE
Relevant code changes:
$(document).on('click', 'a.coin', function(){
var val = $(this).attr('data-id'), modal = $('div#test-modal');
console.log(val);
modal.find('.modal-title').html('Get alerts for ' + val);
modal.find('.modal-body .alert-notification').html('Get alert notifications when ' + val + ' breaks strong support / resistance lines');
modal.modal('show');
});
Since you are using document.on('click'), the $(this) may be somewhat confused. I might try $(event.target).closest('a#coin') in place of $(this) and see if it helps:
$(document).on('click', 'a#coin', function(event) {
var val = $(event.target).closest('a#coin');
console.log(val);
});
If I'm trying to send Html Data in textarea Code is failed. alert Working till Username data getting properly but ajax not sending my Data to Php server.
Javascript
var username=document.getElementById( "my_text" ).value;
if(username){
$.ajax({
type: 'post',
url: 'checkdata.php?username=username',
data: {
username:username,
},
success: function (response){
$( '#name_status' ).html(response);
if(response=="OK"){
return true;
}
else{
return false;
}
}
});
Html
<textarea id="my_text" >
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</textarea>
There are a couple of places your code could be breaking down. This would be easier for us to help with if you provided console logs of errors.
1) If you haven't loaded jQuery yet then the $.ajax() won't be called. You may also need to do $(document).ready(); to make sure everything is loaded.
2) You are wrapping an entirely new DOM inside of a textarea. I'm not sure if that's a copy/paste mistake but it'll have strange effects on the result.
3) After your response it's apparent that you are actually trying to send html to the server..? Your error code from console suggests there's plenty else going on. It's hard to know how to help if we don't see everything. i.e. PHP and the rest of the client code.
3) Since your if statement isn't wrapped in a function call it is evaluated at runtime. So the code runs at the page load but nothing triggers it later. Which means username is always null.
If you want to fix this you need something to trigger the event. You can try:
HTML
<body>
<textarea id='my_text'></textarea>
<button id="submitButton">Submit</button>
</body>
JS
let sub = document.getElementById('submitButton');
sub.addEventListener('click', function(){
let username = document.getElementById('my_text').value;
if(username){
// Add Ajax Call Here
}
});
Backup.html or php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Text editor</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function view_text () {
var username=document.getElementById( "my_text" ).value;
console.log(username);
if(username){
$.ajax({
type: 'post',
url: 'checkdata.php',
data: {
username:username,
},
success: function (response){
$( '#name_status' ).html(response);
if(response=="OK"){
return true;
}
else{
return false;
}
}
});
}
else{
$( '#name_status' ).html("");
return false;
}
}
</script>
</head>
<body>
<input type="button" value="Execute >>" onclick="view_text()" class="button"/>
<textarea id="my_text" >
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</textarea>
<span id="name_status"></span>
</body>
</html>
For a few hours I've been trying to understand what's wrong. My purpose is to enable a button after textfields are filled. Code seems fine according to my test at JSFiddle but it's still not working on my server. Am'I missing something or is this a server problem (which is hard to believe since javascript is client-side)?
PS: I'm not expert at HTML, so I don't know how to identate it's syntax; if it's not that readable I'm sorry and would appreciate an edit-help. thanks.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var $input = $('input:text'),
$apply = $('#apply');
$apply.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
});
</script>
</head>
<body>
<section class="container">
<div class="OpenKore">
<div id="absolute">
<form method="GET" action="generate.php">
<fieldset>
<legend><h1>OpenKore Automatic Config:</h1></legend>
LOGIN:
<p><input type="text" id="id_login" name="login_value" value="" placeholder="Login"></p>
SENHA:
<p><input type="text" id= "id_senha" name="senha_value" value="" placeholder="Senha"></p>
PIN:
<p><input type="text" id="id_pin" name="pin_value" value="" placeholder="PIN"></p>
<input id="apply" type="submit" name="commit" disabled value="Gerar Configurações">
</fieldset>
</form>
</div>
</div>
</section>
</body>
</html>
When the browsers reads your HTML page, it reads top to bottom. When it gets to your <script> tags it runs them. Now it us doing this before it has got to the rest of the page, i.e. before it even knows about any body or form or input:text tags, so even though you code will run, it will simply not do anything because none of the elements on the page exist yet.
JavaScript 101, make the code run after the page has loaded, if you need to access elements on the page. How do you do that? either put the code at the bottom of the page (move your <script> tags to just before the </body> tag), or wrap your code in a function that is executed after the browser has finished loading the page. Now jQuery has a very helpful way of doing this for you, pass a function to jQuery and it will be executed after the page is loaded.
jsFiddle does this automatically for you, hence the drop down in the top left corner saying 'onLoad'
i.e. your code
$(); //this is the jQuery function
//This is your code wrapped in a function called 'yourCode'
function yourCode() {
var $input = $('input:text'),
$apply = $('#apply');
$apply.attr('disabled', true);
$input.keyup(function () {
var trigger = false;
$input.each(function () {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
});
}
$(yourCode); //this is passing the jQuery function a function,
//this will now be execute once the page is loaded
//or what most people do, pass in as an anonymous function
//which eliminates a step
$(function () {
var $input = $('input:text'),
$apply = $('#apply');
$apply.attr('disabled', true);
$input.keyup(function () {
var trigger = false;
$input.each(function () {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
});
});
as suggested by #j08691 I would suggest reading about the document ready in jQuery here
I was wondering how i can add a new tr and td wrapped around data received from a ajax call? The following doesn't work.
$.get('/edit/'+course_id, function(data){
///add class to current tr
$('#course_'+course_id).addClass( "info" );
$('<tr><td>'+data+'</td></tr>').insertAfter('#course_'+course_id);
});
Any help would be much appreciated.
Thanks
You can add that to a table element. I think in IE, it needs to be attached with tbody.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
var data='some HTML';
$('<tr><td>'+data+'</td></tr>').insertAfter('#course');
});
</script>
</head>
<body>
<table>
<tbody>
<tr id="course"><td></td></tr>
</tbody>
</table>
</body>
</html>
(really) difficult to answer without the HTML markup, but this might be a binding problem :
maybe you can try
var successCourse = function(courseId) {
return function(data) {
///add class to current tr
$('#course_' + courseId).addClass("info");
$('<tr><td>' + data + '</td></tr>').insertAfter('#course_' + courseId);
};
};
$.get('/edit/'+course_id).done(successCourse(course_id));
The neatest way is probably...
$.get('/edit/' + course_id, function() {
// do whatever else you need to do
var formatted = $('<tr/>').append($('<td/>', { html: data }));
formatted.insertAfter('#course_' + course_id);
});
This saves you from the mess of writing html tags in as strings and having to remember to close them etc, by letting jQuery do pretty much everything for you.
Here's an example on jsFiddle which shows it working. Hope this helped!
I am validating data present in CKeditor on a button click event using jquery. After the button click it separates the list of correct answers and wrong answers. This works fine. But after modifying the wrong answers and hit the button, it again takes the initially entered values. How to make it take the modified data on the 2nd button click.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script src="../ckeditor/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
CKEDITOR.replace('Field');
var correctZips = new Array;
var wrongZips = new Array;
var CorZip;
var WorZip;
$('#save').click(function () {
var editor_data = CKEDITOR.instances['Field'].getData();
var element = $(editor_data).text().split(",");
$.each((element), function (index, value) {
if(this.length=5 && jQuery.isNumeric(this)) {
correctZips= correctZips+"<span>"+this+"</span>"+",";
}else {
wrongZips= wrongZips+"<span id='flip' style=\"background-color: yellow; \">"+this+"</span>"+",";
}
}
)
CKEDITOR.instances.Field.setData((correctZips + wrongZips), function (index, value){
})
//$("#save").attr("disabled", "disabled");
});
});
</script>
</head>
<body>
<textarea id="Field"></textarea>
<button id ="save">Verify the ZipCodes</button>
</body>
</html>
Regards,
Steven
You are deinfing the 2 ZIPS variables as arrays outside of the click handler. You need to reset them for each time a click occurs so they need to be defined inside the handler and they shouldn't be defined as arrays since you are using them to concatenate strings
$('#save').click(function () {
var correctZips = '', wrongZips='';/* start with empty strings*/
/* remainder of your handler code*/
});