Search jQuery

jQuery Forum

Onclick select menu url redirect

in jQuery Mobile • 5 months ago

In my mobile theme that I'm working on, I have a list of replies to an article. Next to each reply is a button that one can click (or touch) to view a select menu for options to reply, report, remove etc. assuming they have permissions. My problem is for the option to remove I want a JavaScript confirm() to give the user the option to proceed so that there isn't anyone getting mad for accidentally removing a reply. :) I cannot figure out how to get the value(the url) of the selected option. Here's the source code of the page that I'm working on.

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">
<div class="avatar">
<img src="http://localhost/siteavatars/Actors/Bruce_Willis.jpg" alt="" />
</div>
<h4>title for first post in topic</h4>
<p>by <a class="postedby" href="http://localhost/siteindex.php?action=profile;u=1">Itchme</a> -- July 10, 2012, 04:18:35 pm</p>
<span style="position: absolute; right: 10px; top: 10px">
<select id="post_options" name="post_options" class="post_options" data-icon="gear" data-iconpos="notext" data-select-menu="true" data-native-menu="false">
<option>Post Options</option>
<option value="http://localhost/siteindex.php?action=post;topic=3.0;num_replies=1">Reply</option>
<option value="http://localhost/siteindex.php?action=post;msg=4;topic=3.0">Modify</a></option>
<option value="http://localhost/siteindex.php?action=deletemsg;topic=3.0;msg=4;fcf524d3=66cb49192a102ee7ea35de6534b10ab4">Remove</option>
<option value="http://localhost/siteindex.php?action=reporttm;topic=3.0;msg=4">Report to moderator</option>
</select>
</span>
</li>
<li><div class="message_body">Body of first post in topic</div></li>
<a id="msg5"></a>
<li data-role="list-divider">
<div class="avatar">
<img src="http://localhost/siteavatars/Actors/Bruce_Willis.jpg" alt="" />
</div>
<h4>title for second post in topic</h4>
<p>by <a class="postedby" href="http://localhost/siteindex.php?action=profile;u=1">Itchme</a> -- July 10, 2012, 04:19:32 pm</p>
<span style="position: absolute; right: 10px; top: 10px">
<select id="post_options" name="post_options" class="post_options" data-icon="gear" data-iconpos="notext" data-select-menu="true" data-native-menu="false">
<option>Post Options</option>
<option value="http://localhost/siteindex.php?action=post;topic=3.0;num_replies=1">Reply</option>
<option value="http://localhost/siteindex.php?action=post;msg=5;topic=3.0">Modify</a></option>
<option value="http://localhost/siteindex.php?action=deletemsg;topic=3.0;msg=5;fcf524d3=66cb49192a102ee7ea35de6534b10ab4">Remove</option>
<option value="http://localhost/siteindex.php?action=reporttm;topic=3.1;msg=5">Report to moderator</option>
</select>
</span>
</li>
<li><div class="message_body">Body message of second post.</div></li>
</ul>

What I want to do is to redirect them to the url of the value="" in the selected option. BUT, if the remove option is selected, I need a confirmation box to popup and ask them first. Here's some pseudo code to see what I'm saying.

<script>
$(document).ready(function() {
$("#post_options").onclick(function(){
var text = the text of the selected option. (remove, modify, reply, report);
var url = the url that is set in the value="" attribute of the select option tag.
});
if(text == "Remove") {
if(confirm("Remove this message?")) {
if (url) {
window.location = url;
}
}
return false;
}
else {
if (url) {
window.location = url;
}
return false;
}
});
</script>

The part I can't figure out is how to get both the text, and the URL from the select menu. Since jquerymobile completely changes things behind the scenes, I can't quite figure it out. Any help would be greatly appreciated.

Itchme

Replies(6)

John Chac..

Re: Onclick select menu url redirect

5 months ago

you can listenen to change event of selectmenu

http://jquerymobile.com/demos/1.2.0/docs/forms/selects/events.html

and get value

something like

http://jsfiddle.net/JwueU/2/

itchme

Re: Onclick select menu url redirect

5 months ago

That seems to be exactly what I'm looking for minus one small complication. How do I get the text value of the same selected item? text() returns the value of all the options in the select menu.

Thank you for the link to the docs. It made me realize I had an error in my code with multiple ID's which was part of my problem. :)

watusiware

Re: Onclick select menu url redirect

5 months ago

Well, with jQuery and the use of selectors, you have a means to access any element on the page and the attributes of those elements. It's there, you just have to get it!

But you've made things rather difficult for yourself by choosing to populate the "values" with URLs. There's a reason why most developers use simple integer values for select values. They are easy to work with and versatile.

If you were to use an integer, you can use it as an index value. You can use the index to offset into an array of URLs that you define in the JS code, and, then of course, you can easily test the integer value.

If you prefer to keep the URLs in the DOM rather than in an array in JS code, you could put the URLs in data-attributes, which you could easily find using a selector and the numerical index.

I should point out, though, that you don't really need to access the text at all, since you have everything you need in the URLs. Simply do a regex test on the URL value. Just pick out the "action" value from the URL and test on that instead of going off and finding the text.

itchme

Re: Onclick select menu url redirect

5 months ago

Your right in that I don't have to have the text, since there are other ways as you pointed out. It was just a simple way that I thought of to check which option was selected. I still need the URL somewhere, and need to pass that URL to redirect the user to the next page. So if anyone has a good way to do that, I'm all ears. Thanks for the pointers.

John Chac..