Load dynamic list of elements AFTER FINISHED loading of several form elements - asp.net

I have...
a dynamic populated select box
several input boxes
a submit button
form fields are loaded initially using cookies
several dynamic populated divs
I want...
start loading the content of my DIVs after all FORM elements have been loaded completely (= filled with data, select boxes are populated)
Sample code:
<script type="text/javascript">
$(document).ready(function() {
// Populate <select>
var options ='';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + i + '">' + i + '</option>';
}
$("select#myid").html(options);
})
...
</script>
<form>
<select id="myselect></select>
<input id="mytext" type="text" value="" />
<input type="submit" value="Search" />
</form>
<% foreach( MyElement element in MyListing) { %>
<div>
<script type="text/javascript">
$(document).ready(function() {
DoSomething($(select#myid).val());
})
</script>
</div>
<% } %>
Any help is very appreciated.

Edited for the extra information:
jQuery(function($) { // note that this is equivalent to $(document).load()
// if we are here, then all your page and form elements have loaded.
// Populate <select> as per your code above
$('div').each(function(index) { // perhaps give them a class?
$(this).load(<<someURL>>);
// it's not clear from your question how you intend to get the
// dynamic content, ie: what url to use?
});
});

Related

How to add radio button to my website in wordpress

I am using WordPress for my website.
I want to add radio buttons to my WordPress page when a radio button is selected I want to display a table below. Can anybody help me
Hello maybe more details help ppl to tell you better answer. but with
this much of information i'v got something for you : this is just
sample. you just need to edit for your specific purpose.
** put html code in wordpress editor ( put in editor section, not visual, visual editor maybe auto convert some tags)
** put js codes into your js script tag some where!! if you don't have any idea just use this plugin
** if jQuery not worked add this lines to function.php of your theme or child-theme to add jQuery library to your page(99% wordpress load it by default) :
// include custom jQuery
function shapeSpace_include_custom_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');
HTML CODE :
<form>
<div>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="show-table"></div>
</form>
SCRIPT CODE:
<script>
jQuery(document).ready(function ($) {
$("input").on("click", function () {
var checkedNode = $("input:checked").val();
var orangTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>orang</td></tr></table>';
var appleTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>apple</td></tr></table>';
var bananaTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>banana</td></tr></table>';
switch (checkedNode) {
case 'orange':
$("#show-table").html(orangTable);
break;
case 'apple':
$("#show-table").html(appleTable);
break;
case 'banana':
$("#show-table").html(bananaTable);
break;
default:
}
}
}
</script>
specific table assigned to each button will display inside div
with id="show-table" when that button selected. you can outspread this
method for what purpose you have. just know this is not efficient
method or best way. it's just a way ..

How to find the default tab index of controls?

I want to find the default tab index of the form.
I have not given but still all the control has the tab index. I want to find that default tab index through the j query. How can i find that?
Jquery and tab-index
The way tabindexing works is that it goes trough your html markup and looks for tabable elements.
So say you have this code:
<form>
<label>Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
The text input will be tabbed first, and then the submit input.
Yes i know this how do it get the tabbing?
$(function() {
$firstinput = $("form").find("input")
console.log($firstinput.first()); //prints the first element thats an input.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
The code above will only work if you only have input elemtns and add not trickery to the markup like hiding your elements etc.
In the code below im using the jquery UI :focusable selector.
With this you should get the first tabbable element in your form
//:focus selector from jquery UI
$.extend($.expr[':'], {
focusable: function(element) {
var nodeName = element.nodeName.toLowerCase(),
tabIndex = $.attr(element, 'tabindex');
return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled : 'a' == nodeName || 'area' == nodeName ? element.href || !isNaN(tabIndex) : !isNaN(tabIndex))
// the element and all of its ancestors must be visible
// the browser may report that the area is hidden
&& !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
}
});
//actual code
$(function() {
$form = $("form");
$first = $form.find(":focusable").first();
console.log($first);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label tab-index="0">Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
You can search for 'tabindex' attribute with jquery.
var tabindexVal = $('selector').attr('tabindex');

Problems while Styling a form element that gets data back with ajax

im facing a strange problem while trying to style a form element. A select element in particular.
the idea is simple. i got one select, and when its state changes, through ajax, a second selects gets its data throung a request. so far, everything is ok. the ajax is working fine. but when the first select changes its state, the select element styling is getting back to normal styling.
a live example can be found here
im using 2 main files, the important content of file 1 file is this
<script language="javascript" type="text/javascript">
/* FUNCTION : Ajax Initialize - Start */
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
/* FUNCTION : Ajax Initialize - End */
/* FUNCTION : Get Values - Start */
function getValue(numb) {
var strURL="find.php?theValue="+numb;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('my_requestDiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
/* FUNCTION : Get Values - End */
</script>
and
<form method="post" action="" name="form1" id="example">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="160" class="title_style">What</td>
<td width="340">
<select class="select" name="start" onChange="getValue(this.value)">
<option value="">please make a selection</option>
<option value="1">Colors</option>
</select>
</td>
</tr>
<tr>
<td width="160" class="title_style">Result</td>
<td width="340">
<div id="my_requestDiv">
<select class="select1" name="my_request" >
<option>Please select above first</option>
</select>
</div>
</td>
</tr>
</table>
</form>
where, after the user makes a selection on select element 1, through ajax, a variable is passed to find.php
<?php
$what=intval($_GET['theValue']);
$link = mysql_connect('localhost', 'YOUR_USERNAME_HERE', 'YOUR_PASSWORD_HERE');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_query("SET NAMES 'utf8'", $link);
mysql_select_db('cry-for-help');
$query="SELECT id, value FROM my_table WHERE requested='$what'";
$result=mysql_query($query);
?>
<select class="select" name="my_request">
<option>make your selection now</option>
<?php
while($row=mysql_fetch_array($result)) {
?>
<option value=<?php echo $row['id']?>><?php echo $row['value']?></option>
<?php
}
?>
</select>
and the result is posted back on file 1 as content for the second select element.
The Problem is that the styling is gone.
you can download the example files here
any help would be appreciated. Also, im sorry if my english is not that good, and my programming skills not that advanced to explain my problem with less words.
Jan
Based on the page to which you linked, it looks the problem is that you are replacing all of the extra HTML elements which have been generated by jqtransform. In your JavaScript callback, you are doing this:
document.getElementById('my_requestDiv').innerHTML=req.responseText;
This replaces the entire contents of the div, blowing away all of the extra elements that jqtransform puts in there. What you actually want to do is replace just the select element itself with the results from your PHP service, or perhaps run jqtransform again after updating the div.
Since you're already including jQuery, I would recommend using their powerful selection functionality to replace just the select element:
$('select[name="my_request"]').replaceWith(req.responseText);
I'm not familiar with the jqtransform library so you may need to investigate further to see which route makes the most sense.

CSS Hidden DIV Form Submit

Using CSS, when a link is clicked it brings up a hidden DIV that contains a form. The user will then enter information and then submit the form. I'd like the hidden DIV to remain visible, and a 'success message' to be displayed after submission. Then the user will have the option of closing the DIV. I can't get it to work without reloading the page, which causes the DIV to become hidden again. Any ideas?
<body>
Click Me
<!--POPUP-->
<div id="hideshow" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv()">
<img src="images/icon_close.png" class="cntrl" title="Close" />
</a>
<h3>Remove Camper</h3>
<form method="post" onsubmit="email.php">
<p><input name="Name" type="text" /></p>
<p><input name="Submit" type="submit" value="submit" /></p>
</form>
<div id="status" style="display:none;">success</div>
</div>
</div>
</div>
<!--END POPUP-->
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>
</body>
Forms by default submit content by changing to the specified page in its 'action' attribute. You will need to build additional scripts to prevent it from doing that and submit the data using either AJAX or jQuery then process the result.
Or you could simply use whatever language you're programming in to set the default visibility for the division. If the form data exists, display it by default, otherwise hide it by default.
How about using an AJAX call to post the form instead of posting back the whole page?
Instead of using a "submit" type for your button, you can use a "button" type and use a script called by onclick which will use ajax to submit the form and do whatever is necessary.
This defeats slightly the meaning of a form, but works well. You might also want to think about using a javascript library like prototype or similar (jquery, etc) that gives you the functionality to create a get or post array of your form in order to make it easier.

How can I pass information to an iframe via Post in ASP.NET?

I would like to pass information to an iframe via post. (Could be jquery or javascript that executes the post, it doesn't really matter).
The information cannot be sent via querystring as I do not have access to change the way the page brought in by the iframe is.
This data will determine the layout of the content in the iframe so how can I make it so that after the post is sent the iframe is updated? (possibly refresh?)
I wrote a blog post about doing this with jQuery to upload a file using a hidden iframe. Here's the code:
Here is the HTML for the form:
<div id="uploadform">
<form id="theuploadform">
<input type="hidden" id="max" name="MAX_FILE_SIZE" value="5000000" >
<input id="userfile" name="userfile" size="50" type="file">
<input id="formsubmit" type="submit" value="Send File" >
</form>
The DIV in which to allow jQuery to create the iframe you can hide it with a little CSS:
<div id="iframe" style="width:0px height:0px visibility:none">
</div>
The DIV in which to show the results of the callback:
<div id="textarea">
</div>
The jQuery code:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#formsubmit").click(function() {
var userFile = $('form#userfile').val();
var max = $('form#max').val();
var iframe = $( '<iframe name="postframe" id="postframe" class="hidden" src="about:none" />' );
$('div#iframe').append( iframe );
$('#theuploadform').attr( "action", "uploader.php" )
$('#theuploadform').attr( "method", "post" )
$('#theuploadform').attr( "userfile", userFile )
$('#theuploadform').attr( "MAX_FILE_SIZE", max )
$('#theuploadform').attr( "enctype", "multipart/form-data" )
$('#theuploadform').attr( "encoding", "multipart/form-data" )
$('#theuploadform').attr( "target", "postframe" )
$('#theuploadform').submit();
//need to get contents of the iframe
$("#postframe").load(
function(){
iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
$("div#textarea").html(iframeContents);
}
);
return false;
});
});
</script>
I used a php app like this uploader.php to do something with the file:
<?php
$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
$maxfilesize = $_POST[MAX_FILE_SIZE];
if ($maxfilesize > 5000000) {
//Halt!
echo "Upload error: File may be to large.<br/>";
exit();
}else{
// Let it go
}
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
print('File is valid, and was successfully uploaded. ');
} else {
echo "Upload error: File may be to large.<br/>";
}
chmod($uploadfile, 0744);
?>
There's more there than you need, but it illustrates the concept in jQuery.
I don't have the code handy but my team accomplished this purely in Javascript. As I recall it went something like this:
function postToPage() {
var iframe = document.getElementById('myIFrame');
if (iframe) {
var newForm = '<html><head></head><body><form...> <input type="hidden" name="..." value="..." /> </form><script type=\"text/javascript\">document.forms[0].submit();</scrip' + 't></body></html>';
iframe.document.write(newForm); //maybe wrong, find the iframe's document and write to it
}
}

Resources