Storing a value in querystring but still show div

Question

My HTML:

<a href="?id=2" id="showdiv">Open div and store values</a>
<div id="divtoshow" style="display:none;">Hello</div>

My jQuery:

$("a#showdiv").click(function(){
    $("#divtoshow").show();
}

My Problem:

When I click on the link it must show the div and add the query string but it doesn't work, because if I click the link it restarts the page to add the query string and then the div won't show. But I still need it to add the query string then.

You cannot do it without post back. See http://stackoverflow.com/questions/17632472/how-to-change-the-querystring-on-the-same-page-without-postback — SpiderCode, Apr 01 '14 at 06:31

T J · Accepted Answer · 2014-04-01T06:42:48.483

1

Simply change your anchor to

<a href="#showDiv?id=2" id="showdiv">Open div and store values</a>

In simple terms then it won't refresh the page, instead it'll bring the element with id showdiv to view,. of course if it exists..

edited Apr 01 '14 at 06:42

answered Apr 01 '14 at 06:32

T J

42,762
13
83
138

score 0 · Answer 2 · answered Apr 01 '14 at 06:27

0

1) Since id is unique, you can use #showdiv instead of a#showdiv

2) Use e.preventDefault() to prevent default behaviour of your click

3) You're missing # to target div with id divtoshow

$("#showdiv").click(function(e){
    e.preventDefault();
    $("#divtoshow").show();
});

answered Apr 01 '14 at 06:27

Felix

37,892
8
43
55

But I still need it to add the query string then. – Jake 404 Apr 01 '14 at 06:28
You cannot do it without reloading page. – Felix Apr 01 '14 at 06:31

score 0 · Answer 3 · edited Apr 01 '14 at 06:30

0

use preventDefault to prevent default action:

 $("#showdiv").click(function(e){
   e.preventDefault();
   $("#divtoshow").show();
  }

edited Apr 01 '14 at 06:30

Sridhar R

20,190
6
38
35

answered Apr 01 '14 at 06:27

Milind Anantwar

81,290
25
94
125

But I still need it to add the query string then. How will it add it – Jake 404 Apr 01 '14 at 06:28

Albert Cortada · Answer 4 · 2014-04-01T06:41:08.553

0

You can:

$("a#showdiv").click(function(e){
    e.preventDefault();
    e.stopPropagation();// not sure if needed.
    $("#divtoshow").show();
}

and it should stop the link normal behaviour.

EDIT for adding the text of the div clicked:

$("a#showdiv").click(function(e){
    e.preventDefault();
    e.stopPropagation();// not sure if needed.
    var id = $('#showdiv').attr('id').split('=')[1];// if only one parameter posible
    $("#divtoshow").show();
}

edited Apr 01 '14 at 06:41

answered Apr 01 '14 at 06:28

Albert Cortada

737
3
10
25

But I still need it to add the query string then. – Jake 404 Apr 01 '14 at 06:28
I don't know if i understand, do you mean to add the text of the div clicked? if it's it then: – Albert Cortada Apr 01 '14 at 06:36

score 0 · Answer 5 · answered Apr 01 '14 at 06:31

0

Use following JQuery Code.

$("#showdiv").click(function(e){
    e.preventDefault();
    $("#divtoshow").show();
});

Demo

answered Apr 01 '14 at 06:31

Yasitha

2,233
4
24
36

score 0 · Answer 6 · answered Apr 01 '14 at 06:43

try this

function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

and on document.ready()

if(getParameterByName("id") == 2)
{
    $("#divtoshow").show();
}

Storing a value in querystring but still show div

My HTML:

My jQuery:

My Problem:

6 Answers6