Bootstrap buttons added dynamically render differently to those declared in markup - javascript

Like the title says..
I have markup like this:
.spancenter {
margin:0 auto !important;
float:none !important;
text-align:center !important;
}
<div class="row-fluid">
<div class="span12">
<div class="spancenter">
<input id="btnSave" name="btnSave" class="btn" type="button" value="Save" />
<input id="btnCancel" name="btnCancel" class="btn" type="button" value="Cancel" />
</div>
</div>
</div>
If I get that HTML via AJAX (ie. literally say $('#divWrapper').html(thehtml); it renders differently:
(Top one is from AJAX, bottom one is static markup)
In Firebug they look identical.
Why do they render differently?

Inputs are inline elements thus in HTML like in the example above there will be a space between them. There are several ways how to get rid of it, and one of them is to write HTML without spaces, e.g.
<input type="button"
/><input type="button" />
or
<input type="button" /><input type="button" />
Your AJAX response is probably a string without any spaces, so it's like using this hack. That's why buttons are different.
As for a general look — they are the same. Just take the buttons from the bottom row and put them on top of the top raw — you will see that it's an illusion.

Related

Show message in HTML textarea by id

I'm making a chat application in a pop up mode in the corner of the website. I'm using SignalR for the chat in ASP.NET, C#. The problem is, that not showing the message in the textarea. Here is my code for my HTML file:
<div class="chat-popup" id="myForm">
<form action="/Wilcome" class="form-container">
<h1>Chat</h1>
<label><b>Message</b></label>
<textarea id="messagesList" readonly></textarea>
<textarea placeholder="Type message.." id="messageInput"></textarea>
<button type="button" class="btn" id="sendButton">Send</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
The id="messagesList is not showing. This is in my chat.js file, where showing the sent messages. When I tried to use in a simple <ul id="messagesList"></ul> thats worked but in a lots of messages its going to the infinity up and cant scroll down, so its better to make in textarea (i found only this one for it, if you can tell any one like this textarea, please share)
You can actually apply a scrollbar to more elements than the textarea.
You can have a div, give it a height in CSS and set its overflow-y to scroll
<div id="messagesList"></div>
#messagesList{
height:300px;
overflow-y:scroll
}

sceditor: How do I save and load data to/from mysql

I recently came across this BBCode (Bulletin Board Code) editor named SCEditor. It's the first one that I found so I started using this one, but i am not really familiar with parsers and stuff. I need it for showing news on my website. So basically:
Admin types the news content using the editor.
Now it gotta save (I don't know how to save its output (for example images?)).
The main page loads it and shows as news (how do I load it and then convert to BBCode again?)
Here's the simple code i am using:
<form action="add-news.php" method="post">
<input
type="text"
name="newssubject"
placeholder="Subject"
required="required field"
class="form-control" style="width: 98%">
</input> <br>
<textarea
id="newsenter"
cols="110"
rows="20"
name="newsbody">
</textarea><br>
<button
style="float:right; margin-right: 10px;"
type="submit"
name="newsset"
class="btn btn-success">
Post
</button>
<a href="mod.php">
<button
type="reset"
style="float:right; margin-right: 10px;"
class="btn btn-danger">
Cancel
</button>
</a>
</form>
<script>
var textarea = document.getElementById('newsenter');
sceditor.create(textarea, {
format: 'bbcode',
style: 'minified/themes/content/default.min.css'
});
</script>
webpage image
You can use SBBCodeParser. SCEditor and this class were coded by the same person. So it would be more compatible.
from this answer : https://stackoverflow.com/a/17900286/5902691

Change button's font size

I'm trying to change font size on button but have had no success
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<input type="button" value="Open" onclick="ZZ();">
</div>
<div class="ui-block-b">
<input type="button" value="close">
</div>
<div class="ui-block-c">
<input type="button" value="BUG">
</div>
</fieldset>
I've tried this, but it won't change the font size:
<div class="ui-block-c">
<input style="font-size:10px;" type="button" value="BUG">
</div>
As much I have understood, you want to change font size of button.
Check this fiddle
I have just added a "class" attribute which has been set in css.
like
<input type="button" value="Test Button" class="btnClass"/>
and css code:
.btnClass {
font-size: 12px;
}
You may set size as per your need.
If you want to change is dynamically, you can use .addClass method. jquery document for the same
If haven't got you correctly please come again.

Making <a> behave the same as <input type="image" />?

Inside our web application, we have some messaging functionality for messaging other members. This form is receiving a facelift, and I need to replace some functionality:
<input type="image" name="cancel" src="/rpc/button/?text=Cancel" />
<input type="image" name="delete" src="/rpc/button/?text=Delete Draft" />
<input type="image" name="send" src="/rpc/button/?text=Send Message" />
<input type="image" name="save" src="/rpc/button/?text=Save Draft" />
I need to change those buttons to use the new CSS buttons we have:
Cancel
I have tried doing this, which does submit the form, but it seems as though the name="cancel" is being lost, and the form simply submits without :
<a class="button" name="cancel" href="javascript:" onclick="$('#frmCompose').submit();">Cancel</a>
Because we are under a deadline, there is no time for rewriting the backend functionality for this.
How can I replace these old <input type="image" /> with <a> tags and still pass along a name attribute? I would like to avoid having to create new CSS styles for <button> or <input type="submit" /> if at all possible.
Uglyish, but use a hidden form field:
<input type="hidden" id="clickedname" name="" value="" />
and
<a class="button" name="cancel" href="javascript:" onclick="$('#clickedname').value = this.name; $('#frmCompose').submit();">Cancel</a>
^^^^^^^^^^^^^^^^^^^^^^^^^
Adjust the name/value assignments to suit - I can't remember offhand exactly how image inputs submit themselves.
You'll need to use JS to, for example, put a value into a hidden field for the submit, and submit.
I'd recommend writing a tiny utility function that replaces your onclick attribute value. Better yet, attach the functionality after DOM ready and keep things unobtrusive and localized.
<a class="button" href="#" onclick="submit('cancel')">Cancel</a>
And submit does what you'd expect, fills the hidden field, and submits the form. If you really can't change the back end at all then you can change the name of the hidden field as well, but ugh; seems like changing the back end to check for an "action" field or something is cleaner.
If adding name="cancel" to your doesn't work, it sounds like you might have to get a little fancy with your javascript. Something like:
<input type="hidden" name="placeholder" value="true" />
<a class="button" name="cancel" href="javascript:" onclick="$(this).prev().attr('name', 'cancel'); $('#frmCompose').submit();">Cancel</a>
Only form elements (<input>, <button>, <textarea>, <select>, etc.) submit values to a form. For an <a> tag to do so, you'd have to use JavaScript to add the value to a form.
One way is to add a hidden form element, and set its name/value.
<a class="button" name="cancel" href="#">Cancel</a>
<input type="hidden" id="buttonClicked" />
Then using JavaScript (jQuery):
$(function(){
$('a.button').click(function(e){
e.preventDefault();
$('#buttonClicked').prop({
name: $(this).prop('name'),
value: $(this).prop('name')
});
$('#frmCompose').submit();
});
});
You can add a single hidden field to the form
<input type="hidden" id="action" value=""/>
Then set the value of action in the onclick
$("#action").attr("name","---ActionHere---");
So cancel becomes:
<a class="button" href="javascript:" onclick='$("#action").attr("name","cancel");$("#frmCompose").submit();'>Cancel</a>
And send becomes:
<a class="button" href="javascript:" onclick='$("#action").attr("name","send");$("#frmCompose").submit();'>Send</a>
Hope this helps
I think the easiest way is just to create an <input type="hidden" /> with the name you want, like this:
<input type="hidden" name="cancel" />
<a class="button" href="javascript:" onclick="$('#frmCompose').submit();">Cancel</a>
may be you not need to use <a> ?
html:
<button class="alike">Test</button>
Test​
css:
button.alike,a {
border: 0px;
text-decoration: underline;
color: #00E;
width: auto;
cursor: pointer;
background-color: inherit;
font-family: 'Times New Roman';
font-size: 16px;
}​

Swapping elements with event handlers

I have following structure
<div id="mainblock">
<div id="inner1">
some content in inner1
</div>
<div id="innersub1">
<input type="submit" id="go" value="go">
<input type="submit" id="delete" value="delete">
</div>
<div id="inner2">
some content in inner2
</div>
<div id="innersub2">
<input type="submit" id="go" value="go">
<input type="submit" id="delete" value="delete">
</div>
I need to exchange content between inner1 and inner2 div inluding ids. So, the id's change like inner1 becomes inner2,innersub1 becomes innersub2, and viceversa. I have been able to do this, using jquery. Now, go and delete buttons have attached handlers. But, now when I click "edit", it shows previous content before exchange. So, how should I reattach these handlers? Can I handle this swapping of content with handlers in some other way?
thanks
You can manually (in code) detach reattach them. Alternately you can just hide an unhide the buttons you need and leave the event handlers as they are.

Categories

Resources