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();
});
});
Related
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.)
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 have a user control (ascx) inside a page (aspx). The ascx has JQGrid placed. I have a button in the page. On click of button I show AJAX modal popup.
The problem is: On click of button, document.ready in ascx is also getting called which in turn loads the JQGrid. I would like to avoid this.
To summarize, I do not want to reload JQGrid inside the ascx when post back happens from hosting page.
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.
I am trying to use Jquery Mobile's dialog. On the documetnation, it says that diaglog would be closed if a user clicks any links on a dialog page.
Documentation:
"When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open. This pattern of linking to the previous page is also usable in non-JS devices as well."
How do I prevent it?
Don't use an <a> tag, use a <div>
<div id="my_button" data-role="button" data-theme="a">Don't Close</div>
Then you just have to programmatically attach some actions to the clicking of that div
$('#my_button').live('click', function({
// do something
}
If you add a function to onclick, that will override the default behavior. Just leave href="#" in the tag, put the function like onclick="myFunction()" and you should be good.
Then in the function you can do the close with this: $('.ui-dialog').dialog('close')
Or you can obviously navigate to another page with: $.mobile.changePage('#page')
I'm sure you've moved on by now, but hopefully this can help someone else looking for this solution.
wom's solution is good, but you don't need to change from tag to . You just need to change href like href="#" as Mar said. I have test like this, it works fine.
And if still can't prevent default action, add e.preventDefault() on button's click handler.