CODEWITHSUNDEEP
javascriptjquerywordpressdynamic
Marco
Marco

Reputation: 1492

Dynamically changing a Wordpress menu page with jquery

I am trying to change a page in the Wordpress menu dynamically. That is, I dont want to change the menu itself, but the page that is displayed in the backend. I am using jquery to add a div once a button is clicked. My javascript function looks like this

$(document).ready(function(){
    $("#show").click(function(){
        $(".some_div").after("<div>I am added</div>").attr('class', 'some_class');      
    });
});

The button that is clicked submits a form and looks like this

<input type="submit" name="show" id="show" value="Show Me" class="button-primary" />

Once the button is clicked, the script works fine by adding the div briefly. The problem is, that the page is reloaded as well and the html code is "reset" so that the added div disappears again. Does anyone know a workaround for this?

Upvotes: 0

Views: 337

Answers (2)

stealthyninja
stealthyninja

Reputation: 10371

Try

$(document).ready(function(){
    $("#show").click(function(e){
        e.preventDefault();
        $(".some_div").after("<div>I am added</div>").attr('class', 'some_class');      
    });
});

Upvotes: 1

m90
m90

Reputation: 11812

You can prevent the default behavior of the form button by using preventDefault(), would work like this:

$(document).ready(function(){
    $("#myForm").submit(function(e){
        e.preventDefault();
        $(".some_div").after("<div>I am added</div>").attr('class', 'some_class');      
    });
});

See: http://api.jquery.com/submit/

Upvotes: 1

Related Questions