I want to load a form when a user clicks a button. My current solution works by pulling a pre-created form using .get() . My problem is that if the user types the url directly to where the form is located, they can see the form in raw html with no css. Is there a better way to dynamically pull a form or even maybe a way I can restrict a user from seeing the form if they directly type the url where the form is being pulled from. My current solution looks something like this:
$('#upload-photo').click(function (e) {
e.preventDefault();
/// load the contact form using ajax
$.get("http://pms.dev:8000/uploadphotoform", function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modalCloseImg'>x</a>",
position: ["20%",null],
minHeight: '700px',
minWidth: '600px',
fixed: false,
});
});
});
I'm using larval 5 and SimpleModal js plugin for pulling the form.
You could check if the request is an ajax request before returning the form:
Route::get('/uploadphotoform', function(){
if(!Request::ajax()){
abort(404);
}
return view('form');
});
If this doesn't work, make use you added a use Request; at the top of the file to use the Request facade.
But why would you like to load the form from an ajax request?
Related
How can i use the CCaptcha not using models (rules) and ActiveForms?
Just create and check. e.g. through AJAX
I recommend using Yii models for forms even if you're making modal ajax forms.
You simply need to bind the onsubmit method to make ajax call with the form data instead of reloading the whole page.
I can show you this example of Ajax form on this page:
http://www.eldeposit.com/agencia/1552/oi-real-estate
Uses Yii and has captcha.
In this case it is not a modal but it is a Ajax form with captcha.
jQuery('#contactar_submit_btn').click(function(){
var submit_label = jQuery('#contactar_submit_btn').attr('value');
jQuery('#contactar').ajaxSubmit(
{'dataType': 'json', 'success': function(data) {
jQuery('#contactar_submit_btn').attr('disabled', false);
jQuery('#contactar_submit_btn').attr('value', submit_label);
var timestamp = Number(new Date());
var csrc = jQuery('#contactarCCaptcha').attr('src');
jQuery('.captcha_image').attr('src',csrc+'?t='+timestamp);
if (data.error.length > 0)
alert(data.error);
else {
jQuery('#contactar_target').html(data.success);
jQuery('#contactar').resetForm();
jQuery('#contactar_target').show();
}
},
'beforeSubmit': function() {
jQuery('#contactar_target').hide();
jQuery('#contactar_submit_btn').attr('value','enviando..');
jQuery('#contactar_submit_btn').attr('disabled', true);
}});
});
The "trick" in making the captcha work properly is to make a refresh on the image with a random parameter in the original url. This is required because if we keep the same image but send the ajax request, the captcha will not match if user clicks submit multiple times.
Another way around would that I often use is to:
1. Create full Yii form inside a controller that I load by ajax and show in a modal with a ID
2. When clicking submit, you make ajax call to the same controller and totally replace modal ID content with ajax response
Hope it helps you someway!
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'm trying to figure out a way to load 1 single tab(tabs by jQuery) without reloading all the others.
The issue is that I have a submit button and a dropdown that will create a new form, and when on this new form 'OK' or 'CANCEL' is clicked, it has to get the original form back.
The code to load a part of the page that I found is this:
$("#tab-X").load("manageTab.php #tab-X");
But now I would like to know how to use this in combination with the $_POST variable and the submit-button
Clarification:
I have a .php(manageTab.php) which contains the several tabs and their contents
I have in each of these tabs a dropdown containing database-stored information(code for these dropdowns is stored in other pages)
for each of these dropdowns, there exists a submit button to get aditional information out of the DB based on the selection, and put these informations in a new form for editing
this new form would ideally be able to be submitted without reloading everything except the owning tab.
Greetings
<script>
$(document).ready(function() {
$("#form1").submit(function(){
event.preventDefault();
$.post('data.php',{data : 'dummy text'},function(result){
$("#tab-X").html(result);
});
});
});
</script>
<form id="form1">
<input id="btn" type="submit">
</form>
I am not totally understand your question, but as per my understanding you can't load one tab with form submit. Its normally load whole page.
What you can do is, use ajax form submit and load the html content as per the given sample code.
$.ajax({
url: url, // action url
type:'POST', // method
data: {data:data}, // data you need to post
success: function(data) {
$("#tab_content_area").html(data); // load the response data
}
});
You can pass the html content from the php function (just need to echo the content).
AJAX is what you are looking for.
jQuery Ajax POST example with PHP
Also find more examples about ajax on google.
Example: Let me assume you have a select menu to be loaded in the tab.
You will need to send a request to your .php file using jquery, and your php file should echo your select menu.
In your jQuery,
<script>
$.post(url, { variable1:variable1, variable2:variable2 }, function(data){
$("#tab-X").html(data);
//data is whatever php file returned.
});
});
$("#form_id").submit(function(){
return false;
});
</script>
I mean whatever your options are, you will need to do the following in your .php file,
Echo that html code in your PHP script.
echo "<select name='".$selector."'>
<option value='".$option1."'>Option1</option>
<option value='".$option2."'>Option2</option>
<option value='".$option3."'>Option3</option>
</select>";
This would be returned to jQuery, which you may then append wherever you want.
I want to load a json file after a user clicks on a button, not sure how to do that.
If I load the file directly it will load using the following.
<script src="data.json" type="text/javascript"></script>
But I want the user to click a button before it loads instead of loading when the page is accessed.
Thanks
Simple: use AJAX. It will load anything you want via Javascript which you can assign timings to. In this example we attach a click event to #myButton and when the event fires, we run a getJSON() call to the URL and handle the data accordingly.
HTML
<button id="myButton">Button</button>
Javascript (jQuery in my example)
$("#myButton").on('click', function() {
$.getJSON("data.json", function(data) {
//Handle my response
alert(data);
});
});
If you want an example not using jQuery then Google "Javascript AJAX".
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()