5 Replies - 1457 Views - Last Post: 29 August 2012 - 01:27 AM Rate Topic: -----

#1 mserra  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 27-August 12

HELP: Problem handling select events with javascript/jquery/c# (MVC4)

Posted 27 August 2012 - 02:31 AM

Hi, im new in mvc4 development, but i have some c# background. So, I started with a mvc 4 web application template and then I choosed the mobile application template.

Then, i started making tests, but i wanted handle events with javascript the client part, and the server side with c#. Then I do some tests and all worked great...

Now, i have more 'pages' than the home page, so i re-used that select because i need it all the time, so i have the select and when the selected value changes, the select fires the onchange event, but... all work great with one page, but when i select the values from the select on the 'new' pages, definitely dont work. (example)
Collapse | Copy Code
<select>

<option a>

<option b>

<option c>

</select>
localhost/Home -> If this is the first time I load the page, as i said , all works great, if I select some values, i can manage them.

Then,

localhost/Whatever -> Now i acces (by linking) to this page, (Lets we say the last previously selected option was B), now i can't handle another 'change' in the select, because I'll always see the B option as the selected one, (because it was selected previously).

If i do the same, starting with localhost/Whatever, and then select some values; but then change to localhost/Home, its the same...

it always show me the last selected option from the previously loaded page.

Below I'll attach the project then you can see what I say for yourself. You have a select, do some selects, then navigate to another page, select some values and you will see that those are the same as the previously values; it remain static as if the (change) event is not fired. (I tried with the '.change' event from jquery and I get the same...)

http://www.sendspace.com/file/p4u4pa[^]

So, whats wrong with that?

Please , help. Thanks.



I isolated the problem, now... the code I pasted is a sample code of what I'm trying...

I have a div that when you click on it, it shows a message and changes his content, (it could be, change content, change the css whatever is needed) this div is repeated on every page, so this is why I need this behaviour being repeated on every page.

If you take a (Project>Asp.net mvc4 application>Mobile Application) simple template and easily paste this code on the Site.Master page, you will see what I'm wondering... why happens this?

If I'm in (/Home) and we click on the DIV:

- Skips an alert with the content of that DIV

- Changes the content of the DIV (From ' ' to A)

If we click again:

- Skips an alert with the content of that DIV

- Changes the content of the DIV (From 'A' to 'B')



So far so correct, but if now...

If we go to another page (accessing by the link) (/About or /Contact) and we click on the DIV...

- Skips an alert with the supposed content of that DIV (Now we are in a new page the content of the div should be ' ' but it shows me 'B' like last time it skiped me the alert)

- Also as previously, the content of the DIV should change, but it doesn't change anymore.

If we click again...

- It will skip 'A' but the correct thing should be ' ', then A, then B. Not load the previous content and follow from there... and also the content should change.


Collapse | Copy Code
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
 
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title>My MVC Application</title>
<meta name="viewport" content="width=device-width" />
<link href="<%: Url.Content("~/favicon.ico") %>" rel="shortcut icon" type="image/x-icon" />
<%: Styles.Render("~/Content/mobileCss", "~/Content/css") %>
<%: Scripts.Render("~/bundles/modernizr") %>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<asp:ContentPlaceHolder ID="Header" runat="server">
<h1><asp:ContentPlaceHolder ID="Title" runat="server" /></h1>
<% Html.RenderPartial("LoginUserControl"); %>
</asp:ContentPlaceHolder>
</div>
<div data-role="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
 
<div id="helloButton" onclick="doSomething();" style="border:1px solid black;height:150px;width:150px;">
 
</div>
 
<script type="text/javascript">
function doSomething() {
var result = "";
var dinamic = "A";
var element = document.getElementById("helloButton");
 
alert(element.innerHTML);
 
if (element.innerHTML == dinamic) {
result = "B";
} else {
result = dinamic;
}
 
$("#helloButton").html(result);
element.innerHTML = result;
}
</script>
 
</div>
</div>
 
<%: Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") %>
<asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: HELP: Problem handling select events with javascript/jquery/c# (MVC4)

#2 mserra  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 27-August 12

Re: HELP: Problem handling select events with javascript/jquery/c# (MVC4)

Posted 27 August 2012 - 04:29 AM

I think it has something to do with 'THIS'.
Was This Post Helpful? 0
  • +
  • -

#3 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,488
  • Joined: 28-April 09

Re: HELP: Problem handling select events with javascript/jquery/c# (MVC4)

Posted 27 August 2012 - 05:14 AM

The problem is being caused because jquery mobile is adding a # to the url on the other pages. If you look at the url you'll notice it looks something like http//:localhost:1234/#/home/about. If you manually remove the #/ and hit enter then the page will work correctly. Unfortunately I'm not sure how you'd go about fixing this as I'm not a jquery mobile expert. However if you are developing this as a mobile site then it would be best to test this on a mobile device rather than in a full blown browser as there are some differences in them.

This post has been edited by Nakor: 27 August 2012 - 05:14 AM

Was This Post Helpful? 0
  • +
  • -

#4 mserra  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 27-August 12

Re: HELP: Problem handling select events with javascript/jquery/c# (MVC4)

Posted 27 August 2012 - 05:28 AM

View PostNakor, on 27 August 2012 - 05:14 AM, said:

The problem is being caused because jquery mobile is adding a # to the url on the other pages. If you look at the url you'll notice it looks something like http//:localhost:1234/#/home/about. If you manually remove the #/ and hit enter then the page will work correctly. Unfortunately I'm not sure how you'd go about fixing this as I'm not a jquery mobile expert. However if you are developing this as a mobile site then it would be best to test this on a mobile device rather than in a full blown browser as there are some differences in them.


What makes you think jquery mobile add a #? Where you see that? In what part of the code? Because I don't see any #.

Thanks for responding
Was This Post Helpful? 0
  • +
  • -

#5 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,488
  • Joined: 28-April 09

Re: HELP: Problem handling select events with javascript/jquery/c# (MVC4)

Posted 28 August 2012 - 08:33 PM

It's up in the url, when you select the link for the next page instead of the url looking like "http://mysite/home/about" it looks like "http://mysite/#/home/about". You can see the url in the address bar at the top of your browser, it's where you type in the address for a website.

Quote from the docs for jquery mobile

Quote

In general, hash changes are created whenever a link is clicked in jQuery Mobile. When a link is clicked, jQuery Mobile will make sure that the link is referencing a local URL, and if so, it'll prevent the link's default click behavior from occurring and request the referenced URL via Ajax instead. When the page returns successfully, it will set the location.hash to the new page's relative URL.


Link to the jquery mobile docs where I found this information.

One suggestion I've seen to correct this is to add rel="external" to the link

<a href="nextpage.aspx" rel="external">Next Page</a>


However, I haven't tried it myself to verify that it works

This post has been edited by Nakor: 28 August 2012 - 08:34 PM

Was This Post Helpful? 1
  • +
  • -

#6 mserra  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 27-August 12

Re: HELP: Problem handling select events with javascript/jquery/c# (MVC4)

Posted 29 August 2012 - 01:27 AM

View PostNakor, on 28 August 2012 - 08:33 PM, said:

It's up in the url, when you select the link for the next page instead of the url looking like "http://mysite/home/about" it looks like "http://mysite/#/home/about". You can see the url in the address bar at the top of your browser, it's where you type in the address for a website.

Quote from the docs for jquery mobile

Quote

In general, hash changes are created whenever a link is clicked in jQuery Mobile. When a link is clicked, jQuery Mobile will make sure that the link is referencing a local URL, and if so, it'll prevent the link's default click behavior from occurring and request the referenced URL via Ajax instead. When the page returns successfully, it will set the location.hash to the new page's relative URL.


Link to the jquery mobile docs where I found this information.

One suggestion I've seen to correct this is to add rel="external" to the link

<a href="nextpage.aspx" rel="external">Next Page</a>


However, I haven't tried it myself to verify that it works


This works perfect.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1