CODEWITHSUNDEEP
jquerytwitter-bootstrapnotificationscharactermodal-dialog
dzordz
dzordz

Reputation: 2317

Jquery Bootstrap modal notification on more than max charaters select

With help of stackers, I've combined jquery script which copies desired selection of text on button click to corresponding input. Today good guy over here helped me to limit a number of characters copied to input. Now I wanna make some sort of notification if user selects (for example on first field) more than 5 characters which tells him something like: "This field accepts maximum of 5 characters, your selection is more than that and it will be limited to maximum number in input.". And so that notification appears for every input there. I've made a modal with Bootstrap and assigned it to first button "copy to 1" for example to show how it should look.. The code for verification of selected number of character is not set up in any way... So the modal now appear every time you press "copy to 1" button..

For now with example modal: http://jsfiddle.net/dzorz/4JAK2/

html:

    <p id="highlighted_text">Aliquam eget ipsum accumsan, convallis 
nulla sit amet, auctor est. Nam quis condimentum eros, vel 
condimentum lacus. In id enim at sem gravida sodales eu vitae risus. 
Morbi sed mi sit amet lectus rhoncus gravida a sit amet nisl. 
Phasellus quis ultricies leo. Duis vel lobortis mauris. 
Suspendisse sed diam eu turpis facilisis rutrum vitae vitae dolor.</p>
<form id="myform" class="form-horizontal">
</fieldset>
<div class="control-group">
    <input type="text" class="input-small" id="input1"> <a href="#attention1" role="button" data-toggle="modal" id="copy1" class="btn btn-primary">Copy to 1</a>

</div>
<div class="control-group">
    <input type="text" class="input-small" id="input2"> <a href="#" id="copy2" class="btn btn-primary">Copy to 2</a>

</div>
<div class="control-group">
    <input type="text" class="input-small" id="input3"> <a href="#"  id="copy3" class="btn btn-primary">Copy to 3</a>

</div>
</fieldset>
</form>

<!-- Modal1 -->
<div id="attention1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Attention!</h3>
  </div>
  <div class="modal-body">
    <p>This field accepts maximum of 5 characters, your selection is more than that and it will be limited to maximum number in input.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

script:

    // Get user selection text on page
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

$(document).ready(function () {

$('#copy1').click(function () {
    var selectedText=getSelectedText().toString();
     $('#input1').val(selectedText.substring(0,5));
});
$('#copy2').click(function () {
     var selectedText=getSelectedText().toString();
    $('#input2').val(selectedText.substring(0,2));
});
$('#copy3').click(function () {
     var selectedText=getSelectedText().toString();
    $('#input3').val(selectedText.substring(0,3));
});
});

is it maybe too complicated to code something like that? Would it be easier to solve it with somethin other than bootstrap.js plugin and it's modal?

You can edit my jsfiddle freely, just please help me some way...

Upvotes: 0

Views: 787

Answers (1)

colestrode
colestrode

Reputation: 10658

You can test the length of the selected text and if it is less than or equal to 5 characters, you can call event.stopPropagation(). This will stop the bootstrap listeners from picking up the click event, so the modal dialog won't show.

Here's an example using #input1, you could follow the same strategy for #input2 and #input3:

$('#copy1').click(function (event) {
    var selectedText=getSelectedText().toString();
     $('#input1').val(selectedText.substring(0,5));

    if(selectedText.length <= 5) {
        event.stopPropagation(); //stops modal dialog from being shown
    }

});

Working Fiddle

Upvotes: 1

Related Questions