I have a CJuiDialog and below is the code
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mymodal',
'options'=>array(
'title'=>'Your 10 seconds take you into ....',
'width'=>700,
'height'=>400,
'autoOpen'=>true,
'resizable'=>false,
'modal'=>true,
'closeOnEscape' => false,
),
)); ?>
In this dialog I have form and in the form I have below submit button
<?php echo CHtml::submitButton('Submit', array('onclick'=>'js:function(){ alert("test"); $(#mymodal).dialog("close");}',
)); ?>
on clicking on this button, I want to close this dialog and submit the form . But the above code what I wrote in Button is not working . any syntax errors ?
Other way I tried is , I used buttons in the dialog box and able to close the dialog using
`js:function(){$(this).dialog("close")`
But I am not able to submit the form there . So took the first approach .
Could any one help me the correct solution ?
Thanks and Regards
Kiran
First of all you have to understand/remember that by default a html submit button navigates to or loads the action url of the form. So, provided your action url is correctly specified, the default button will simply submit the form and navigate to that url.
If this happens and the action url and the current page url are not the same, you'll not be seeing the dialog box again anyway(due to the navigation).
But incase your action url and current url are the same*, then obviously after default submission the same url will be loaded again, and since your dialog is 'autoOpen'=>true, it will open again.
So the best course of action i can see for you is using jquery's ajax to submit your form. This can be done in 3 ways:
Use ajaxSubmitButton() directly in the form:
echo CHtml::ajaxSubmitButton('SubmitThis',
$url, // form's action url, you can use createUrl
array( // ajaxOptions, use success to close the dialog
'success'=>'function(){$("#mymodal").dialog("close");}'
)
);
Use a button of the dialog to submit the form. The sample below uses $.post() shorthand to post an ajax request, and .serialize() to serialize the form data:
// other cjuidialog options
// ...
'buttons'=>array(
'Submit'=>'js:function(){
$.post(
$("#form-id").attr("action"), // the url to submit to
$("#form-id").serialize(), // the data is serialized
function(){$("#mymodal").dialog("close");} // in the success the dialog is closed
);
}',
// other buttons
)
You can also use the normal submit button but you'll have to use ajax again:
'onclick'=>'$.post(
$("#form-id").attr("action"), // the url to submit to
$("#form-id").serialize(), // the data is serialized
function(){$("#mymodal").dialog("close");}
);
return false; // to prevent the navigation to the action url
'
[*] if you are using CActiveForm and haven't specified the 'action' this happens by default
Firstly, don't put js: in your onclick value. The right prefix is javascript: and it is unneeded in on* whose values are always scripts, by default in Javascript.
Secondly, you defined an anonymous JS function that is never called.
Then learn to use a JS console to see the errors, and a JS debugger to run your code step by step. In Firefox, you can use the firebug extension. In Chrome or Opera, press Ctrl-Shift-I to open the developer block that contains the JS tools. Then it will be easy to fix your JS code that is currently:
function(){
alert("test");
$(#mymodal).dialog("close");
}
See the errors? There should be no function as noted above, and you forgot to quote a text.
Related
I'm trying to console.log something whenever a submit button is pressed
But whenever the page is loaded ( or reloaded ) the data gets logged in console without even clicking on submit button
I've tried to remove onsubmit from form and put an onclick on my input but same result happened ( one quick note that I can get the 'Data' in console also with clicking, my problem is that I want it to log ONLY when the button is clicked or submitted )
This is my pug
html
head
title Welcome to Test
body
form(
onsubmit=console.log('Data')
)
input(
name='email'
type = 'email'
)
input(
type='submit'
)
// I've also tried putting button instead of input
And I have another question to ask, since I'm super new to Pug I don't really know where to search for examples or stuff like that, If possible I'd appreciate a source for pug examples ( not the pug site itself ), thanks.
APP.js Snapshot
contact.jade snapshot
Snapshot of Page on Chrome
When I click on Submit button nothing happens control stays on same page.
I am realy stuck at this point, any help will be apprecaited.
Thank you
You need to ensure your button is inside the form tag by indenting it.
form
button
This translates to the HTML
<form>
<button></button>
</form>
which allows the button to know which form it should submit.
As your code stands now it is
<form></form>
<button></button>
For which the button does not have a parent form.
(You similarly need to this for your input's... otherwise they won't be sent to the endpoint.)
my simple view file
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
?>
<?php ActiveForm::begin()?>
<?=Html::submitButton('something')?>
<?php ActiveForm::end()?
Clicked the button. After I reload the page and browser shows me
this
So how can I remove this?
This problem happen when you submit data in a form and then refresh the page
Browsers should stop this, or at least prompt if you want to resend the data,
but the best way to prevent this from happening is submit the data .. and manage the submit properly.
In you case your submit repeat the index action because you don't manage proper the action code
(all you're being made does not produce the creation of a new model to be complete so as not prroduce displaying a result.
or any other action ..
your code continues to call the same action that produces post calling for action and so on)
try adding a simple die() or a render for another view
public function actionIndex()
{
if (Yii::$app->request->post('submit')==='my_value') {
echo "Button my_value Clicked";
die(); // or render a proper view
}
return $this->render('index');
}
This is basic browser behavior. Your form is doing a POST request and obviously when you try to refresh it will ask for this. Even if you write a basic html page without yii, you will still have this.
I'm new to chrome extension development but I'm running into issues debugging and with the extension itself. I currently have a form with a submit button and after the user hits submit I change the html to show the data that was just submitted.
document.addEventListener('DOMContentLoaded', function() {
console.log("1");
document.getElementById("submitButton").addEventListener('click', myFunction);
console.log("2");
//getCurrentTabUrl(function(url) {
// renderStatus(url);
//});
});
function myFunction() {
document.getElementById("formOutput").innerHTML = document.getElementById("formInput").value;
alert("hi");
console.log("test");
);
}
In this, 1 and 2 are displayed to the extension debugging console and the alert runs as well when the button is clicked. The test shows up very briefly and then it disappears.The formoutput value changes very briefly as well and then changes back to the default value I have. Does anyone know why my code/the chrome extension would be doing this?
Thanks!
When button with type submit (This is the default if the attribute is not specified) is clicked, the form data will be sent to server and page will be redirected to new page. Then your content script will be injected again, that's why the it changes back to default value.
To avoid this, you could change button with other types, or calling e.preventDefault to prevent default behavior. Then you would want to use Ajax to send data to server, which ensure the whole page won't be redirected and only parts of UI can be updated.
I'm using drupal 6 form, and ahah for ajax form submit. On form submit I perform some validation and allows user to choose options that display on jqModal popup.
JS script that I'm using for jqm popup is:
$(document).ready(function() {
$("#dialog").jqm();
});
and uses tag to open the jqm popup
Choose option
<div class="jqmWindow" id="dialog">
<h2 id="modalHeading">Select one</h2>
x
<form> form values</form>
</div>
Instead of opening popup window, it changes the url by adding # at the end.
Same code is working fine on the other page of my website.
jqModal.js file is included to the page on pageload.
The default trigger is any element with a class of "jqModal", so your anchor element (Choose option) is correct and ought to show the modal when clicked.
Is anything showing up in the javascript console of the page?
Perhaps there's another javascript function that's preventing the click event from bubbling? The .click() events are assigned in a FILO (first-in, last-out) manner, so if another click event return false, the jqModal assigned event may never get called.
You can also be explicit and try;
$(document).ready(function() {
$("#dialog").jqm({trigger: false});
$("a.jqModal").click(function(){
$("#dialog").jqmShow();
});
});