I'm using Ruby on Rails to implement a simple edit/submit button to replace the content of h4 that has class named "special-content".
Here is my code for rhtml:
<div class="modal-body" style="height: 280px !important;">
<%= image_tag("special/turkey.png", :alt => "turkey", :class => "special-img") %><br>
<h4 class="special-content">#93 Turkey, Avocado & Cheese</h4><h4> with Small Sized Drink & Chip</h4>
</div>
and here is my code for jQuery, which is implemented right above the rhtml code:
<script type="text/javascript">
$(document).ready(function() {
$("body").on("click", "#edit", function() {
$('#edit').replaceWith('<a class="btn" id="submit">Submit</a>');
$('.special-content').replaceWith('<input class="special-content-edit" type="text" value="' + $('.special-content').html() + '">');
$('.special-img').replaceWith('<input class="special-img-edit" type="text" value="' + $('.special-img').attr('src') + '">');
});
$("body").on("click", "#submit", function() {
$('#submit').replaceWith('<a class="btn" id="edit">Edit</a>');
$('.special-img-edit').replaceWith('<img class="special-img" src="' + $('.special-img- edit').val() + '">');
$('.special-content-edit').replaceWith('<h4 class="special-content">' + $('.special-content-edit').val() + '</h4>');
});
});
</script>
The jQuery should allow users to replace the h4 content. Everything works fine. However, if I navigate to another link and come back to the page, the h4 content changes back to the original content ("#93 Turkey, Avocado & Cheese"). How can I preserve the changed element?
Related
I'm trying to create an <li> in which two elements are located, an <a> with <span> and a second <a> that holds a variable, html. However, the variable, which is a glyphicon, jumps down below the other <a>. How can I fix this?
var html = "<a href=\"#\" id='removeBtn' class='glyphicon glyphicon-remove'></a>";
$('#conversations').append("<li id=" + id + "><span>" + conversation.name + "</span>" + html + "</li>");
You seem to have put the class definition on the wrong item. I moved it over to the li.
html="test"
id="6"
conversation={name:"bob"}
var html = "<a href=\"#\" id='removeBtn' class='glyphicon glyphicon-remove'></a>";
$('#conversations').append("<li class=\"list-group-item\" id=" + id + "><a href=\"#\" ><span>" + conversation.name + "</span></a>" + html + "</li>");
li {
list-style-type:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<div id="conversations"></div>
I change the tag of the glyphicon to button instead of a. Solved the issue. Sorry for the inconvenience
My markup is set up like so:
<div class="media-body" >
<h5 class="media-heading">
<strong id="head">{{$blog->Title}}</strong>
<strong id="head2">{{$blog->Title}}</strong>
</h5>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
I have 2 buttons using jquery to show and hide (which act as a show more show less) the two tags within my h5 tag. However I can't seem to use this code to ensure that the strong tag with id="head2" is not displaying. I've tried
<style>
.head2
display:none;
</style>
I've also tried
<style>
strong.head2
display:none;
</style>
Im unsure if this has anything to do with Jquery so ive pasted that in below just in case.
jQuery Code:
$(document).ready(function(){
$("#head").html(function(i, h) {
var words = h.split(/\s/);
return words[0] + ' <span>' + words[1] + ' </span>' +' <span>' + words[2] + ' </span>';
});
});
$(document).ready(function(){
$("#hide").click(function(){
$("#head2").hide();
});
$("#show").click(function(){
$("#head2").show();
});
$("#hide").click(function(){
$("#head").show();
});
$("#show").click(function(){
$("#head").hide();
});
});
You're targeting a class of .head2 in your CSS, but have an id. Use an id # selector instead. For example...
<strong id="head2">{{$blog->Title}}</strong>
#head2 {
display:none;
}
See CSS Selector Reference for more information
Third time is a charm!
This is what I am trying to achive..
I would like to use data.name to populate a divs ID name. I would like the <div id="date.name"/> to show on click, below is what I have tried.
click: function(event, data) {
$('#clicked-state')
// .text('You clicked: '+data.name);
.show($("<div id='" + data.name + "'/>" ));
// .parent().effect('highlight', {color: '#C7F464'}, 2000);
}
});
In this case data.name holds abbreviations from all 50 US states.
Once a state is clicked, eg. 'California' data.name will be assigned 'CA'.
I want to use this to show div with id 'CA'.
I want to use this to display divs that I have inline with the same name.
Update: based on suggestions, div did not show onclick of state.
Recent Attempt
css
<style>
#va { display:none;}
</style>
js
click: function(event, data) {
$('#clicked-state')
$('#' + data.name).toggle();
}
});
html
<div id="va">
this is virginia.
</div>
I am using this plugin for states data.name generated and map.
http://newsignature.github.io/us-map/
As id's in a HTML page are unique, you can directly use the selector to target the div and display it.
$('#' + data.name).show();
Code
click: function(event, data) {
$('#' + data.name).show();
}
The problem is that .show doesn't take any parameters. I'm not 100% sure on what you're trying to do. If you're trying to show an existing div with the state name, you should call it like
$("#" + data.name).show();
If you're trying to create a new div, use .html on the parent containing div (if one doesn't exist, create one in there)
$("#ParentDiv").html("<div id='" + data.name + "'/>");
Some piece of code (http://jsfiddle.net/esxe7LmL/):
<select>
<option value="state1">State 1</option>
<option value="state2">State 2</option>
<option value="state3">State 3</option>
</select>
<div id="state1">state 1</div>
<div id="state2">state 2</div>
<div id="state3">state 3</div>
$("select").on("change", function() {
var v = $(this).val();
$("div").hide();
$("div#" + v).show();
});
div {
display: none;
}
Ok, so previous answer misunderstood the question so here's my second attempt:
// remember to include your us-map.js library
$('.state').hide();
$('#map').usmap({
// The click action
click: function(event, data) {
console.log( data.name );
$(".state").hide();
$('#' + data.name).show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="map" style="width: 450px; height: 350px;"></div>
<div id="VA" class="state">
This is Virginia
</div>
<div id="CA" class="state"><!-- make sure your IDs are UPPERCASE -->
This is California
</div>
I have an HTML page where users can create a newsitem. Each news item is displayed in a new div, with multiple divs inside to divide content into multiple columns, to hide some content etc. The following code is a stripped down version of 1 newsitem:
<div class="news-item clearfix" id="c-b504b780-06a8-49bc-ba04-84d1fbba1a94">
<h2>This is a title</h2>
<div class="news-image div-right">
<a class="img-gallery" href="Images/Dynamic/700x700/NewsItem/44951/example.png" rel="lightbox-This is a title"><img class="img-responsive clear" src="Images/Dynamic/200x200c/NewsItem/44951/example.png" /></a><br />
</div>
<div class="preview one-image">
<p>Text here</p>
</div>
<div class="full div-hide">
<p>Text here</p> <img src="Images/Dynamic/full/NewsItem/44951/example.png" class="img-responsive" />
</div>
As you can see, each newsitem has a generated code attached to it which is used to identify unique newsitems, the code is also used in my javascript:
<script type="text/javascript">
(function () {
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
})();
</script>
This script is supposed to put an anchor tag around the image found in my full div-hide class, however this is not working properly. I assume my jquery selector is not selecting the right div, but I do not know what it should be. Do you have an idea how I can wrap my anchor tags around images inside the class="full" div?
You have two issue in document ready function:
1) You have not added jquery selector($) in front of ready function.
2) You dont need to call the document ready function.
$(function () {
/*^^missing selector here*/
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
/*^^ () not required here*/
and to make it work for all the divs:
$('.news-item .full img').each(function(){
$(this).wrap("<a href='" + $(this).attr('src') + "'></a>");
});
Working Demo
Try this:
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full img').each(function() {
$(this).wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
$('div.full').find('img').each(function() {
// your code here ..
});
I am using http://jsfiddle.net/eLENj/493/ as a guide line to create 2 stacked buttons in an li element.
This is the code I am using
'<li><div class="ui-grid-a">' +
'<div class="ui-block-a" style="width: 75%;">' +
'<div data-role="fieldcontain">' +
'<h3>Address Details:</h3>' +
'<p>Address 1</p>' +
'</div>' +
'</div>' +
'<div class="ui-block-b" style="width: 25%; float: right;">' +
'<div data-role="controlgroup" data-type="horizontal" style="height: 20px;">' +
'Map' +
'Delete' +
'</div>' +
'</div>' +
'</div>' +
'</li>').listview('refresh');
But what I end up with are two "regular" hyperlinks which look like "MapDelete". Any ideas why the buttons are not being rendered correctly?
Method listview('refresh') will style ONLY a listview.
Because buttons are not part of a listview they will be disregarded.
You will need to style them separately like this:
$('[data-role="button"]').button();
Or you can use this method on your content DIV:
$('#contentDivID').trigger('create');
If you want to find more about this topic take a look at my other blog ARTICLE describing how to enhance dynamically added jQuery Mobile content.
EDIT :
Working example: http://jsfiddle.net/Gajotres/UDBCM/
You will need to position them by yourself + find some custom map icon.