I have a link on my page that loads the div using a jquery function. On the page there is a form that submits to a database. The form works when when I type the page in directly but when the function loads the page, the form doesn't work.
$('.menu_top').click(function() {
var href = $(this).attr('href');
$('#load').hide().load(href).fadeIn('normal');
return false
});
This is what I am using to load the page into the div. I have added the class to the form and button. When I click submit the page flashes but the SQL doesnt update
When you load something into doom, you need to use the on command. Try this:
$('body').on('click','.menu_top',function() {
Related
I have looked at a few similar examples on StackOverflow but I can't seem to get this to work. I have an onclick event that goes to one function and if that returns ok it goes to another function and if that is fine it will submit it in the else statement like:
document.forms["input"].submit();
so I tried commenting this out and sending it to a function called showHide()
function showHide() {
$('#input').submit(function () {
$('#main-content').hide();
$('#progress').show();
});
}
It doesn't seem to submit the form like expected. I basically want to use bootstrap and show an animated progress bar so the user knows something is happening because sometimes the submission can take awhile.
Update:
I was able to get this working with both bootstrap progress bars and the jquery ui progress bar. I just run the progress bars right before it submits the form. I hide the div when i load the view.
$(function() {
$("#progress").show();
});
document.forms["input"].submit();
Without seeing more HTML, it's a bit hard to troubleshoot. But it looks like you've defined a function, and within this function you're expecting an element to trigger it, which won't really work. You could call your function from your form's submit event, like so:
//this assumes you have a form with id "input"
$('#input').submit(function () {
showHide();
});
function showHide() {
$('#main-content').hide();
$('#progress').show();
}
Simple JSFiddle demo
document.forms is an object containing the names of forms not the IDs.
If your form doesn't have a name of input (<form name="input">...</form>), the jQuery selector you're binding to won't work. Instead you'll need to use $('[name=input']).submit(...).
form submit reloads page.
hence in your head section add:
$(window).load(function() {
// Animate loader off screen
console.log("loading");
$("#dvLoading").fadeOut(2000);
});
I have a one page website in the works that has a contact form where its contact error and contact thank you messages are placed further down the page as hidden divs.
The contact form calls an external php file that calls the anchor links of the error and thank you message divs in the index.html file.
www.photograsurfer.com/test/index.html
www.photograsurfer.com/test/code/contact-panel.php
Everything works successfully as long as the divs are not hidden. So now I need to use the following javascript to get the hidden divs to display when needed.
<script type="text/javascript">
function showContactPanelError() {
document.getElementById('contact-panel-error').style.display = "block";
}
</script>
My problem, besides being a complete PHP beginner, is that I don't know how to get the PHP file to reference the Javascript code to display the hidden divs properly on the main page.
Any help is appreciated.
Thanks.
Use jQuery forms (http://malsup.com/jquery/form/) to submit your form via AJAX, then show/hide divs depending on values you return from PHP scripts.
you could assign php variable to javascript as
var error="<?php echo $_GET['error']; ?>";
the $error is the data passed along with the url like wwww.example.com/test.php?error=1
Now you could check var error and call your function showContactPanelError().
I ended up going with a mixture of the 2 methods on these pages.
http://trevordavis.net/blog/ajax-forms-with-jquery
https://spruce.it/noise/simple-ajax-contact-form/#contact
Ditched the div idea since the Ajax method allowed me to not reload the page and enter error and thank you messages within the contact form itself. Seemed like an easier approach.
Thanks for all of the suggestions, as I never would have looked at using Ajax otherwise.
You can add a onclick event on submit button. On clicking it will create an ajax call send data to the required external PHP file and then on success will display the hidden division properly on the main page.
here's a sample code just for an explanation
**
* Description : Function that will trigger the AJAX request.
* #param none
*/
function CategorySubscriber_Unsubscribe(){
var data = {
'data-1': data-1,
'data-2': data-2,
// as per your need you can put any number of data
};
var url = // your url
jQuery.post(url, data, function(response){
jQuery.show("#your-div-id");
});
}
function(response) will be executed when ajax call will be in success status.
You can learn it from these links
http://www.w3schools.com/jquery/ajax_post.asp
http://api.jquery.com/jQuery.post/
I have a form submit via php and after submitted which mean data inserted to the db and
I want to trigger a jquery function automatically and the function contain the inserted data.
Problem I facing is during the page load, the jquery.js file has not load yet and I can't call
the jquery function.
Another problem, If after the page loaded, how can I automatic trigger the jquery function?
Add the script tag that includes the jQuery in head before your use jQuery and put your javascript just before ending body tag. Putting the code in document.ready will ensure the availability of DOM elements to your script and trigger the javascript as the page is ready after being accessed.
$(document).ready(function(){
//your code here
})
try this
this will trigger on form submit
$('.formclass').on('submit',function(){
// this will redirect to the page you want
window.location = "http://www.yoururl.com";
});
but if you want to trigger a function when the form is submitted and the new page is loaded then #Adil suggestion is what you need ..
but you have to be sure that this page only shows after the form submit if for example after submitting the form you redirect to the home page and you used the document.ready then this will run when the page is loaded regardless of the form submit-ion , so every time i go to the main page it will fire ...
I have an iframe on my page, where on click (a menu) will update the iframe with a new URL depending on what menuitem they select.
I do that by calling javascript function on 'onclick' passing the URL from the menu :
function frameclick(pageurl)
{
$("#iFrame1").attr('src', pageurl);
}
What i would like to do whenever they press a menuitem is to store what iframe is loaded, because i have another button (select page language) and when they press that i want to reload the page but pass on the iframe-url that is currently displayed as a variable in the site url.
Since PHP is serverside and JS is clientside, i cannot do ex. "$current_iframe_url = pageurl" - which would have enabled me to pass it on as a variable on refresh.
You know how i could get around this ?
That works fine.
What i want to do now, is to whenever they click a menuitem i want to store that URL
on every click create a hidden field save the value of url in a hidden field then only change the url. then after that you can simple submit the form using ajax .
or when ever user clicks call an ajax function so that u can copy the url in database or session what ever you like.
sample
function frameclick(pageurl)
{
$.post("server.php", { url: pageurl } );
$("#iFrame1").attr('src', pageurl);
}
your php server.php should do something like this
if(isset($_POST['url']){
//INSERT IN TO DB
}
Following fiddle used to get its URL, http://jsfiddle.net/sameerast/FUUz9/1/
Hope this also helpful,
$('iframe').bind('mouseover', function(){
var iframeID = $(this).attr('src');
$(this).contents().find('html').unbind();
$(this).contents().find('html').bind('click', function(){
alert(iframeID);
});
})
;
I have a light box form (and have a page in the background). I want to close the light box and stay on that page after clicking on the submit button. But it's redirecting to another page (PHP database connection page) after clicking the submit button.
I want to know how to close light box and stay on that page.
Add an event listener to the form that handles the form request and then return false from that handler and the page won't refresh. Because we don't know which lightbox you are using we can't exactly tell you how to remove it... but if you're using jQuery you could use something like:
$("#lightbox-id").hide();
or
$("#lightbox-id").remove();
Use JavaScript to submit the form within the lightbox & close the lightbox.
function send_form ( )
{
ajax = new XMLHttpRequest;
if (!ajax) return false;
ajax.open('POST', '/index/send_form/'); //your post url should be here
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var field0= document.getElementById('submit').value;
var field1 = document.getElementById('message').value; //you should modify these fields according to your form
ajax.send('sub=' + submit + '&message=' + content);
//then post url becomes something like: www.example.com/index/send_form/?sub=submit&message=this
//then close the lightbox in here
}
and for the html part remove action attribute and call this function in onsubmit event.