how to get UL LI value in jquery? - javascript

I am trying to get ul li listbox value in function but i cant find way.
My code is like that.
<ul class="dropdown-menu" id="newloc">
<?php
$res_add = DB::table('res_br')->where('email',$user_email->email)->get();
if(count($res_add) != "") {
foreach($res_add as $rr1) {
?>
<li value="<?= $rr1->street;?>"><?= $rr1->street;?></li>
<?php
}
}
?>
</ul>
<button type="button" class="btn btn-block btn-primary" data-dismiss="modal" onClick="buildorder()" >Build Your Order</button>
My jquery function is like that
function buildorder() {
var radio = $("input[name='newradio']:checked").val();
var location = $(this).find('li');
console.log(li.text());
alert(radio);
alert(location);
}
can some help me.to get location variable.

Let's fix this code first:
<ul class="dropdown-menu" id="newloc">
<?php
$res_add = DB::table('res_br')->where('email',$user_email->email)->get();
if(count($res_add) != "")
{
foreach($res_add as $rr1)
{
echo '<li value="'.$rr1->street.'">'.$rr1->street.'</li>';
}
}
?>
</ul>
<button type="button" class="btn btn-block btn-primary" data-dismiss="modal" onClick="buildorder()" >Build Your Order</button>
Now your code outputs li-elements based upon the foreach.
Next the button code:
function buildorder()
{
var radio = $("input[name='newradio']:checked").val(); //this refers to an input that is not in this post, but I assume this refers to a location in the list.
var location = $('#newloc').find('li'); //no this, let's use the id
console.log(location.text()); //this will list all the li elements and there textContent
alert(radio);
alert(location);
}
This only fixes the code and will give you information from the lis. However since we don't know more about your code I can't help you further with selecting the correct li.
You can even assign the click handler to the button with jQuery.
$('button.btn.btn-primary').click(buildorder);

Use this code ,hope this will help
$("#newloc li").click(function() {
alert(this.id);
alert($(this).html());
alert($(this).text());
});

Related

cant grab value from div using attr()

check the html code bellow. i want to get value of isred on click by jquery. but problem with my code is that this returns undefined error in console.log. How can i fix it?
html:
<div value="123102302155" upc="076174942026" class="btn btn-default btnAmazon"><i data-toggle="tooltip" data-placement="top" title="" class="fa fa-bullseye fa-lg" style="color:#82f520" isred="0" data-original-title="We successfully match supplier product, click to compare"></i></div>
jquery:
$(document).on("click", ".btnAmazon", function (e) {
var isred = $(this).attr("isred");
console.log(isred);
});
Your .btnAmazon div doesn't have the isred attribute. If you want to add a custom attribute to your html, try to use data-iserd="value". In the term of SEO it's not an standard attribute of html elements.
You can get the value with jquery like this:
var isred = $(this).data("isred");
Also your query for getting access to that attribute is wrong. Try this:
var isred = $('i', this).data("isred");
Update
$(function() {
$(document).on("click", ".btnAmazon", function (e) {
alert($('i',this).data("isred"));
});
});
.btnAmazon {
width: 100%;
height: 200px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div value="123102302155" upc="076174942026" class="btn btn-default btnAmazon">
<i data-toggle="tooltip" data-placement="top" title="" class="fa fa-bullseye fa-lg" style="color:#82f520" data-isred="10" data-original-title="We successfully match supplier product, click to compare"></i>
</div>
You can get value from div using id
for example:-
var demo = document.getElementById('demo').getAttribute('value');

Set specific div contenteditable to true on button click using Javascript (MVC)

I am populating divs with data in it by use of a foreach :
#foreach (var item in Model.EmploymentDetailsList)
{
<li>
<i class="fa fa-user bg-aqua"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> Current</span>
<h3 class="timeline-header">#item.Position at #item.EmploymentCompany</h3>
<div id="page-wrapper">
<section>
<div id="editor" class="diveditor timeline-body">
<input type="hidden" class="pkiEmploymentDetailID" value="#item.pkiEmploymentDetailID" />
#Html.Raw(item.PositionDetails)
</div>
</section>
</div>
<div class="timeline-footer">
<button id="editorBtn" type="button" class="edit-button btn btn-primary btn-xs">Edit</button>
#*<a class="btn btn-primary btn-xs">Edit</a>*#
</div>
</div>
</li>
<!-- timeline time label -->
<li class="time-label">
<span class="bg-red">
#item.StartDate
</span>
</li>
<!-- /.timeline-label -->
}
And I have the following JS that I am trying to use to set the specific div's contenteditable to true, based on the button clicked in that div :
<script>
//var editorBtn = document.getElementById('editorBtn');
//var element = document.getElementById('editor');
$('.edit-button').on('click', function () {
//editorBtn.addEventListener('click', function (e) {
// e.preventDefault();
//alert("Button Clicked");
if ($('.diveditor').attr('contenteditable', 'false')) {
// Disable Editing
//This code runs when you click Save
alert("Button Editable works");
//alert(element.innerHTML);
//TODO: Do Ajax call to save content to Database
var ProfileDetails =
{
"EmploymentDetails": element.innerHTML
};
$.ajax({
url: '/Profile/Save_Employment/',
data: JSON.stringify(ProfileDetails),
datatype: 'json',
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
$('.diveditor').attr('contenteditable', 'false');
$('.edit-button').innerHTML = 'Edit';
// You could save any changes here.
}
});
} else {
//This code runs when you click Edit
$('.diveditor').attr('contenteditable', 'true');
$('.edit-button').innerHTML = 'Save';
$('.diveditor').focus();
}
});
</script>
So as you will see, all the Div's and buttons have the same names and I would like to edit only the specific Div that I click the button on(the edit button) - I have done something similar using a webgrid by using the class name.
Currently it sets focus to the last Div and not the one I want. It also does not change the button from "Edit" to "Save".
Is there a better way of doing this ? Or can someone possibly help me with what I am doing wrong.
You could use data- attributes to tell your script, which element should be now editable and give every div his own id attribute like this.
<div id="editor_#item.pkiEmploymentDetailID" class="diveditor timeline-body">
<input type="hidden" class="pkiEmploymentDetailID" value="#item.pkiEmploymentDetailID" />
#Html.Raw(item.PositionDetails)
</div>
<button id="editorBtn" type="button" class="edit-button btn btn-primary btn-xs" data-edit="#item.pkiEmploymentDetailID">Edit</button>
and in your jQuery script you know which element was clicked if you're passing argument to click handler. With this information you can read data-edit and make specific div editable.
$('.edit-button').on('click', function (event) {
var clicked = $(event.target);
var editableId = "editor_" + clicked.data("edit");
// make element with id=editableId editable
if ($('#'+editableId).attr('contenteditable', 'false')) {
/* code */
}
else
{
$('#'+editableId).attr('contenteditable', 'true');
clicked.html('Save');
$('#'+editableId).focus();
}
}
This approach allows you to change your HTML structure without worrying about breaking something in your JS.

How to get the text "Submit" from below code

How to get the text "Submit" from below code. The div dosent have any id
<div class="modal-footer" style="display: block;">
<button class="psc-cancel btn-gray" data-target="#psc-service-form-modal" data- dismiss="modal">Cancel</button>
<button class="psc-submit btn" data-target="#psc-service-form-modal">Submit</button>
</div>
Try this:
var button = document.getElementsByClassName('psc-submit btn')[0];
if(button.innerHTML == "Submit") {
alert('button contains "Submit"');
}
if you want pure javascript, try this
var submittxt = document.getElementsByTagName('div')[0].getElementsByTagName('button')[1].textContent;
alert(submittxt);
http://jsfiddle.net/ZQVR8/
As the button doesn't have an id or name attribute, there is no "definite" way to get exactly that button. If it's the only one with that specific name attribute, or the only one with the psc-submit class, you could query it like this, for example:
var btn = document.querySelector('.modal-footer .psc-submit');

Dynamic HTML IDs (PHP, Java, and a bit of SQL)

I'm trying to create a web page which generates a series of unique DIV IDs, each displaying different content based off of the entries in an SQL table.
Each div has a "hide" and "show" button, which work independently when manually giving each div a unique name.
I can get the divs themselves to generate based on class names in PHP, which displays the divs correctly.
The problem lies in the "hide" and "show" buttons since they're controlled by JavaScript. The code is as follows:
for ($j = 0 ; $j < $rows ; ++$j)
{
for($i =0; $i < $rows2; $i++)
{
if (mysql_num_rows($ans) > 0) //check if widget table is empty
{
$widgetusr[$j] = mysql_result($ans,$j,'wname')or die(mysql_error()); //user's widget
$widgetstore[$i] = mysql_result($ans2,$i,'wname'); //store widget
if($widgetusr[$j] == $widgetstore[$i] && $widgetusr[$j] != 'Medieval Calendar') //check if user has already purchased the widget
{
echo "<div class=widget_container".$j%2 .">"; //container divs are named 1 and 0. j mod 2 should return either 1 or 0
?>
<!----Start of weather Widget--->
<!---Script for show/hide buttons weather widget--->
<script>
var widg = "<?php echo $widgetusr[$j]; ?>";
var id = "#" + widg;
$(document).ready(function(){
$("#hide1").click(function(){
$(id).hide();
});
$("#show1").click(function(){
$(id).show();
});
});
</script>
<button id="hide1">Hide</button>
<button id="show1">Show</button>
<!---End Script for show/hide buttons weather widget--->
<?php
echo "<div class = 'widget' id='$widgetusr[$j]'>
</div>
</div>
<!----End of Widget---> ";
}
}
else
{
echo "You have no widgets please visit <a href='store.php'> the store </a> to purchase some. <br/>"; //widget table is empty. Redirect to widget store.
}
}
}
?>
I tried to pass the php varriable (containing an SQL value) to JavaScript (which works successfully, I was able to print out "#financial widget" as an id name.), however neither the show, nor hide button works. The generated divs all have the correct names also.
If additional information is required please ask. I tried to be as general as possible.
You really only need one button. Change your php to render the following html
<div class="widget_container">
<button class="btn ">Hide</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget2</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget3</div>
</div>
and output the following Outside of the loop, ensuring jQuery is loaded:
<script type="text/javascript">
//Standar jquery doc ready event, fires when the dom is loaded
$(document).ready(function(){
//add an event listener elements with a class of "btn"
$('.btn').click(function () {
//"this" is the element click, so we find siblings of this with a class
//of "widget" and toggle its visibility
$(this).siblings('.widget').toggle();
//Change the text of the button the below is short hand for:
//if($(this).text() == "Hide"){
// $(this).text("Show");
//}else{
// $(this).text("Hide");
//}
$(this).text($(this).text() == "Hide" ? "Show" : "Hide");
});
});
</script>
Example
Some useful links:
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/click/
http://api.jquery.com/siblings/
http://api.jquery.com/closest/
http://api.jquery.com/toggle/
http://api.jquery.com/text/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Example with fixed height widgets: http://jsfiddle.net/bdpm4/2/
Update 2
Perhaps a better way to do it: http://jsfiddle.net/bdpm4/3/
you should use class instead of id and dont put your $(document).ready() in the loop.
HTML:
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget2</div>
</div>
JS:
$(document).ready(function(){
$('.btn').on('click', function (evt) {
var btn = $(evt.target);
btn.siblings('.widget').toggle();
btn.parent().find('.btn').toggle();
});
});
CSS:
.showBtn {
display:none;
}
here is an example: http://jsfiddle.net/xdA4r/4/

Jquery change row in table

My code http://jsfiddle.net/Vds69/ I want to change current row in a table with new value, if I click on the button at the end of the row. Please help me to write action to change row
HTML
<div class="row-fluid">
<div class="btn-group">
<button class="btn btn-primary action-add-visual-feature"> + new visual feature </button>
<button class="btn btn-danger action-remove-visual-features"> Remove all features</button>
</div>
</div>
JQUERY
$('.action-remove-visual-features').on('click', function() {
console.log("action-remove-visual-features");
$('#table-visual-features tbody').html('');
});
$('.action-add-visual-feature').on('click', function() {
console.log("action-add-visual-feature");
$('#table-visual-features tbody').append('<tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td><td><button class="action-change">edit</button> <button class="btn btn-mini btn-danger action-remove-visual-feature">remove</button></td></tr>');
});
$('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
console.log("action-remove-visual-feature!!");
console.log("e action = ", e);
$(this).parents('tr').remove();
});
An HTML5 solution could be by appending the following function
$('#table-visual-features tbody').on('click', 'tr button.action-change', function (e) {
if ($(this).hasClass("changing")) {
var $parentRow = $(this).parents('tr').eq(0);
$(this).removeClass("changing");
$parentRow.removeClass("changing");
$(this).text("edit");
/*$('.action-change').parents('tr').eq(0).find('td').attr("contenteditable","false");*/
$parentRow.find('td').attr("contenteditable","false");
} else {
var $parentRow = $(this).parents('tr').eq(0);
$(this).addClass("changing");
$parentRow.addClass("changing");
$(this).text("stop-edit");
$parentRow.find('td').attr("contenteditable", "true");
}
});
CSS
tr.changing td{
border:1px solid green;
}
http://jsfiddle.net/Vds69/8/
Otherwise, you will have to do something like the following,
when editing
1.append to your td input elements
2.input elements should get their value from the text of td elements
finish editing
1.get the values from input elements
2.remove the input elements
3.set the values as text to the td elements.
You can't edit the HTML table manually. It has to done either programmatic or HTML wise.
Here is better approach.
1) Enclose the td with textbox like
<td><input disabled type="text" value="x"/></td>
Similarly apply to all the td s and disable them.
2) Then for edit, add a click functionality like this
$(document).on('click', '.action-change', function () {
$(this).parent().parent().find('input').prop('disabled', false);
});
Just enable the textbox for editing.
Check the working in JSFiddle
Hope you understand.
Hope something like this is what you want mate... Juz gave some static values for the time being..
$('#table-visual-features tbody').on('click','.action-change',function () {
$(this).parent().siblings('td:eq(0)').html('Visual');
$(this).parent().siblings('td:eq(1)').html('Alpahabet');
$(this).parent().siblings('td:eq(2)').html('123');
});
Fiddle
http://jsfiddle.net/tRhHt/

Categories

Resources