I'm trying to load a PHP file into another PHP file on a click event through Ajax. I'm trying to do this to eliminate loading several modals I have on the page. It seems the PHP file is loading (in the console), but nothing is showing up.
Here's my javascript:
$("a#lightbox-open").click(function(e){
e.preventDefault();
$("body").addClass("noscroll");
$('section#lightbox').addClass("open");
$.ajax({
context: '#lightbox-holder',
url: '/template/lightbox.inc.php',
type: 'POST',
dataType: "json",
success: function(html){
alert("works");
}
});
});
In my main PHP file, I have a div #lightbox-holder that lightbox.inc.php is supposed to load into it.
context expects a (Plain)Object (as you can read in the api doc). Replacing '#lightbox-holder' by $('#lightbox-holder') will do the trick.
Working fiddle with the $() added versus non working fiddle representing your current code.
Related
I have a problem with js script.
I load subpage by ajax and append code to div.
$.ajax ({
type: "POST",
url: "load/page/",
dataType: "json",
success : function(data) {
$('.content').empty();
$('.content').append(data);
},
error : function(e) {
console.log(e);
}
});
Subpage contains appeal to js script:
<script src="//<?php echo $_SERVER['SERVER_NAME'].'/'.BASE_DIR; ?>/scripts/settings.js"></script>
Why when i execute ajax multiple times settings.js events are executing multiple too? I want to could execute ajax code multiple times but js scripts are executing only once.
I replaced $(document) to $('.content') and add line $('.content').off(), now code is working great.
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 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
})
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.
The question might be a little misleading as I don't want to know how to open a html document in a div ,but I asked the question as I am currently facing a problem where I can't replace the html file which I have already placed in a div
I have already placed a html file in a div using ajax like this:
$.ajax({
url: 'calender.aspx',//this is html.aspx file
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);//mainBar is the div
}
});
this file gets placed on page load i.e document.ready function ,till here everything is fine.....my trouble starts when I want to replace the file,what I do is call a javascript function say replaceFile() on button click and write the same code to replace the file (changing the url of course)
like this
function replaceFile()
{
$.ajax({
url: 'Another.aspx',
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);
}
});
}
but this doesn't work,please help me out!
I guess your binding is not working when you try to click on the content you loaded via ajax . So you might want to change the binding of onclick from
$("#someButtonId").click(function(){
replaceFile();
});
to
$(document).on("click","#someButtonId",function(){
replaceFile();
});
jQuery on works with current and future elements.
with this function you will load the page into the element named result
.load( url , data, complete(responseText, textStatus, XMLHttpRequest)] )
function replaceFile(url)
{
$('#result').load(url, function() {
alert('Load was performed.');
});
}
replaceFile('htmlfile.html');
You can load this in Firebug and set a break point at $(".mainBar").html(data); to make sure it's being called. You don't have a failure handler, so it's possible that it's actually receiving an HTTP failure code, not a success code.
I'd also look at the network traffic under the Net tab to see what the request/response looks like. That's an easy way to find out what is really going on with most AJAX calls. IE9 has similar developer tools if you want to use it and not Firefox or Chrome.