So I am trying to dynamically (using javascript) add an input field in a form by clicking the button "Add". The semantic-ui dropdown css styling to the first field since it is not added with javascript. However, after I press add, a new field created by the css styling is not applied.
Here is a link to a demo.
https://jsfiddle.net/traorefly/h83245ju/#&togetherjs=QidJs02nya
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>TOPS</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<body>
<div class="ui text container" style="margin-top: 20%">
<form action="" class="ui form">
<div class="field" id="timekeyword">
<label>Segment Start Time/Keywords</label>
<div class="ui action input">
<input type="text" placeholder="Ex: 08:23" name="cut"> <select id="keywords" multiple="multiple" class="ui fluid search dropdown" name="video[keywords][]">
<option value="Absolute">Absolute</option>
<option value="Absolute Two">Absolute Two</option>
</select>
<div class="ui positive button" id="addField">Add</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<script >
$('.dropdown').dropdown();
$('#addField').click(function(){
var html = "<div class=\"field\">" +
" <div class=\"ui action input\">" +
" <input type=\"text\" placeholder=\"Ex: 08:23\" name=\"cut\">" +
"<select id=\"keywords\" multiple=\"multiple\" class=\"ui fluid search dropdown\" name=\"video[keywords][]\"><option value=\"Absolute\">Absolute</option>" +
"<option value=\"Absolute Convergence\">Absolute Convergence</option>" +
"<option value=\"Absolute Maximum\">Absolute Maximum</option>" +
" </div>" +
" </div>"
$('#timekeyword').after(html)
})
</script>
</body>
</html>
fiddle: https://jsfiddle.net/8pcfz2a7/
you should call $('.dropdown').dropdown(); for new elements as well.
so add $('.dropdown').dropdown(); to end of your click handler.
you can also put this in a function called update_ui, for reuse code.
Related
This is the chunk of my code
<div class="form-control">
<div class="input-group">
<span class="input-group-addon">
<input type="text" id = "fromuser"></input>
<select id="combobox">
<option value="">Select one...</option>
<option value="abc">abc</option>
<option value="cde">cde</option>
<option value="xyz">xyz</option>
</select>
</span>
<button type="submit">Submit</button>
</div>
</div>
What I am trying to achieve is that the User can either Type the value or select from the dropdown list. The challenge here is that the Input from Keyboard will be different from that given in dropdown. For example, the dropdown has three character string options but the user can type a number such as 10, 20, 30 etc.
Is this type of input allowed possible? If so, can someone help me.
The Closest I could come to my problem is by dropping the select and use autocomplete . The full test code is as follows:-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"abc",
"def",
"xyz"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
function myFunction(){
var NameValue = document.forms["FormName"]["tags"].value;
window.alert(NameValue);
}
</script>
</head>
<body>
<form name="FormName" method="post" />
<div class="ui-widget" >
<input name= "tags" id="tags" type="text" onchange="myFunction()"/>
<button name="btn-signup" type="submit" value="Submit">Submit</button>
</div>
</form>
</body>
</html>
I know this is the final solution but maybe a way ahead.
I'm trying to use customized css on bootstrap 3, but failed. What I want is(on wide screen):
combo box located in vertical center on the left side.
The h3 Title located in center(This item is the highest).
The date mark located in bottom(This item is the shortest) on the right side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" />
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" />
<![endif]-->
<style>
.vcenter {
vertical-align:middle
}
.vbottom {
vertical-align:bottom
}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal bg-info" role="form">
<div class="form-group">
<div class="col-md-4 vcenter">
<div class="input-group input-group-lg">
<select class="form-control">
<option>a</option>
<option>b</option>
</select>
</div>
</div>
<div class="col-md-6">
<h3>Title</h3>
</div>
<div class="col-md-2 vbottom">
<p class="text-right"><small>2014.09.03</small></p>
</div>
</div>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
</body>
</html>
Try this:
for vertical align use display: table-cell
.vcenter {
vertical-align:middle;
display:table-cell;
}
Use inline padding-top, here is the demo
left column: height 46px, add 5 px (=(56-46)/2)
middle column: height 56px
right column: height 30px, added 26 px(=56-30)
Cons:
Should manual calculate.
This method works on wide screen. It will get extra height on mobile phone.
I have HTML file like this
<html>
<head>
<title>Page Name in a Folder</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
<link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
<link href="data/styles.css" type="text/css" rel="stylesheet"/>
<link href="files/page_name_in_a_folder/styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="base" class="">
<!-- Image Shape Name (Image) -->
<div id="u0" class="ax_image" data-label="Image Shape Name">
<img id="u0_img" class="img " src="images/page_name_not_in_a_folder/u0.png"/>
<!-- Unnamed () -->
<div id="u1" class="text">
<p><span> </span></p>
</div>
</div>
<!-- Heading 1 Shape Name (Shape) -->
<div id="u2" class="ax_h1" data-label="Heading 1 Shape Name">
<img id="u2_img" class="img " src="resources/images/transparent.gif"/>
<!-- Unnamed () -->
<div id="u3" class="text">
<p><span>Heading 1</span></p>
</div>
</div>
<!-- Heading 2 Shape Name (Shape) -->
<div id="u4" class="ax_h2" data-label="Heading 2 Shape Name">
<img id="u4_img" class="img " src="resources/images/transparent.gif"/>
<!-- Unnamed () -->
<div id="u5" class="text">
<p><span>Heading 2</span></p>
</div>
</div>
<!-- Label Shape Name (Shape) -->
<div id="u6" class="ax_paragraph" data-label="Label Shape Name">
<img id="u6_img" class="img " src="resources/images/transparent.gif"/>
<!-- Unnamed () -->
<div id="u7" class="text">
<p><span>Label</span></p>
</div>
</div>
<!-- Unnamed (HTML Button) -->
<div id="u26" class="ax_html_button">
<input id="u26_input" type="submit" value="Submit"/>
</div>
</div>
</body>
</html>
And I need to extract all DIV's with its classes and attributes, eg:
Class name: (ax_html_button) extract value of the button = “Submit”
Class name: (ax_paragraph) extract value of the data-label = “Label
Shape Name”
etc.
Tried with using HtmlAgilityPack:
Public Shared Sub parseAgility(fName As String)
Dim htmlDoc As New HtmlAgilityPack.HtmlDocument()
htmlDoc.OptionFixNestedTags = True
htmlDoc.Load(fName)
Dim classes As New List(Of String)()
For Each node As HtmlNode In htmlDoc.DocumentNode.SelectNodes("//body//div")
classes.Add(node.InnerHtml)
Next
End Sub
But not sure how to handle all the attributes.
Any idea ?
and how to get value of input element ("Submit") ?
<div id="u26" class="ax_html_button">
<input id="u26_input" type="submit" value="Submit"/>
</div>
if I type this I get value of "u16_input" element instead of "u26" !?
For Each node As HtmlNode In htmlDoc.DocumentNode.SelectNodes("//body//div")
Dim className = node.GetAttributeValue("class", "")
Select Case className
Case "ax_html_button"
Dim node2 As HtmlNode = node.SelectSingleNode("//input")
value= node2.GetAttributeValue("value", "")
Case "ax_paragraph"
Case "ax_h1"
Case "ax_h2"
Case "ax_h3"
Case "ax_h4"
Case "ax_h5"
Case "ax_h6"
Case "ax_checkbox"
End Select
Next
EDIT: Found the solution.
It isn't entirely clear what you're trying to get. But here is an example to get class name from class attribute :
For Each node As HtmlNode In htmlDoc.DocumentNode.SelectNodes("//body//div")
Dim className = node.GetAttributeValue("class", "");
If Not String.IsNullOrEmpty(className) Then classes.Add(className)
Next
You can use similar approach to get other attributes of the <div>s.
I tried changing the script to the following and it still doesn't trigger the event.. am I missing something?
$('#page1').live('pageshow',function(event) {
$("#radioyes").click(function(){
$("p").hide();
});
});
I also tried pagebeforecreate but the result is the same.. :(
I am trying a simple jquery mobile page and testing on chrome portable. However, in the following code, the input click event isn't working where as button click works. I also tried "input#radioyes" as "div>fieldset>input#radioyes" and still doesnt work.
<!DOCTYPE html>
<html>
<head>
<title>Background check </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone4.png" />
<script type="text/javascript" src="jQuery/jquery.js"></script>
<script type="text/javascript" src="jQuery/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="jQuery/jquery.mobile.min.css" />
<!-- JQuery Date Picker components -->
<link rel="stylesheet" href="jQuery/jquery.ui.datepicker.mobile.css" />
<script src="jQuery/jQuery.ui.datepicker.js"></script>
<script src="jQuery/jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet" href="css/folo.css" />
<script type="text/javascript">
$('#page1').live('pageshow',function(event) {
$("#radioyes").click(function(){
$("p").hide();
});
});
</script>
</head>
<body >
<div data-role="page" id="page1" data-theme="a" data-title="PAGE1">
<div data-role="header">
<h1>"PAGE1"</h1>
</div><!-- /header -->
<div data-role="content" >
<p> Welcome. </p>
<div id="SSN">
<label for="basic">SSN: </label>
<input name="ssn" id="textSSN" value="" data-theme="a" />
</div>
<div id="first">
<label for="first">First Name:</label>
<input name="input_first" id="input_first" value="" data-theme="d" />
</div>
<div id="last">
<label for="last">Last Name:</label>
<input name="input_last" id="input_last" value="" data-theme="d" />
</div>
<button id="btn1">Click me</button>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-role="fieldcontain">
<legend>Have you used other last name?</legend>
<input type="radio" name="radio-choice" id="radioyes" value="yes" />
<label for="radioyes">Yes</label>
<input type="radio" name="radio-choice" id="radio-no" value="No" checked="checked" />
<label for="radio-no">No</label>
</fieldset>
<div id="otherlast">
<label for="otherlast">Other Last Name:</label>
<input name="input_otherlast" id="input_otherlast" value="" data-theme="d" />
</div>
</div>
<div id="dob">
<label for="date">Date Of Birth:</label>
<input type="date" class="datepicker" name="date" id="my_date" value="01/19/1975" text="01/19/1975" />
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</html>
Appreciate any help.. The version of Jquery is 1.7.1 1.6.4 downloaded and the jquery mobile is the latest version.
You cannot use $(document).ready in jquery mobile here's an documentation about it
Also here's an answer to a similiar question
jQM 1.0 does not support jQuery 1.7.x please use jQuery 1.6.4 ( Source )
jQM uses pageInit(), not $(document).ready() ( Source )
Also jQM adds additional markup to your page so $("p").hide(); might be hiding as expected but the additional markup might still be visible. I would suggest using an id for the span elements
UPDATE:
Try this
$('#page1').live('pageshow',function(event) {
$("#radioyes").bind( "change", function(event, ui) {
$("p").hide();
});
});
Live Example:
http://jsfiddle.net/CZLcR/9/
Docs for Radio Events:
http://jquerymobile.com/demos/1.0/docs/forms/radiobuttons/events.html
Having trouble constructing a button dynamically with jQuery Mobile. Copy and run. See notes in code.
<!DOCTYPE html>
<html>
<head>
<title>MSC Pre-Close Application</title>
<meta charset="utf-8"/>
<!-- standard Jquery/jQuery Mobile Libraries -->
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<BR/>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div class="ui-block-a"><button id="click_me" type="submit" data-theme="a" data-icon="home">Click me to change the button to my right</button></div>
<div class="ui-block-a"><button class="cl_pre_phone1" type="submit" rel="external" data-theme="a" data-icon="home">Primary Phone</button></div>
<script>
$(document).ready(function()
{
// this changes the label but not the href action.
$(".cl_pre_phone1").html("<a href='google.com'> Google</a>");
$("#click_me").click(function() {
alert("this should change the text and href of the button!");
// here I would like to change the value as well as the href action, but it does not work.
$(".cl_pre_phone1").html("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>").reload(true);
});
});
</script>
You're getting messed up by the enhancement which jQM does. Your button is getting rewritten to:
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Primary Phone</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span></span>
<button class="cl_pre_phone1 ui-btn-hidden" type="submit" data-theme="a" data-icon="home" aria-disabled="false">Primary Phone</button>
One way round this would be to change the call inside the callback to:
$(".cl_pre_phone1").attr("href", "http://yahoo.com").parent().find(".ui-btn-text").text("Yahoo");
or you could replace the whole ui-block-a div.