I want to transform a div composed of image + text (for translation) in a submit button. Is it possible?
I managed to use the image as submit but the text is not a link and it gives a 'broken' feeling to the whole image + text
<div onclick="document.myform.submit()"></div>
Jquery usage.
$('div').click(function () {
$('form').submit();
});
You can do it in two ways.
You can use a button with type submit and use CSS to style it as a div
Add an onClick on the div, and submit the form on the click event.
For method 2 you can either do it through jQuery or without, With plain js
<script>
function submitOnClick(formName){
document.forms[formName].submit();
}
</script>
<form id="myForm" ...>
....
<div onclick="submitOnClick('myForm')>
...
</div>
...
</form>
Trevor's answer shows how to do it with jQuery.
In his example just replace the 'div' and 'form' with the ids of your div and form as this:
If ids of div and form are myDiv and myForm specify them as '#myDiv' and '#myForm', here # is used to specify the following string is an id of an element.
Related
I am trying to bind jquery mobile horizantal radio buttons using knock out teplate binding.
The fielsset in template looks like
<fieldset data-role="controlgroup" data-bind="attr: {id:QuestionID+'_fld'},template: {name:'optionTemplate', foreach: OptionList}">
</fieldset>
and the option template looks like
<script type="text/x-jquery-tmpl" id="optionTemplate">
<input type="radio" data-bind="attr: { id:OptionID+'_radio',value:OptionID, name: QuestionID+'_rd'}, checked:$parent.OptionId" />
<label data-bind="text:OptionText, attr: {id:OptionID+'_optn', for : QuestionID+'_rd' }"> </lable>
</script>
I have tried
$('input[type=radio]').checkboxradio().trigger('create');
$('fieldset').controlgroup().trigger('create');
Here my problem is that the mobile css is not applying to the fiedset.
You must do this after the template has built your page or during the page initialization event, something like this:
$(document).on('pagebeforeshow', '#pageID', function(){
});
Page content can be enhanced ONLY when content is safely loaded into the DOM.
Second this do NOT mix refresh functions with trigger create. Either one or the other. Trigger create is used to enhance whole content, and it should NOT be used on single elements. No point in restyling whole page every time you add new content.
Basically you only want to use:
$('input[type=radio]').checkboxradio().checkboxradio('refresh');
or if first line throws an error:
$('input[type=radio]').checkboxradio();
and:
$('fieldset').controlgroup();
But I would advise you to only use this line after everything has been appended:
$('#contentID').trigger('create');
where #contentID is an id of your div data-role="content" object. Or in case you are not using content div, only data-role="page" div then use this:
$('#pageID').trigger('pagecreate');
where #pageID is an id of your page.
To find out more about marku enhancement of dynamically added content take a look at this answer.
I know the first part of a URL, but need to define the last part uniquely based on what the client enters in a div. For example:
<!-- specify page name in the div -->
<div id="client-entry">page-name</div>
<div id="load-url">url loads here</div>
<!-- load what is specified at the end of the url -->
<script>
$("#load-url").load("known-folder/"#client-entry.text()".html");
</script>
Any help would be appreciated.
Idea 1:
Give an attribute to div of your choice (Say for example ajaxify)
<div id="client-entry" ajaxify="unique link here">
then using jQuery you can get the value as
$('#client-entry').attr('ajaxify');
and then load the next div with whatever attribute value the client-entry div has has.
Idea 2:
You may use an input in the client-entry div as
then using jQuery get the value of input as
var toLoad = $('client-input').val( );
Use this value in your load code.
$("#load-url").load("known-folder/"+toLoad+".html");
I am trying to display a button using jQuery template. The code is as below:
<script id="EmailContainerTemplate" type="text/html">
<div>${EMailAddress}</div>
</script>
The target div is defined as:
<div id="EmailContainer" class="center-wrapper"> </div>
And the template binding code:
$("#EmailContainer").append($("#EmailContainerTemplate").tmpl(contact));
But it is displaying as hyperlink. Any ideas?
Trigger create event on your new markup
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
Refer to Enhancing New markup Section
I have a form inside an iframe which is inside a jQuery UI dialog box. The form contains a file input type. The jQuery UI dialog contains an Upload button. When this button is clicked, I would like to programmatically call the submit method. My question is how I could select the form which is in a iframe using jQuery. The following code should clarify the picture:
<div id="upload_file_picker_dlg" title="Upload file">
<iframe id="upload_file_iframe" src="/frame_src_url" frameborder=0 width=100% scrolling=no></iframe>
</div>
frame_src_url contains:
<form action="/UploadTaxTable" enctype="multipart/form-data" method="post" id="upload-form">
<p>Select a file to be uploaded:</p>
<p>
<input type="file" name="datafile" size="60">
</p>
The jQueryUI dialog box javascript code:
$('#upload_file_picker_dlg').dialog({
...
buttons: {
'Close': function() {
$(this).dialog('close');
},
'Upload': function() {
$('#upload-form').submit(); //question is related to this line
$(this).dialog('close');
}
},
....
});
From the javascript code snippet above, how can I select the form with id upload-form that is in the iframe whose id is upload_file_iframe ?
Accessing an element inside an iframe is tricky.
You should use the following syntax:
$('#iframeID').contents().find('#upload-form').submit();
where 'iframeID' is obviously an ID you've given to the iframe.
Hope it is correct!
The answer is:
$('#upload_file_iframe').contents().find('#upload-form').submit();
which I learned from http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
Off the top of my head I'd say you might have to add the logic to the file where the iframe source is from.
I'm trying to auto-save a selection in a dropdown (ASP.NET, MVC, VB), but it's not behaving as expected. Here's the dummy action in the controller:
<AcceptVerbs(HttpVerbs.Post)> _
Function TestAction(ByVal id As Integer) As ActionResult
Return Content(id)
End Function
and the HTML:
<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>'></script>
<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>'></script>
<% Using Ajax.BeginForm("TestAction", New AjaxOptions With {.UpdateTargetId = "test"})%>
<%=Html.Hidden("id", 123)%>
<%=Html.DropDownList("actions", Nothing, New With {.onchange = "this.form.submit();"})%>
<input type="submit" value="Submit" />
<span id="test"></span>
<% End Using%>
The Submit button works as expected - the span is populated with "123". The dropdown on the other hand opens a new page with nothing but "123" on it. Why "this.form.submit()" not doing the same thing as the Submit button? Is there a different call I should make to emulate the Submit button?
this.form.submit does not run the form.onsubmit event. Pressing the submit button, on the other hand, does. That, combined with the HTML that Ajax.BeginForm generates, explains why the two behave differently. As for how to make your event do the same thing as pressing the submit button, look at the HTML in the linked article:
Sys.Mvc.AsyncForm.handleSubmit(
this,
new Sys.UI.DomEvent(event),
{
insertionMode: Sys.Mvc.InsertionMode.replace,
updateTargetId: 'test'
});
I know this is old, but there is a new (and better) way to do this.
Instead of doing using javascript, use jQuery. Just had this issue and it worked great.
this.form.submit() <---- Javascript
$("form").submit() <---- jQuery