bbcode doesn't work when i add online jquery library in footer

Question

first time using stackoverflow.. so sorry for being confusing here.

I just implemented bbcode on my bootstrap webpage. it all works as i want it too, but when that works, my navigation doesn't work.

When i add this :

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

to my footer, my navigation works fine, but then my bbcode doesn't work as exspected.

if i comment it out, the script tag. bb code works perfect but then my navigation doesn't work...

this is the BBcode i use:

<div class="addChatMessage">

<form action="../code/crud.php?action=addToChat" method="POST" class="form-inline">

<div class="form-group">
   <textarea id="test" name="message" class="form-control"></textarea>                                      
</div>
<button type="submit" class="btn btn-success">Send</button>
</form>

<!-- preview bbcode-->

<br><H5 class="white">Preview</H5>

<div id="preview" class="previewbox col-12"></div>



<!-- load ajax library-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<!-- load custom js -->

<script src='bbedit/jquery.bbcode.js' type='text/javascript'></script>


<script type="text/javascript">

$(document).ready(function(){
                  $("#test").bbcode({tag_bold:true,tag_italic:true,tag_underline:true,tag_link:true,tag_image:true,button_image:true});
                  process();
            });

            var bbcode="";
            function process()
            {
                if (bbcode != $("#test").val())
                {
                        bbcode = $("#test").val();
                        $.get('bbedit/bbParser.php',
                        {
                                bbcode: bbcode
                        },
                        function(txt){
                                $("#preview").html(txt);
                                })

                }
                setTimeout("process()", 2000);

            }



        </script>

inside the preview bbcode it is supposed to mirror what is inside the textarea, but formatted according to bbcode.

and it is this that crashes or just stops working when i activate the script for jquery 1.11.3.min.js.

and when the jquery is commented out, the nav doesn't work but the bbcode works perfect...

Any ideas as to why it does this ?

score 0 · Answer 1 · answered Dec 15 '15 at 16:42

0

This happens because you load jquery twice, once in your footer (jquery 1.11), and once in the code

<!-- load ajax library-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

I suggest you remove the code above and only add the appropriate jquery version above your bbcode. Check if bbcode works with jquery 1.11 or make your navigation work with jquery 1.3.2

answered Dec 15 '15 at 16:42

Niki van Stein

10,564
3
29
62

It is two different libraries. And removing the ajax one did not work. only made the bb stop working and the nav work again. – André Lange Dec 15 '15 at 17:01

Bhavin Solanki · Answer 2 · 2015-12-15T17:02:59.783

i got the issue. The issue is you are using two different jQuery libraries, so it got conflict with each other. To remove this issue you have to use jQuery.noConflict(); So your code will be something like this. Try this and let me know, I have other idea too.

    <div class="addChatMessage">

<form action="../code/crud.php?action=addToChat" method="POST" class="form-inline">

<div class="form-group">
   <textarea id="test" name="message" class="form-control"></textarea>                                      
</div>
<button type="submit" class="btn btn-success">Send</button>
</form>

<!-- preview bbcode-->

<br><H5 class="white">Preview</H5>

<div id="preview" class="previewbox col-12"></div>



<!-- load ajax library-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<!-- load custom js -->
<script type="text/javascript">
      var $ = jQuery.noConflict();
</script>
<script src='bbedit/jquery.bbcode.js' type='text/javascript'></script>


<script type="text/javascript">

$(document).ready(function(){
                  $("#test").bbcode({tag_bold:true,tag_italic:true,tag_underline:true,tag_link:true,tag_image:true,button_image:true});
                  process();
            });

            var bbcode="";
            function process()
            {
                if (bbcode != $("#test").val())
                {
                        bbcode = $("#test").val();
                        $.get('bbedit/bbParser.php',
                        {
                                bbcode: bbcode
                        },
                        function(txt){
                                $("#preview").html(txt);
                                })

                }
                setTimeout("process()", 2000);

            }



        </script>

Did not seem to work adding the var $ = jQuery.noConflict(); — André Lange, Dec 15 '15 at 17:00
I have update my answer it should work.... if its still not work then can provide me your website url so i can check it — Bhavin Solanki, Dec 15 '15 at 17:04
still doesn't work. And the project is local. but you can view the files here: https://drive.google.com/folderview?id=0Bzj0YNxHItmuSjhvR3lqMXNLbXM&usp=sharing The code is under page, and the footer is under includes. and the bbcode is used on the index page. — André Lange, Dec 15 '15 at 17:11

bbcode doesn't work when i add online jquery library in footer

2 Answers2