I'm a bit new to JavaScript and I have a really silly question: How can I call a function I have in a Coffeescript file from HTML?
I want the users to be able to select the language they see my site, but don't want my html to be reloaded for that.
I am using i18next to make the translations and now what I need is to add some buttons to select the language.
The function will reload just a section of the page is in my coffee file.
So, how can I call this function from my html file?
PS: If you can show me some examples it'll be great!
Simply use these code with jquery :)
var data = {
'value': $("#myb option:selected").val(),
'link': 'kapil'
}
$.post("your_file",data, function(response) {
alert(response);
});
If your HTML code contains have button like
<button type="button" name="submit" id="submit" onclick="change();" >Submit</button>
Write a script to send ajax request:
function change(){
$.ajax({
url:"add url here",
type:"POST",
data:{"dataval":add} //add is a variable that contains value,
success:function(response){
alert(response);
},
error:function(r,e,s){ }
});
}
You can create html(for response) in success function and replace contents of div by response
Related
I would like to send Ajax request in pug template file.
form#payment-form()
section
label(for="amount")
input#amount(name="amount" type="tel" min="1" placeholder="Amount" value="10")
script(src="scripts/jquery.js")
script.
(function () {
var amount = $('#amount').val();
$.ajax({
type: "POST",
url: "/posturl",
data: {'amount':amount},
success: function(){},
dataType: 'json'
});
})()
But it doesn't work, how to do it?
I want to know how to send ajax request in embeded javascript of pug file
To me there seems to be two issues
You have put unnecessary tabs in your function under (function (){
You need to use document.ready to ensure that HTML content is
ready. You can avoid this if you don't really care for DOM once you have the response
check a working example below
doctype html
html
head
script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js')
script.
$(document).ready(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
body
#div1
h2 Let jQuery AJAX Change This Text
Here there is no problem with your pug template (maybe just you can remove ()after #payment-form() because it is empty and it's not a mixin). But with your JS, you send the AJAX request immediatly, you should bind it to an event (click on a button, keypress on an input, etc.). Then you have to be sure you put your lib jquery.js in a directory you can access from your browser with scripts/jquery.js. If it's still not work after this change please report more precisely your error (open the console to get the messages, get us the behavior you expect and the behavior you get).
I am trying to run a PHP script as soon as Submit button is clicked. I wanted to do an AJAX call as i dint want to refresh the page after the button is clicked. But the below code is not responding upon click.
I have saved the login.php in the same location as my project. Any help or input is appreciated!
<input type="button" class="button" value="submit" />
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({
type: "GET",
url: "C:\wamp\www\ElitePass\login.php"
})
alert("done successully")
});
});
</script>
The issue is that you are not targeting your button correctly.
$("button") this selector is looking for an element of type "button". Naturally there is none. To target elements by their class names, append dot to selector:
$(".button").click(....)
Having said that, your code will still not work as you expect it to. Browser security restrictions will prevent loading of files directly from your file system. You need to load stuff via web server. Especially PHP files.
You can call success like :
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({
type: "GET",
url: "C:\wamp\www\ElitePass\login.php",
success: function() {
alert("done successully");
}
})
});
});
</script>
I have a php page which has lot's of code of html and javascript inside it.Ihe other page use ajax to send an id to the first page and get the results and put it inside a div element. Now I want to run those returned codes which contains javascript and html codes.
How should that be done?
This is my ajax request to the first page:
$(document).ready(function() {
$.ajax({
type: "POST",
url: "showing.php",
data: "s_id="+s_id+"&submit=true",
success: function(msg){
str=$.trim(msg)
document.getElementById('tabs-2').innerHTML = str;
document.getElementById("ui-id-2").click();
}
})
I think event delegation can solve your problem.
Like below:
Use $.on(). Instead of registering events on the element you register on a parent which will not be removed
Ex:
$('#tabs-2').on('click', '#ui-id-2', function(){
//do something
})
In my page i want to send a jQuery request to another PHP script, without reloading the whole page.
When clicking a button, the request needs to be sent to another PHP script, through POST.
I just can't get it to work. My code so far:
Javascript:
<script>
$(function(){
$('#pause').on('click', function(e){
e.preventDefault(); // preventing default click action
$.ajax({
url: '/cura/includes/pause_agent.inc.php',
type: 'post',
data: $pausedata,
success: function(){
// ajax callback
}, error: function(){
alert('ajax failed');
},
})
})
})
</script>
PHP code of button & URL to be sent:
if($member['Paused']==0){
$pausedata = '?action=agentpause&agent='.$member['Location'].'&paused=true';
echo('<td><button id="pause" class="btn btn-warning btn-sm">Pause      </button></td>');
}
else{
$pausedata = '?action=agentpause&agent='.$member['Location'].'&paused=false';
echo('<td><button id="pause" class="btn btn-success btn-sm">Unpause</button></td>');
}
Any suggestions/ideas?
There are a couple of things to note here, first of all you need to make sure your document is ready before doing your jQuery, to do this you can either put your script at the bottom of the page or put all of your script inside a
$(document).ready(function(e) {}
event.
To post data there is a shortcut which is
$.post("path/to/php/script.php",
{postVariableOne:valueOne, postVariableTwo:valueTwo,...},
function(data){
//callback function
});
Note valueOne and valueTwo are javascript variables
Then, in the PHP script, you would access the sent data like this
$_POST['postVariableOne'];//this equals valueOne
I have a php page which includes jQuery and a script.js file. When I put the following function inside my php file, the function gets executed and works as intended:
<script>
$('#scoreboard-overview').load('getusers.php?q=<?php echo $NewString; ?>').fadeIn("slow");
</script>
What does it do? Wel it reloads the div with id scoreboard-overview in my php file with data from an external php file called getusers.php
This all works great.
Now in the script.js file (which is loaded at the end of the php page, right before </body>), I also want to reload this div when the updatescore.php file is done updating the database via a form. I have this code for it:
$.ajax({
type: "POST",
data: $("#form").serialize(),
cache: false,
url: "updatescore.php",
success: function() { //reload overview
$('#scoreboard-overview').load('getusers.php?q=' + document.getElementById('str') + '').fadeIn("slow");
}
});
So after success it should execute the jQuery function:
function () { //reload overview
$('#scoreboard-overview').load('getusers.php?q='+document.getElementById('str')+'').fadeIn("slow");
}
I verified the code. The database gets updated using updatescore.php but after this (so after success), the div isn't refreshed. So this success part of code isn't working. What am I doing wrong?
ps: '+document.getElementById('str')+' should give me the same result as echo $NewString; only taken from the div with id str (since php doesn't work inside a js file?)
document.getElementById('str') is going to return the HTML element with the 'str' id, not the text within the element. I'm not sure what this element actually looks like, but you might do something like document.getElementById('str').textContent.