I have created a button in a view in Php codeignter.
View
<div id=div_signup>
<input id="btnRegisterID" name="btnRegister" style="margin-right: 5px;" value="Register" type="button" class="btn btn-success"/>
</div
Controller
public function register()
{
$this->load->view('MAIN\view_Register');
}
On click of this button I am making an ajax call and On success I am re-binding same view within a signup div again.
Which means after first event now button is reloaded by view.
Ajax call:
$(document).ready(function()
{
$("#btnRegisterID").on("click", function()
{
$.ajax({
type:'POST',
url:'http://localhost/Voyager/Main/register',
data:{},
success:function(){
$("#div_signup").load('http://localhost/Voyager/Main/register');
},
failure:function(){
alert("nooo");
}
});
});
});
On first click it works fine, ajax call is successful.
But on second click nothing is happening.
There is no error in browser console.
Can someone help with this.
Am I missing here something?
Update:
On success on ajax call I changed above code to location.reload(). Still issue isn't resolved.
success:function(){
location.reload();
},
Change you button click event to like this
$(document).on('click', '#btnRegisterID', function () {
// You ajax Code
})
TRY THIS
IN SUCCESS REMOVE
$("#div_signup").load('http://localhost/Voyager/Main/register');
REPLACE
location.reload();
Try window.location.reload() instead of location.reload();
Taking button outside that Panel worked for me partially.
However there was issue with my architecture in view. It is not possible to partially load a view in jquery without complete page refresh keeping data uptodate.
Thank you for all your help.
Related
I'm not a jQuery expert, but tried to create a (simple) function where users can simple click on a button to upvote an item. After a lot of failures, I managed to create the following:
jQuery
function vote(_obj) {
$.ajax({
type: "POST",
data: "id=" + $(_obj).attr("id"),
url: "vote.php"
});
}
$('.favorite').click(function() {
vote(this);
});
So every time a user click, the page refresh (and automatically jumps to the top of the page). I tried already do add a e.preventDefault(); but without any results.
HTML/CSS
<i class="fas fa-heart" style="color:#dc3545"></i>
Kind regards!
Just prevent the default action of the click. This would prevent a form submitting or a link from following it's href url or whatever the default of that element is when that event occurs
$('.favorite').click(function(event) {
event.preventDefault();
vote(this);
});
In additional to e.preventDefault() you can use return false; from a jquery event handler.
$('.favorite').click(function() {
vote(this);
return false;
});
Alternatively, semantically this should really be a <button> not an <a>, make it type='button' and it won't do anything other than your code (the default is type=submit so needs the type= specified otherwise will attempt to submit your form). You may need to add some css to stop it looking like a "button".
<button type='button' class="favorite">
<i class="fas fa-heart" style="color:#dc3545"></i>
</button>
with your same existing code
Prevent reloading
You can use preventDefault() function like this to prevent your browser from reloading :
In your Javascript :
$('.favorite').click(function(e) {
e.preventDefault();
vote(this);
});
Your a tag doesn't have href value so it looks like reloading page (but it's browsing to the same page).
Update vote value
To update your vote value, you can use success() function of jQuery's Ajax call, and update value as you want (ex: only increase or getting value from the call's response), using selector to update the right value.
$.ajax({
type: "POST",
data: "id=" + $(_obj).attr("id"),
url: "vote.php",
success : function(response){
// update your value here, using selector
// ex: $('.vote-' + $(_obj).attr('id')).val(response.vote)
},
error: function(response) {
// handle error
}
});
I have website that every page is being loaded using ajax both back to previous page, but the problem am facing now is submitting a form using ajax post. I try cache a form data with ajax and is working very fine except when i back to index.php and load same page again it will submit multiple time. And the more i back and load same page again it will submit how many time i loaded it.
What i really mean is, when i click on Open Page One from index page, and submit a form it will work at first browser reload. But when i use my ajax back button to navigate to index page and load that same Open Page One without reloading browser, it will submit two times and if i repeat same process again again, it will keep submitting based on how many time i click back and enter the page again.
Please can anyone help me i have also tried making the form id unique but it only work fine for different page ID.
INDEX.PHP
<div id="ShowPageContent">
Open Page One
Open Page Two
Open Page Three
</div>
<script>
$(function(){
"use strict";
$(document).on('click', '.loadwithajax', function(e){
var targetUrl = e.target.href;
var prevUrl = $(this).attr('data-page-link');
$.ajax({
type: "POST",
url: targetUrl,
data: {targetUrl : targetUrl, prevUrl : prevUrl},
async: false,
beforeSend: function(){},
success: function(htmlBlock){
$('#ShowPageContent').html(htmlBlock);
}
});
e.preventDefault();
});
});
</script>
OPENPAGE.PHP
<?php
$validateForm = 'validate-form-'.md5($_GET['targetUrl']);
?>
Back To Main Page
<form action="" method="post" class="<?php echo $validateForm;?>">
<input type="text" value=""/>
<input type="submit" value="Send"/>
</form>
<script>
$(function(){
"use strict";
$(document).on('submit', '.<?php echo $validateForm;?>', function(e){
$.ajax({
type: "POST",
url: ajax_appserver('shop', 'update_product.php'),
data: $(self).serialize(),
beforeSend: function(){},
success: function(data){
console.log(data);
}
});
e.preventDefault();
});
});
</script>
The problem happens because every time you load the page you attach an onsubmit handler to the document. Loading that page multiple times and document will have multiple copies of the same handler attached to it.
Adding $(document).off('submit', '.<?php echo $validateForm;?>') before $(document).on('submit'... will remove the previously attached handlers before adding a new one, and will solve your problem.
Entry level user here. I've seen countless AJAX\PHP examples with data being passed via POST or GET and modified one of their examples. When clicking the button (id="clickMe) I want it to execute advertise.php and nothing more (no variables need to be passed) without refreshing the page and a notification that says success. When I click the button with my current code nothing happens.
<button type="button" id="clickMe">CLICK ME TO RUN PHP</button>
<script type="text/javascript">
$(document).ready(function(){
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({
url: 'advertise.php',
data: {
'ajax': true
},
success: function(data) {
$('#data').text(data);
}
});
});
});
</script>
Updated, but still isn't executing.
Here is your editted version code:
$(document).ready(function(){
$('#clickMe').click(function(){
$.post("PHP_FILE.php",{ajax: true},function(data, status){
alert(data);
});
});
});
2 things - you need a document ready handler and to prevent the default click action.
$(document).ready(function() {
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({ // remainder of code...
});
When loading jQuery scripts at the top of the page you need to make sure they do not run until the DOM has loaded, that is what the document ready handler is for. The you capture the click event by including it as an argument for your click's callback function and handle the click with the preventDefault() method.
Since this request is "simple" you may want to consider using one of the shorthand methods, like $.post()
I know it's possible using jQuery to load/run an external web page. In the past I've used something like:
$.ajax({ url : 'test.php'})
What's I'm looking to do now is when a user click the 'GO' button an external PHP is called. Whilst it's running the main page should show 'please wait' and once the external script has finished the main page should update to show completed.
The php page I'm calling is actually running a shell script and I get no feedback from it. However the page runs and completes fine.
Is there anyway I can tell if it's still running and then update the main page ?
I'd be grateful if some one could point me in the right direction.
Thanks
UPDATE based on answer below.
<script type="text/javascript">
$(document).ready(function() {
$("#update").click(function() {
$("#status").html("<p>Please Wait!</p>");
$.ajax({ url : 'test.php' }).done(function() { $("#status").html("Completed"); });
});
});
</script>
<span id="status"><span>
<input type="button" id="update" value="Check for Update" />
Lets take an example:
you have this html:
<script type="text/javascript">
function updatecheck()
{
//Shows Please Wait in Status
$("#status").html("<p>Please Wait!</p>");
$.ajax({ url : 'test.php'})
.done(function() {
//Hides Status
$("#status").html("");
}
</script>
<span id="status"><span>
<input type="button" onclick="updatecheck()" value="Check for Update" />
.done will be triggered when the ajax request will be completed and it will hide the value.
In case you want to show completed instead of hiding value just use:
$("#status").html("Completed");
$.ajax({
url:"test.php",
beforeSend: function(){
//show the loading!
},
success:function(){
//hide the loading
}
})
you should also make shure that your server side script runs correctly! and response with a status ok!
$(function(){
$('p.load_it a').click(function(){
$('#demo_content').load('http://d.com/myphp.php? nice=1149632');
return false;
});
});
Click me to load some HTML with AJAX.
<div id='demo_content'>
</div>
I wanted to know if anyone can give me advice as to how I can load this kind of Effect not by a click, but by an animated "loading" effect.
Let me know if anyone has any suggestions.
This will execute your load() call when the DOM on the page is ready.
$(document).ready(function() {
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
return false;
});
As for your 'loading' request, I suggest you take a look at this StackOverflow question. Nevermind, I just saw you already had something in mind.
$(document).ready(function() {
$.ajax({
url: 'http://example.com/myphp.php?nice=1149632',
success: function(data) {
$('#demo_content').html(data);
}
beforeSend: function(){
//show loading here
$('#demo_content').html("Loading...");
}
});
});
If you want the javascript code to be executed when the page has been loaded, you can also add the script at the bottom of the page, like this:
<script>
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
</script>