I have a form which I want to submit and show in Colorbox.
The form is Mals Ecommerce View Cart.
See: https://www.mals-e.com/tpv.php?tp=4
I want it to Show the Cart contents in a colorbox iframe. Is this possible to do using the FORM method rather than the Link method?
here the best answer..
add this to your submitbutton : id="SearchButton"
then use this:
$(document).ready(function() {
$("input#SearchButton").colorbox({href: function(){
var url = $(this).parents('form').attr('action');
var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
return url+'?'+ser;
}, innerWidth:920, innerHeight:"86%", iframe:true});
});
test at: http://wwww.xaluan.com or http://wwww.xaluan.com/raovat/
I recently faced this problem, spent some time searching the solution and found this:
$("#submit_button").click(function () { // ATTACH CLICK EVENT TO MYBUTTON
$.post("/postback.php", // PERFORM AJAX POST
$("#info_form").serialize(), // WITH SERIALIZED DATA OF MYFORM
function(data){ // DATA NEXT SENT TO COLORBOX
$.colorbox({
html: data,
open: true,
iframe: false // NO FRAME, JUST DIV CONTAINER?
});
},
"html");
});
I.e. Colorbox uses submitting the form via standard jQuery methods. Hope this helps someone.
Try
$("input#formsubmit").colorbox({title: function(){
var url = $(this).parents('form').attr('action');
}});
Not tested, I just took the syntax from the Colorbox page. You'd have to give your submit button an id of "formsubmit" for the above to work.
you can open colorbox independently using:
jQuery.colorbox({href:,iframe:true, opacity:0.6 ,innerWidth:760,innerHeight:420,title:});
and you can call this function on any event like:
jQuery("document").ready(function(){ jQuery.colorbox.. });
when u submit a form send a query parameter along with it. When after submission you reach back the form. see if that parameter is populated.
and then call jQuery.colorbox()
Related
I'm a new user of laravel. I have problem in pass data to server in laravel 4.2. I didn't use a form submit, I use javascript to refer action of form such the code below:
$(document).ready(function(){
$(".delete_action").click(function(event){
$("#deletecategory").prop('href','/admin/category/'+ event.target.id +'/delete');
});
});
and my modal of delete like this:
×
Are you sure want to delete this category?
Yes
No
When i click Yes, it doesn't do anything. I hope to get some solution from you!
You can use http://api.jquery.com/jquery.ajax/ for this.
$('#yourOkButton').click(function(){$.ajax(...);});
In the documentation of $.ajax is everything written down.
You need to include an ajax call... to actually submit data...
Like so...
$(document).ready(function(){
$(".delete_action").click(function(event){
// incase the button is inside a form, this will prevent it from submitting
event.preventDefault();
// get your url
var url = '/admin/category/'+ event.target.id +'/delete';
// Create alert to confirm deletion
var conf = confirm("Are you sure you want to Delete this?");
if(conf){
// If they click yes
// submit via ajax
$.ajax({
url:url,
dataType:'json',
success:function(data){
//put anything you want to do here after success
// Probably remove the element from the page since you deleted it //So if the button is part of a parent div that needs to be removed.
}
});
}
});
});
You could also use $.get instead of $.ajax to shorten the code some more...
$.get(url, function(data){
//remove element after success
});
But I realize youre trying to pass the url to a modal window, and then submitting that modal window. So you need to attach the ajax call to the modal window button. Not like above, which is just opening an alert window. Its the easier way, but less fancy looking. If you really want a modal. You need to attach the above code to the modal confirm button. But the gist is the same.
I have a form and when the user clicks the submit button I want to run a separate PHP script before the form-action (going to the next page) gets executed.
Of course I can stop the form-action with evt.preventDefault(); and then I can fire my jquery $.post call but then I cannot 'resume' or undo this preventDefault call, as far as I can see.
So what is the best way to execute a script that process some information after a user clicks the submit button BUT before the user gets redirected to the next page defined in the form action tag?
(Of course I could just carry over the data and perform whatever I want on the next page – but in this case, I would like to keep it separate).
Thanks for any suggestions!
You can try something like this:
var posted = false;
$('form').on('submit', function(ev) {
if ( ! posted ) {
ev.preventDefault();
$.post(url).done(function() {
posted = true;
$('form').trigger('submit');
});
}
posted = false;
});
Or more succinct, using extra parameters:
$('form').on('submit', function(ev, posted) {
if ( ! posted ) {
ev.preventDefault();
$.post(url).done(function() {
$('form').trigger('submit', [true]);
});
}
});
Your $.post call can be run synchronously, so the form would not submit until you've got a response from the server.
You can submit the form programmatically, perhaps in your callback function.
prevent default on form, then run post, on success of post, target the form by id and use .submit();
$('#submit-button').click(function(e) {
e.preventDefault();
$.post({
url:'url',
success:function() {
$('#formid').submit()
}
});
});
Go head with your evt.preventDefault().
Make an $.ajax() call to run your php script.
In the $.ajax() success/failure callback, check the output of the php script you want to run, and accordingly make a $.post call (or not).
You can always hook the click event, and do your stuff.
When you are done you just do $(form).submit();
Working example
$("#submitbutton").click(function(e) {
e.preventDefault();
// do your ajax stuff here.. $.post().
$("#form").submit();
});
You can use just use the native submit function instead of jQuery's submit() which goes through the event handler again
$('form').submit(function(e){ // change form to your form id
e.preventDefault();
var el = this; // store this form in variable
$.post('/echo/html/',data,function(d){ // your post function
el.submit(); // trigger native submit function in success callback
});
});
FIDDLE
In your form tag, add onsubmit="myfunction()"
I have a div set up with a form inside and set to post using ajax and returning the results in the div like so
$(document).ready(function(){
$("#guestList").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
//$('form').attr('id', 'guestList1')
$.post('brides_Includes/guestlistDisplay1.php', $("#guestList").serialize(), function(data) {
$('#results').html(data)
$("form#guestList")[0].reset();
});
}
});
});
When the results come back it shows the correct changes and replaces the form. However when I post the form again. The relevent changes take place as they should but it then also refreshes the page and shows the posted info in the address bar
How can I post the form and replace it allowing it to post and call the script again without this happening?
the problem with returning forms using ajax is that any JavaScrip code already on the page will not see/take advantage of the new form. The best way to get around this is to pass the JavaScrip and the HTML back using ajax.
Basically you pass the below code back each time you pass a new form back. You'll need to update the IDs and links (brides_Includes/guestlistDisplay1.php). You will need to replace your code on the main page with this code as well because this is needed to execute any JavaScrip passed back.
<script type="text/javascript">
$(document).ready(function(){
$("#guestList").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
//$('form').attr('id', 'guestList1')
$.post('brides_Includes/guestlistDisplay1.php', $("#guestList").serialize(), function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
$("form#guestList")[0].reset();
});
}
});
});
</script>
I have a button that does not work in jquery. A button is passed from php to Jquery using json object. I have removed all other code just the button to test to try and solve this.
I create the same link and place it on my page in php. when the link is clicked a alert appears and works.
On the same page I have an additional button which is the same button, but this button has been returned from PHP via json to Jquery and
appended to the div. This link/button does not work? why is this? both appear the same!
Hope someone can advise as to what is happening here
Thanks
button returned from PHP
//Jquery basic test button for functionality (works if link button is already on HTML page)
$("[href='#test']").click(function() {
alert("has been clicked");
});
//JQuery extract of my code
var content;
$.each(data, function(i, item) {
content += item;
});
$(content).appendTo('#theframe');
},'json');
have also tried
$.each(data, function(i, item) {
content += item;
});
$('#theframe').html(content);
},'json');
//php returned
$json[] = 'View Post';
echo json_encode($json);
//php button on page
View Post
Thanks
SOLVED with help from all posts, thank you! #Anthony's example added the frame
$('#theframe').on('click', '[href="#test"]', function(e) {
alert('has been clicked');
});
You will need to use the jQuery on() or delegate() functions to add the click event to new page elements that are added dynamically (after the page is loaded).
If you are using jQuery 1.7 and greater you should use on(): http://api.jquery.com/on/
If you are using an older version of jQuery use delegate: http://api.jquery.com/delegate/
The .click() function only adds the event handler to elements that exist when the code is run, so won't affect any elements that are added dynamically later on. The easiest solution to get around this is to set up event delegation, using either the .on() (jQuery 1.7+) or .delegate() (prior to 1.7) functions. The .on() example would look like this:
$('body').on('click', '[href="#test"]', function(e) {
alert('has been clicked');
});
the reason it does not work is that your document ready function only fires once. This means that after your second button loads via ajax, there is no event handler attached to it.
Try using "on" or "live":
$("body").on("click", a[href="#target"], function(event){
alert("has been clicked");
});
http://api.jquery.com/on/ <- Docs for "on"
http://api.jquery.com/ <- Your new favorite website!
Hope this helps!
I am designing webpage using jquery and php. My page has side menu, and clicking one of the option it send a request to server to read some information from file and it will create a form out of it, with submit and other button edit(in case anybody wants to change the information in that form) and send this html back to client. I am able to do this successfully. But when I click on the edit button it actually not calling the click handler I registered for the all the buttons.
$('button').click(function(){
alert("click event");
});
I included this in the
jQuery(document).ready(function() {
But because all the jquery/js code in ready() and it gets executed at the page load time, its not able to find these buttons in form because its something which i get from server after loading and replacing it to existing 'div' and hence its not able to invoke the event handler. If I define click handler for the parent div of this form, it receives the click event if I click 'edit' button because that 'div' was present when initial page got loaded. I might not be doing it correctly, may be getting the whole form from server is not a good idea, if you have to do some operation on the form at client side. But is it doable? if yes then whats the possible way out?. Thanks!
Your event isn't firing because you define it prior to the element existing on the page. Using the .on() method should fix this. Something along the lines of:
$('body').on('click','button', function(){
alert("click event");
});
should work.
If I understand you correctly you adding the buttons dynamic to the form. You should try to use jQuery.on() insteed, see http://api.jquery.com/on/
And in your example this might work for you
$("body").on("button","click", function(event){
alert("Hello world");
});
Use on (jQuery 1.7 and up). Previously was delegate (1.4.2+), before that live...
$('*your_form*').on('click', 'button', function(){
alert("click event");
});
You may simply need to use this instead:
$(document).on('click','button',function(){
alert("click event");
});
(jQuery 1.7 or higher)
you have to call using button id
$('#buttonid').click(function(){
alert("click event");
});
or button class
$('.buttonclassname').click(function(){
alert("click event");
});