I have en dialog box where there is an CKEditor inside. But i can't get it to fire the HTTPPost on the partialView.
<form method="post" action="#Url.Action("Description")">
#Html.CKEditor("text", (string)ViewBag.BodyText, "toolbar:'Full'", new { cols = 2000, rows = 5000 })
<p>
<input type="submit" value="#Resources.Resources.ProjectCreateDescriptionSave" onclick="#Html.CKEditorSubmitButtonUpdateFunction();" class="close"/>
</p>
</form>
It requires the class="close" but if it's in the input it closes but dosen't fire the httppost. But if i remove the class="close" it works prefect. IS there an way to combine them?
I think you have a mistake in your click event.
onclick="#Html.CKEditorSubmitButtonUpdateFunction();"
Should read
onclick="CKEditorSubmitButtonUpdateFunction();"
Where CKEditorSubmitButtonUpdateFunction() is the name of your javascript function. There is no need for the appended #Html section.
Edit: and really you shouldnt need an onclick event there? Your form handles the post event action="#Url.Action("Description")"
Related
I have a web application based on bootstrap (so, using jquery), and I'm trying to convert a classic html form-based search form to an ajax search form (to avoid page reload).
In the classic form-based, the button sends the html form as post, and the action page returns a table of results below the same form.
something like:
<form action="/search" method="post">
<input type="text" name="searchterms">
<button type="button" onclick="submit();">Search!</button>
</form>
In the ajax version, there is no form, but just a text field and the button calls a dosearch() function which makes an ajax request to a back end script which return search results, which are then used in a target DIV, showing a table of results, below the search input+button.
<input type="text" name="searchterms">
<button type="button" onclick="dosearch();">Search!</button>
Both work fine, but the second way avoid the browser to "collect" previously used search terms - I guess because there's no "submit".
My users like this "previous search terms" suggestion, and I would like to add it back, if possible, in the search "ajax" form.
I also tried to create an html form anyway, which encloses the input and the button, adding this event to its tag:
onSubmit='dosearch();return false;'
(if I don't return false, the form is submitted and action page loaded), like:
<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms">
<button type="button" onclick="dosearch();">Search!</button>
</form>
but even this seems not to work: new search terms are not "remembered" and suggested typing in the field...
I thought maybe my dosearch() function could add (most recent) search terms into a session/cookie but then I would need to read those stored values and create, each time, a sort of "dropdown" list for the input field, just as browsers usually do automatically... it should be not complicated but probably overkill...
Is there any way to make browsers "remember" inserted values even without submit? If not, what workaround is best/easiest?
edit: I've just found this
input remembered without using a form
but maybe after 5 years something changed?
I just tried to change the "button" type, to a "submit", and in this way it seems to work... page is not reloaded, ajax fills the results div and my new terms are remembered...
like:
<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms">
<button type="submit" >Search!</button>
</form>
it seems that if the "submit" is triggered through a "submit" button (even if it return false) the browsers stores input field values...
you need to do with ajax
<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms" id="searchTerm">
<button type="button" onclick="dosearch();">Search!</button>
<script type="text/javascript">
function dosearch(){
val = $("#searchTerm").val();
$.ajax({
url: "LoadProduct.php?val ="+val,
type: "GET",
processData: false,
contentType: false,
}).done(function(respond){
$("#LoadProductTd"+no).html(respond);
$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});
});
}
</script>
so you can create LoadProduct.php file and in file you will get your search term n $_GET['val']
so you can use this for your query
My page in working perfectly with postback. My problem is that it's kind of anoying every ingredients or subtitles that people submit, it reloads the entire page. So, I though that it could be a good way to learn a little bit of ajax... I've read a lot of article, and I got confused. Some people are using Ajax.Beginform and others are using the $.ajax from jQuery inside an event of jQuery (submit for example). I've read that the second approach is better but I don't know if it's possible with the way my form is done.
Here is the important part of my View. To summarize, I have a list of subtitle, and each of the subtitle can contain a list of ingredients. One of the form can submit ingredients, and the other can submit subtitle. The first one can appear multiple time (in each of the subtitle).
<div id="Ingredients">
<h2>Ingrédients</h2>
#foreach (RecettesMaison.Models.Subtitle sub in Model.Subtitles)
{
<h4>#Html.DisplayFor(modelItem => sub.Name)</h4>
<ul id="ing#nSubtitle">
#foreach (RecettesMaison.Models.Ingredient ing in sub.Ingredients)
{
<li>#Html.DisplayFor(modelItem => ing.QuantityAndName)</li>
}
</ul>
using (Html.BeginForm("AddIngredient", "Recipe", new { subname = sub.Name }, FormMethod.Post))
{
#Html.HiddenFor(model => model.IDRecipe)
<a name="IngredientSection" ></a>
<input class="field required span6 text-box single-line" id="nameingredient" name="nameingredient" />
<input type="submit" class="btn btn-success" value="Ajouter un ingrédient" />
}
nSubtitle++;
}
#using (Html.BeginForm("AddSubtitle", "Recipe", FormMethod.Post))
{
#Html.HiddenFor(model => model.IDRecipe)
<a name="SubtitleSection" ></a>
<input class="field required span6 text-box single-line" name="Name" />
<input type="submit" class="btn btn-success" value="Ajouter une catégorie d'ingrédient" />
}
</div>
My first approach was that if a submit is successful, I would "refresh" the two foreach with the new data. But the approach I've seen on must tutorial is to use a partial view and refresh only the partial view inside of a div. But in my case, my Html.BeginForm would be inside the partial view so I don't think it would work. I also think about just appending html at the end of my list but it will only work of the ingredient. So the best way would be to refresh both for each
So, my general question
How can I do that? :)
Thanks!
Ajax.BeginForm vs .ajax()
Both accomplish the same thing. Ajax.BeginForm will hide the javascript details so .ajax() will probably give you a better foundation in understanding the pattern especially if you ever need to work outside of MS technologies.
AJAX with Partial Views
It's entirely possible and there are many examples on the web even here on SO. The general idea is you're just replacing a div with partial view content retrieved via AJAX.
If the div is static, then your jquery selectors are quite simple.
If the div is dynamically generated, then you'll need to do some DOM traversing to find the target div.
Without seeing your attempts it is hard to give you specific help. I suggest you start with a simple example with a single partial view and form and update it using AJAX. Then you can move to a more complex situation with multiple forms once you understand the mechanics.
I am having an issue where when a page is loaded via Ajax, I don't have a value in my search input. Here is my HTML:
<form id="searchForm" action="javascript:;" method="post">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
<input type="submit" data-mini="true" value="Search" />
</div>
</form>
The reason we have an input button is because of a request from the client as they found people having scenarios where they would click "Done" on the IOS keyboard rather than "Search" which wouldn't submit the form. here is my Javascript that handles the submit:
$(document).on('submit', '#searchForm', function () {
var text = $("#search-mini").val();
text = encodeURIComponent(text);
window.location.href = "/Mobile/Browse/Text?text=" + text;
return true;
});
This all runs fine if I refresh the page so the content is not loaded via AJAX. It only fails when linking between pages and they are loaded by AJAX. Alerting out "text" has a blank value in this scenario.
I have read about using JQM initialization events such as 'PageInit' instead of DOM ready() I just need an example implementing this with my code if this is the correct approach?
Regards,
Danny
I am trying to implement something like this.
http://app.maqetta.org/mixloginstatic/LoginWindow.html
I want the login page to load but if you click the signup button then an ajax will replace the login form with the signup form.
I have got this to work using this code
dojo.xhrGet({
// The URL of the request
url: "'.$url.'",
// The success callback with result from server
load: function(newContent) {
dojo.byId("'.$contentNode.'").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});'
the only problem is the new form just loads up as a normal form, not a dojo form. I have tried to return some script with the phaser but it doesnt do anything.
<div id="loginBox"><div class="instructionBox">Please enter your details below and click <a><strong>signup</strong>
</a> to have an activation email sent to you.</div>
<form enctype="application/x-www-form-urlencoded" class="site-form login-form" action="/user/signup" method="post"><div>
<dt id="emailaddress-label"><label for="emailaddress" class="required">Email address</label></dt>
<dd>
<input 0="Errors" id="emailaddress" name="emailaddress" value="" type="text"></dd>
<dt id="password-label"><label for="password" class="required">Password</label></dt>
<dd>
<input 0="Errors" id="password" name="password" value="" type="password"></dd>
<dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha Code</label></dt>
<dd id="captcha-element">
<img width="200" height="50" alt="" src="/captcha/d7849e6f0b95cad032db35e1a853c8f6.png">
<input type="hidden" name="captcha[id]" value="d7849e6f0b95cad032db35e1a853c8f6" id="captcha-id">
<input type="text" name="captcha[input]" id="captcha-input" value="">
<p class="description">Enter the characters shown into the field.</p></dd>
<dt id="submitButton-label"> </dt><dd id="submitButton-element">
<input id="submitButton" name="submitButton" value="Signup" type="submit"></dd>
<dt id="cancelButton-label"> </dt><dd id="cancelButton-element">
<button name="cancelButton" id="cancelButton" type="button">Cancel</button></dd>
</div></form>
<script type="text/javascript">
$(document).ready(function() {
var widget = dijit.byId("signup");
if (widget) {
widget.destroyRecursive(true);
}
dojo.parser.instantiate([dojo.byId("loginBox")]);
dojo.parser.parse(dojo.byId("loginBox"));
});
</script></div>
any advice on how i can get this to load as a dojo form. by the way i am using Zend_Dojo_Form, if i run the code directly then everything works find but through ajax it doesnt work. thanks.
update
I have discovered that if I load the form in my action and run the __toString() on it it works when i load the form from ajax. It must do preparation in __toString()
Firstly; You need to run the dojo parser on html, for it to accept the data-dojo-type (fka dojoType) attributes, like so:
dojo.parser.parse( dojo.byId("'.$contentNode.'") )
This will of course only instantiate dijits where the dojo type is set to something, for instance (for html5 1.7+ syntax) <form data-dojo-type="dijit.form.Form" action="index.php"> ... <button type="submit" data-dojo-type="dijit.form.Button">Send</button> ... </form>.
So you need to change the ajax contents which is set to innerHTML, so that the parser reckognizes the form of the type dijit.form.Form. That said, I urge people into using a complete set of dijit.form.* Elements as input fields.
In regards to:
$(document).ready(function() {});
This function will never get called. The document, youre adding innerHTML to, was ready perhaps a long time a go.
About Zend in this issue:
Youre most likely rendering the above output form from a Zend_ Dojo type form. If the renderer is set as programmatic, you will see above html a script containing a registry for ID=>dojoType mappings. The behavior when inserting <script> as an innerHTML attribute value, the script is not run under most circumstances (!).
You should try something similar to this pseudo for your form controller:
if request is ajax dojoHelper set layout declarative
else dojoHelper set layout programmatic
Hi there I have an error when I submit the following form:
<div id="tabs">
<ul>
<li>Project Details</li>
<li>Project Attachments</li>
<li><a href="#Url.Action("Members", "ProjectNetwork", new { IsTab = true })">Project
Network</a></li>
<li>Bulleting Board</li>
<li>Bids Received</li>
</ul>
</div>
<div id="LowerButton">
#Html.Hidden("MainStatus", #Model.Status)
#using (#Html.BeginForm("Dashboard", "Dashboard"))
{
<button type="button" id="MakeComment">
Make a Comment
</button>
<input type="submit" id="GoDashBoard" value="Return to Project List" />
}
</div>
When I press the button "GoDashBoard", The method "Dashboard" in the controller "Dashboard" is not reached. Instead the following error appears:
It tells me that a model property is beign sent to the server. However, there are no model properties inside the dashboard form.. unless I'm sending many forms at the same time. But I dont think thats possible right? Do you guys have any idea of why is trying to set a model property when I'm not actually sending any?
Update:
this is the input of the dashboard action:
public ActionResult Dashboard(int page = 1)
{
var user = (User)Session["User"];
if (user != null)
{...
}}
the input is a default integer. However, I saw the trace of the calls and its submiting another form which is not related to the one im using:
That form is inside of one of the ajax tabs. I dont understand how one form submits another form and they are not nested. Anyone knows a good workaround? because im thinking of receiving both forms in both actions and make some validations.
I solved it by removing the form "Dashboard" and instead adding an invisible link. The button would reference the invisible link:
#*#using (#Html.BeginForm("Dashboard", "Dashboard"))
{ *#
<button type="button" id="MakeComment">
Make a Comment
</button>
<button name="button" type="button" onclick="document.location.href=$('#GoDashBoard').attr('href')">Return to Project List</button>
<a id="GoDashBoard" href="#Url.Action("Dashboard", "Dashboard")" style="display:none;"></a>
#*<input type="submit" id="GoDashBoard" value="Return to Project List" />*#
#* }*#