I have a resizable div that has some text in it and a edit button.
On the edit button click it opens a layer with a textbox and save button so the user can edit the text.
Then the user clicks save, the layer is closed and the db updated with some ajax. The div on the parent page is also updated with some ajax.
The problem I have is that the div is no longer resizable.
I know the line of code that is doing this and why it is doing it but cant find any other solution to updating the original div without stripping out the resizable code as well.
On the 'save' button click on the layer this function is called
$(document).ready(function() {
$('.button').click(function() {
var edit_content = $('#myFrm').find('.nicEdit-main').html();
var box_id = $('#myFrm').find("#box_id").val();
var page_ref = $('#myFrm').find("#page_ref").val();
var template_ref = $('#myFrm').find("#template_ref").val();
$.post("update_textarea.php",
{
box_id:box_id, page_ref:page_ref, template_ref:template_ref, edit_content:edit_content
},
function(data,status){
UpdateElementOfParent(box_id, page_ref, template_ref)
edit_box('hide')
});
});
});
This updates the db and the function UpdateElementOfParent() is called on the parent page
function UpdateElementOfParent(box_id, page_ref, template_ref) {
var myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
$('#'+myBox).html(data);
});
}
this updates the original div with the updated content from the db.
I know the $('#'+myBox).html(data); strips out the inner html of the div and replaces it with the text and so removes the jquery resizable text but I cant find another way to update the text.
I have tried
$('#'+myBox).value(data);
$('#'+myBox).text(data);
$('#'+myBox).innerHTML(data);
document.getElementById('myBox').val(data);
document.getElementById('myBox').value(data);
document.getElementById('myBox').text(data);
document.getElementById('myBox').val=data;
document.getElementById('myBox').value=data;
document.getElementById('myBox').text=data;
None of these work.
My javascript is not too strong(as you can probably tell).
Can anyone help with a solution?
any help greatly appreciated
QUICK UPDATE
I noticed that if I use firebug inspector the div before it has any text updates is like so
<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]">
newtextarea
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
but once I update it (I use nicedit to format the text) the div now has a hidden ipnout within it called 'content[]'
<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]"></div>
<br></br>
<input type="hidden" value="
<div align="justify">
<font face="trebuchet ms" size="2"><strong>Lorem Ipsum</strong> es simplemente el texto de relleno de las imprentas y archivos de texto.</font>
</div>" name="contents[1]">
</input>
so it would seem that the structure of the div has change and the inner input would need updating. As the input does not have an id how can I update just using its name
MORE
ok I have edited the update function to this
function UpdateElementOfParent(box_id, page_ref, template_ref) {
var myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
var updatedata=data+"<div class='ui-resizable-handle ui-resizable-e' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-s' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se' style='z-index: 90; display: none;'></div></div>";
('#'+myBox).html(updatedata);
});
}
now when I check the original dv in firebug with the newly updated one the structure and contents are exactly the same.
I need to reinitialise the resizable. any clues?
Not really sure what you want really to do but.
var oldContent = $('#'+myBox).html();
$('#'+myBox).html(data+oldContent);
Will keep the old content and add the new one.
Or you can use .append() http://api.jquery.com/append/ depending on what you get back when updating the database
$('#'+myBox).append(data);
UPDATE:
From what I can see data retrieves a hidden input with the value of the new text. I suggest that you either change data to give back something else or add the input value to the div manually.
The input is also wrong. In the input The value="" should be value='' because you already have " inside of it. After that this function should place the value inside the right div.
function UpdateElementOfParent(box_id, page_ref, template_ref) {
var myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
$('#'+myBox).html(data);
var inval = $("input[name='contents["+myBox+"]']").val();
$("#"+myBox).html(inval).resizable();
});
}
The basic problem you had at start was that you forgot to reinitialize .resizable() on the new div.
I used dt192's suggestion and added a span inside the div and updated the span and it works great
Related
I got a problem in updating the value within <textarea> tags. The procedure is like this, there is an initial value inside textarea, then the user changes it. If I want to use a js script (implemented by a button) to modify the value further, it does not work at all. However, if we do nothing on the textarea, the button works perfectly. So weird to me. Could anyone shed any light on this? The code is posted below.
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").html("Star wars"); // this line doesn't work after editting the textarea but works if you do not edit anything, why?
$("#placeholder").html(mystring);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div>Input whatever you want</div>
<textarea id="myarea" style="width: 300px; height: 70px">Initial text</textarea>
<div>
<button id="mybutton">Click after editing</button>
<br> The button is supposed to change the text to <em>Star wars</em>.
</div>
<div id="placeholder"></div>
</body>
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").val("Star wars"); //The changes have to be made on this line
$("#placeholder").html(mystring);
});
});
Inorder to change the value of textarea use val() , instead of html().
I've implemented bootstrap and jquery and bootstrap jquery (https://github.com/seiyria/bootstrap-slider). I am using example 6 (http://seiyria.com/bootstrap-slider/).
I want to get that value and show it in a div (so later I can create an if with that value), but I cannot get it to show.
This is my HTML code:
<div class="col-lg-6" style="height: 39px; padding: 10px; padding-left: 25px;>
<input id="ex6" type="text" data-slider-min="10000" data-slider-max="100000" data-slider-step="1" data-slider-value="90000"/>
<span id="ex6CurrentSliderValLabel">Maksimalna cena: <span id="ex6SliderVal">90000</span></span> din.
</div>
<div id ="ivancar"> test </div>
And this is my JavaScript (jQuery) code:
var slider = new Slider("#slider1");
slider.on("slide", function(slideEvt) {
console.log(slider.getValue() );
var div = slider.getValue();
});
document.getElementById("ivancar").innerHTML = div;
You have placed the logic of updating your div outside the slide event. Place it within the slide event.
slider.on("slide", function(slideEvt) {
console.log(slider.getValue() );
var div = slideEvt.value; // this is what the plugin says
$("#ivancar").html(div); // <== update logic must be here
});
Note: I changed the document.getElementById("ivancar").innerHTML = div; code to $("#ivancar").html(div); for simplicity
I have a problem with my web application. I've created a tchat in Ajax and I want it to be loaded when I click on a button. It works, but the dynamic data loaded doesn't support jQuery.
When I click on the button, I dynamically change the content of a div, initially empty. But on this finder (which open) I have a link which should load smileys simply in changing the height of the div, which is initially at 0 px.
I've done tests, and when I click on the button, the height is good changed, but nothing appear on the screen.
Here is a screenshot of my chat:
When I click on the smiley, I should see that:
But nothing happened.
Here is the code that works fine because the height is changed (I've tested it) :
var elm = window.document.getElementById('myCGU_Appear-1');
if (elm.style.height == "0px") {
elm.style.height = "100px";
elm.style.overflow = "auto";
window.document.getElementById('appear_emoticon-1').src = "/assets/images/emoticons/my_small_emoticons_000.png";
} else {
elm.style.height = "0px";
window.document.getElementById('appear_emoticon-1').src = "/assets/images/emoticons/my_small_emoticons_01.png";
}
I think I've done a mistake somewhere because yesterday the code worked fine...
Here is the code that load the tchat :
$.ajax({
url:"/scripts/ajax/load_tchat.php",
type: "POST",
data: "method_call=open",
dataType: "json",
success: function(data){
console.log(data);
if(data.tchat_operation == 'open') {
// load datas
$("#frameChat").html(data.tchat_content);
// open the tchat
frameChat.classList.remove("Espace-Chat-Ferme");
frameChat.classList.add("Espace-Chat");
}
},
error: function(resultat, statut, erreur){
console.log(resultat);
console.log(erreur);
}
});
And here is the JSON code that is send to me and that I've on my div :
> this.tchat_content
< "
[...]
<div style=\"position: absolute; bottom: 5px; width:280px; class=\"myBackgroundGreyLight\">
<div class=\"section group\">
<div class=\"col span_1_of_1\"><div id=\"myCGU_Appear-1\" name=\"myCGU_Appear-1\" style=\"height:0px;margin-bottom:2%;-webkit-transition:all 0.2s ease-in;transition: 0.5s ease-in-out;overflow: hidden;display:block;\" class=\"myBackgroundGreyLight\">All emoticons</div>
<a href=\"#\" onclick=\"My_CGU_Appear2(-1,5000)\" class= \"button scrolly\" >
<img id=\"appear_emoticon-1\" src=\"/assets/images/emoticons/my_small_emoticons_01.png\" width=\"6%\">
</a><div class=\"fileUpload\">
<input type=\"file\" accept=\"image/x-png, image/gif, image/jpeg, image/jpg\" id=\"imgInp-1\" />
</div>
<div>
<a href=\"#ouvre_photo\" onclick=\"AddImageInInput2(this,-1);\">
<img id=\"blah-1\" src=\"\" alt=\"\" />
</a>
</div><div contentEditable=\"true\" class=\"contact_message\" id=\"txt_comments-1\" onkeyup=\"ia_content_analysis(-1, event,2);\" style=\"background-color:white;max-height:125px;overflow-y:auto;overflow-x:hidden;min-height: 50px;\"></div>
<div id=\"test-1\" style=\"float:right;\">
<h4> </h4>
</div>
<div id=\"callback_-1\" style=\"font-size:11px;margin-top:10px;\"></div>
<div style=\"clear:both; display:block; height:10px;\"></div>
<div style=\"display:inline-block;width:100%;\">
<a style=\"display:inline-block;background-color:#bf0e07;float:right;border-radius:4px;padding:5px;cursor:pointer;width:50px;text-align:center;font-size:12px;color:white;\" rel=\"-1\" class=\"publish_message\">Publier</a>
</div>
</div>
</div>
</div>
<script src=\"/assets/javascript/jquery.min.js\"></script>
<script src=\"/assets/javascript/My_JSFunctions.js\"></script>
<script src=\"/assets/javascript/ajax.js\"></script>"
Thanks if you can help me or show me the right way :)
You haven't set any event handler on your emoticon-button. After loading HTML data via ajax you have to reinitialize all your event handlers previously set on your elements if you had set them via ID. So instead of reinitializing all the time you could try:
$(document).on('click', '#yourButtonId', function() { /* my logic */ });
instead of assigning the event handler directly on the dynamic content. I hope I got you right. Else providing a JSFiddle would help.
I am trying to make a PHP Ajax live search Box, so far is working good but it seems that I am facing two problems:
The first one is that when data is showing on the screen, I want it to disappear if I move the mouse outside the search box.
The second one is related to CSS, I want the position of data results to be just under my search box, now is floating right.
Here the code:
<div class="widget-container widget_search">
<span class="adds"></span>
<form action="" id="searchform" method="POST">
<p>
<input type="text" id="search" placeholder="Chercher" size="30" name="search">
<button type="submit" id="searchsubmit"></button>
</p>
</form><!--/ #searchform-->
<div id="livesearch" style=" width:auto; height:auto; margin:auto; position: absolute;"></div>
</div><!--/ .widget-container-->
JS:
$(document).ready(function(){
$("#search").keyup(function(){
var valor = $("#search").val();
$.ajax({
type: "POST",
url: "/auto/search/",
data: {word:valor},
success: function(res) {
$('#livesearch').html(res);
}
});
});
});
Let'suppose the data container has an id, like "myid". Then, you can hide it like this:
document.getElementById('myid').style.display = "none";
You can make it visible like this:
document.getElementById('myid').style.display = "block";
To make this general, you can do something like this:
function changeDisplay(element, display) {
element.style.display = display;
}
You can store the data container like this:
var dataContainer = document.getElementById("myid");
Now, you want to hide it when the mouse leaves. So, you need to set the onmouseout of your search box to a function like this:
function left() {
changeDisplay(dataContainer, "none");
}
But you probably want to make it reappear when you hover to the element. So you need to set the onmouseover event to a function like this:
function entered() {
changeDisplay(dataContainer, "block");
}
As about positioning the results, you might consider adding a <br> after the search tag and then position it to the left.
using jquery:
livesearch-id of div (search box)
one-id of div where search elements are being showed
$("#livesearch").mouseout(function(){$('#one').hide(); //hides the div
});
$("#livesearch").mouseover(function(){$('#one').show(); //shows the div when mouse is pointed again
});
CSS:
set style="margin-left:(number) px;"
I'm making an ingredients application where users insert ingredients
My application looks like this:
As you can see, the first ingredients span doesn't have a X at the end, because you must have at least one ingredient, but the rest of the ingredient spans do. I'm also using the Jquery Sortable Plugin so if you click near the outside of any of the ingredient spans, you can change the order of the ingredients. This works fine, except if you move the first ingredient span, then that span doesn't have an X at the end, even if you move it to the last spot.
So what I'm trying to do is make the first ingredient span always have no X at the end, even if switched order with another ingredient span. I tried this:
$('ingredientsCOUNT > span:first').hide(deleteButton);
but it didn't work? Any other suggestions? All help is greatly appreciated, and here's my code:
HTML (the php can just be ignored!)
<div class='formelementcontainer funky'>
<label for="ingredient">Ingredients</label>
<div id='ingredientsCOUNT' class='sortable'>
<span>
<input type="text" class='small' name="ingredient" id="ingredient" placeholder='QTY'/>
<select name='measurements'>
<option value='' name='' checked='checked'>--</option>
<?foreach ($measurements as $m):?>
<option value='<?=$m->id;?>'><?=$m->measurement;?></option>
<?endforeach;?>
</select>
<input type="text" name="ingredient" id="ingredient" placeholder='Ingredient'/>
</span>
</div>
<div class="clear"></div>
<div class='addSPAN tabover'>
<a class='float-right' id='btnAddIngredients' href='#'>Add Ingredient</a>
</div>
</div>
jQuery
(function($) {
$(document).ready(function () {
$('#btnAddIngredients').click(function () {
var num = $('#ingredientsCOUNT span').length;
var newNum = new Number(num + 1);
var deleteButton = $("<a class='float-right' style='margin:10px 2px;' href='#'><img src='<? echo base_url()."public/img/delete.png";?>' height='11' width='11' /></a>");
deleteButton.click(deleteThis);
$('#ingredientsCOUNT > span:first')
.clone()
.attr('name', 'ingredient' + newNum)
.append(deleteButton)
.appendTo('#ingredientsCOUNT')
.fadeIn();
$('ingredientsCOUNT > span:first').hide(deleteButton); //THIS IS MY SOLUTION THAT DIDN'T WORK
});
function deleteThis() {
var span = $(this).closest('span')
span.fadeOut('slow', function() { span.remove(); });
}
$( ".sortable" ).sortable(); //jQuery Sortable initialized
});
})(jQuery);
How about hiding it with CSS? The following assumes you added a class delete-button to your delete links:
#ingredientsCOUNT > span:first-child .delete-button { display: none; }
With that CSS, you can reorder the list, add or remove items, and the first delete button will never show.
Since :first-child is quirky in oldIE ( https://developer.mozilla.org/en-US/docs/CSS/:first-child#Internet_Explorer_notes ), it's possible to use the Sortable API like this:
$(".sortable").sortable({
update: function (event, ui) {
var rows = $("#ingredientsCOUNT").children("span");
rows.removeClass("first-child");
rows.first().addClass("first-child");
}
});
(there's probably a better way to utilize the event and/or ui parameters)
This way, you wouldn't have to determine which row to add a delete button to; you would always include a delete button in every row in your HTML. Then, when a sorting is done, the jQuery in the stop event (EDIT: update event) will hide the first row's delete button and show the rest (via classes).
Of course, you would need this CSS:
#ingredientsCOUNT > span.first-child a.delete-button {
display: none;
}
And to add a delete-button class to your delete buttons <a>
EDIT:
I changed the Sortable method from stop to update so that it only runs the code when the sorting arrangement has actually changed, after the sorting is done.