call javascript function from c# not working

Question

Hello guys i have in my popupscrit.js file this method:

function afficherMessageInfo( id, message) {


    //Get the A tag
    alert('executing the client code');

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect     
    $('#mask').fadeIn(500); 
    $('#mask').fadeTo("slow",0.8);  

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(1000);




}

$('.window .close').live("click", function (event) {
//Cancel the link behavior
event.preventDefault();
$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').live("click", function (event) {
  $(this).hide();
  $('.window').hide();
});

i want to show a popup from a c# button click event like this:

void BtnEnregistrer_btnClick(object sender, EventArgs e)
    {
        string id = "#info";
        string messageInfo = "le dossier a été crée avec succès";


        string script = String.Format("afficherMessageInfo({0},{1})", id, messageInfo);
        this.Page.ClientScript.RegisterStartupScript(this.GetType(),
        "afficherMessageInfo", script, true);

    }

and the html part:

<script src="../Scripts/jquery.js" type="text/javascript"></script>
<script src="popupScript.js" type="text/javascript"></script>

</head>

<body>
 <form id="form1" runat="server">
<div id="boxes">
<!-- information -->
    <div id="info" class="window" style="display:none;">
        <div class="info_title">
            <div class="pop_title">Information</div>
            <div class="close_image"><a href="#"class="close"/><img src="images/popups/close.jpg" border="0" /></a></div>
        </div>
        <div class="pop_content">
            <div class="pop_message">Etiam vel nisl ante. Mauris congue sodales risus ac cele risque Etiam vel nisl ante.Etiam vel nisl ante.</div>
            <div align="right"><input name="" type="button" value="OK" class="info_bt"/></div>
        </div>
    </div>
<!-- Alerte -->
    <div id="alerte" class="window" style="display:none;">
        <div class="alerte_title">
            <div class="pop_title">Alerte</div>
            <div class="close_image"><a href="#"class="close"/><img src="images/popups/close.jpg" border="0" /></a></div>
        </div>
        <div class="pop_content">
            <div class="pop_message">Etiam vel nisl ante. Mauris congue sodales risus ac cele risque Etiam vel nisl ante.Etiam vel nisl ante.</div>
            <div align="right"><input name="" type="button" value="OK" class="alerte_bt"/></div>
        </div>
    </div>
<!-- validation -->
    <div id="validation" class="window" style="display:none;">
        <div class="validation_title">
            <div class="pop_title">Validation</div>
            <div class="close_image"><a href="#"class="close"/><img src="images/popups/close.jpg" border="0" /></a></div>
        </div>
        <div class="pop_content">
            <div class="pop_message">Etiam vel nisl ante. Mauris congue sodales risus ac cele risque Etiam vel nisl ante.Etiam vel nisl ante.</div>
            <div align="right"><input name="" type="button" value="Annuler" class="validation_bt"/> <input name="" type="button" value="OK" class="validation_bt"/></div>
        </div>
    </div>
<!-- confirmation -->
    <div id="confirmation" class="window" style="display:none;">
        <div class="confirmation_title">
            <div class="pop_title">Demande de Confirmation</div>
            <div class="close_image"><a href="#"class="close"/><img src="images/popups/close.jpg" border="0" /></a></div>
        </div>
        <div class="pop_content">
            <div class="pop_message">Etiam vel nisl ante. Mauris congue sodales risus ac cele risque Etiam vel nisl ante.Etiam vel nisl ante.</div>
            <div align="right"><input name="" type="button" value="Exemple 1" class="confirmation_bt"/> <input name="" type="button" value="Exemple 2" class="confirmation_bt"/> <input name="" type="button" value="Exemple 3" class="confirmation_bt"/> <input name="" type="button" value="Annuler" class="confirmation_bt"/> <input name="" type="button" value="OK" class="confirmation_bt"/></div>
        </div>
    </div>
<!-- Masque pour couvrir la page -->
    <div id="mask"></div>
</div>

what's the pb the alert is not showing

score 1 · Answer 1 · answered Nov 10 '11 at 15:21

1

It looks like the parameters you are passing to your javascript function is missing quotes:

The line

string script = String.Format("afficherMessageInfo({0},{1})", id, messageInfo);

should read

string script = String.Format("afficherMessageInfo('{0}','{1}')", id, messageInfo);

answered Nov 10 '11 at 15:21

Will

340
3
8

it append the "afficherMessageInfo('#info','le dossier a été crée avec succès')" to the end of the document. – Nov 10 '11 at 15:40

score 1 · Answer 2 · answered Nov 10 '11 at 15:21

1

you are missing a semi-colon after afficherMessageInfo()...

have you tried debugging this using browser tools?

answered Nov 10 '11 at 15:21

Jason

15,915
3
48
72

1

There are a lot of issues with this code. To the original poster, is it possible to hire someone who understands Javascript and C#? I ask because for example, your strings are being passed unescaped leaving them open to script injection. Getting this one page working is not your only challenge here. – Chris Moschini Nov 10 '11 at 15:55
What the pb with the code Jason.it's the same code as everywhere check:http://stackoverflow.com/questions/788330/passing-arguments-to-javascript-function-from-code-behind – Nov 10 '11 at 16:05
there are many syntax errors in the javascript your code behind is emitting. your best bet to debug the javascript is run this in chrome, and open the developer tools to determine what's causing the error. – Jason Nov 10 '11 at 16:10

Icarus · Answer 3 · 2011-11-10T15:44:08.210

0

Remove the true parameter on your RegisterStartupScript function call, the reason being that it's already defined in your markup for sure within a <script></script> block.

RegisterStartupScript has an overload that does not take the include script block param at the end.

So change your line to this:

this.Page.ClientScript.RegisterStartupScript(this.GetType(),
"afficherMessageInfo", script);

edited Nov 10 '11 at 15:44

answered Nov 10 '11 at 15:21

Icarus

63,293
14
100
115

Hi lcarus.the function is defined inside popupscript.js file – Nov 10 '11 at 15:23
@user594166 but you still have a ` – Icarus Nov 10 '11 at 15:25
can you write that lcarus in your answer. – Nov 10 '11 at 15:30
thank you lcarus.it only "afficherMessageInfo('#info','le dossier a été crée avec succès')" to the DOM (in the bottom of the document,afficherMessageInfo('#info',it writes "le dossier a été crée avec succès')" ) this is bizzare – Nov 10 '11 at 16:03

score 0 · Answer 4 · edited Nov 11 '11 at 09:37

0

Why don't you just add OnClientClick attribute?

protected void Page_Load(object sender, EventArgs e)
{
    string id = "#info";
    string messageInfo = "le dossier a été crée avec succès";

    BtnEnregistrer.OnClientClick = String.Format("afficherMessageInfo('{0}','{1}')", id, messageInfo);

}

This method will refrain you from a PostBack and will give you a popup instantly.

edited Nov 11 '11 at 09:37

Will

340
3
8

answered Nov 10 '11 at 15:27

Abdul Munim

18,869
8
52
61

Robert Wilson · Answer 5 · 2011-11-11T14:47:32.270

// Round your values before using them since they can result in float.
// Also you have to implicitly add '.px' to them.

//Get the screen height and width
var maskHeight = $(document).height() + '.px';
var maskWidth = $(window).width() + '.px';

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({
    'width':maskWidth,
    'height':maskHeight
});

var windowH = Math.round(winH/2-$(id).height()/2) + '.px';
var windowW = Math.round(winW/2-$(id).width()/2) + '.px';

$(id).css({
    'top': windowH,
    'left': windowW
});

call javascript function from c# not working

5 Answers5