-1

how can I solve a conflict between 2 javascript one of them works but not the second one but when I separate them they work great. the conflict only happens when they are in the same page its always the that I put first doesn't mater which one I put first. I have looked all over but I cant seem to find an answer here is my script it doesn't matter if I remove

<body onload="dothis();dothat()">


function dothis(){
var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container4',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});


$(document).on("dblclick", '.text1', function()
{
    $(this).hide();    $(this).closest('.item1').find('.edit_text1').val($(this).text()).show();
});

$(document).on("click", ".edit_text1", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text1:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item1').find('.text1').text($(editingText).val()).show();
    }
});


    var count = 1;
var selectedDraggable;

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
        $(element).addClass('item1' + count);
        count++;
        $(element).on('click', function () {
            selectedDraggable = $(this);
        })
    }
};


var vm=function(){
    var self=this;
    self.items1=ko.observableArray();
    self.textContent1 = ko.observable('');
    self.init=function(){
        self.items1([]);
    }
    self.remove=function(item){
        console.log(item);
        self.items1.remove(item);
    }
    self.addNew1 = function() {
      self.items1.push( self.textContent1() );
      self.textContent1('');
    }
    self.init();
}

ko.applyBindings(new vm());



$("#fss").change(function() {
    selectedDraggable.css("font-family", $(this).val());
});



$("#size1").change(function() {
    selectedDraggable.css("font-size", $(this).val() + "px");
});


$('.fooo').click(function(){
    selectedDraggable.css("color", $(this).attr('data-color'));
});

$(document).ready(function(){
    $("#rotateButton1").click(function(){
       var x= $("#rotateInput").val();      
     selectedDraggable.css('transform','rotate(' + x + 'deg)');
      
    });
});
}​





function dothat(){
var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});


$(document).on("dblclick", '.text', function()
{
    $(this).hide();    $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});

$(document).on("click", ".edit_text", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item').find('.text').text($(editingText).val()).show();
    }
});


    var count = 1;
var selectedDraggable;

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
        $(element).addClass('item' + count);
        count++;
        $(element).on('click', function () {
            selectedDraggable = $(this);
        })
    }
};


var vm=function(){
    var self=this;
    self.items=ko.observableArray();
    self.textContent = ko.observable('');
    self.init=function(){
        self.items([]);
    }
    self.remove=function(item){
        console.log(item);
        self.items.remove(item);
    }
    self.addNew = function() {
      self.items.push( self.textContent() );
      self.textContent('');
    }
    self.init();
}

ko.applyBindings(new vm());



$("#fs").change(function() {
    selectedDraggable.css("font-family", $(this).val());
});



$("#size").change(function() {
    selectedDraggable.css("font-size", $(this).val() + "px");
});


$('.foo').click(function(){
    selectedDraggable.css("color", $(this).attr('data-color'));
});

$(document).ready(function(){
    $("#rotateButton").click(function(){
       var x= $("#rotateInput").val();      
     selectedDraggable.css('transform','rotate(' + x + 'deg)');
      
    });
});
}​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script  
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
 <link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">





<body onload="dothis();dothat()">​
user6483684
  • 53
  • 6
  • return false in onclick will stop event propagation, try return true – Josh Lin Aug 05 '16 at 02:14
  • 2
    a couple of hints about asking questions on SO - firstly I'd recommend formatting your code a little better to make it more readable. secondly, you say there's a conflict, but you don't say what stops working - don't expect us to do the basic debugging for you, try to describe what stops working for a start, nobody wants to trawl through 200 lines of poorly formatted code to just find out what you are talking about – Jaromanda X Aug 05 '16 at 02:18
  • @YanjunLin return true did not work – user6483684 Aug 05 '16 at 02:21
  • @JaromandaX I'm really sorry for my sloppy coding that is as basic as I can get it I'm truly sorry. – user6483684 Aug 05 '16 at 02:22
  • it's not sloppy coding, just the formating isn't quite there – Jaromanda X Aug 05 '16 at 02:24
  • @Jaromandax I will improve I appreciate it – user6483684 Aug 05 '16 at 02:28

2 Answers2

0

Refer this code and Link

<body onload="func1(); func2();">

http://www.htmlgoodies.com/beyond/javascript/article.php/3724571/Using-Multiple-JavaScript-Onload-Functions.htm

Wenson
  • 235
  • 4
  • 17
  • not working my second script doesn't get executed I'm using toggle to switch between containers – user6483684 Aug 05 '16 at 05:01
  • Refer this Link http://stackoverflow.com/questions/1327756/can-you-have-multiple-document-readyfunction-sections – Wenson Aug 05 '16 at 05:05
-2
/*
⚐ A Revealing Module Pattern (Public & Private) w Public Namespace 'myscript' like below avoids collisions with other scripts.

    myScript.color --> red 
    myScript.hello('Jane') --> Hello Jane
*/

var myScript = (function() {

    // reference document only once for performance
    var doc = document;

    // object to expose as public properties and methods such as clock.now
    var pub = {};

    //myscript.color
    pub.color = 'red';

    //myscript.hello
    pub.hello = function (name) {
        alert('Hello ' + name);
    };

    //API
    return pub;
}());
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91