CODEWITHSUNDEEP
javascriptjqueryhtml
Tony
Tony

Reputation: 121

jquery ddslick not working

Okay, this is continuing from my prior asked question: iFrame with Variable URL in PHP Variable I even have it set to automatically turn on when the page is ready and that still doesnt work.

Now I am using ddslick so I can show an icon next to each drop down in a form. This is what Im doing: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ddslick.min.js"></script>

Then in the dropdown:

<select form="form1" id="MyMenu">
    <option value="0" data-imagesrc="http://example.com/entry/value0.png" data-description="Description 0" >Nothing</option>
    <option value="1" data-imagesrc="http://example.com/entry/value1.png" data-description="Description 1" >Value 1</option>
    <option value="2" data-imagesrc="http://example.com/entry/value2.png" data-description="Description 2" >Value 2</option>
</select>

The scripts:

<script>
//Make it slick!
$('#make-it-slick').on('click', function(){
    $('#MyMenu').ddslick();
});
//Restore Original
$('#restore').on('click', function(){
    $('#MyMenu').ddslick('destroy');
});
$(document).ready(function(){
   $('#MyMenu').ddslick(); // Turn on Slickness
});
</script>

Lastly the form

<form name="form1" id="form1">
    <input type="submit" name="submit" id="submit" value="Submit Form">
    <button id="make-it-slick"> Make it slick!</button>
    <button id="restore"> Restore to Original</button>
</form>

Upvotes: 0

Views: 2812

Answers (1)

Domain
Domain

Reputation: 11808

Please replace the code you have written in script tag with below code

<script type="text/javascript">
//Make it slick!
$(document).ready(function(){
   $('#MyMenu').ddslick(); // Turn on Slickness

   $('#make-it-slick').click(function(){
    $('#MyMenu').ddslick();
    return false; //do not propogate click
   });

   $('#restore').click(function(){
    $('#MyMenu').ddslick('destroy');
    return false; //do not propogate click
    });

});
</script>

With your code, when button is clicked, that click is followed and form is submitted. button tag in form submits the form. So now what we need to do here is when button is clicked, form should not get submit but it should only execute the javascript code. We do this by returning false in click method.

Hope this helps :)

Upvotes: 1

Related Questions